admin.js

import React, { useState, useRef, useEffect } from 'react';
import '../css/AdminPage.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link, Outlet } from 'react-router-dom';
import { faUser, faUserFriends, faCalculator, faBuilding, faWarehouse, faDollarSign, faChartLine, faBook, faChartBar, faUserCircle } from '@fortawesome/free-solid-svg-icons';

function AdminPage() {
const [isCollapsed, setIsCollapsed] = useState(false);
const sidebarRef = useRef(null);
useEffect(() => {
    const handleOutsideClick = (event) => {
        if (!sidebarRef.current && sidebarRef.current.contains(event.target)) {
            setIsCollapsed(false);
        }
    };

    document.addEventListener('click', handleOutsideClick);

    return () => {
        document.removeEventListener('click', handleOutsideClick);
    };
}, []);

const handleLinkClick = () => {
    setIsCollapsed(!isCollapsed);
};

return (
    <div className={`admin-page ${isCollapsed ? 'collapsed' : ''}`}>
        <div className="container">
            <div ref={sidebarRef} className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
                <ul>
                    <li>
                        <Link to="/admin" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faUser} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Author Management</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/member" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faUserFriends} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Account Management</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/calculate" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faCalculator} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Calculate Management</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/publishers" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faBuilding} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Publisher Management</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/warehouse" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faWarehouse} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Warehouse</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/fees" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faDollarSign} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Fees</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/revenue" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faChartLine} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Revenue</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/book-shelf" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faBook} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Book Shelf</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/statistics" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faChartBar} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Statistics</span>
                        </Link>
                    </li>
                    <li>
                        <Link to="/admin/profile" onClick={handleLinkClick}>
                            <FontAwesomeIcon icon={faUserCircle} />
                            <span className={`${isCollapsed ? 'hidden' : ''}`}>Profile</span>
                        </Link>
                    </li>
                </ul>
            </div>
            <div className="main-content">
                <Outlet />
            </div>
        </div>
    </div>
);
}

export default AdminPage;