admin.js
unknown
plain_text
a year ago
4.6 kB
3
Indexable
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;
Editor is loading...
Leave a Comment