139 lines
4.0 KiB
React
139 lines
4.0 KiB
React
import { useState } from 'react'
|
|
import { NavLink, Outlet, useLocation } from 'react-router-dom'
|
|
import {
|
|
HiChevronRight,
|
|
HiAcademicCap,
|
|
HiBookOpen,
|
|
HiDocumentText,
|
|
HiQuestionMarkCircle,
|
|
HiUserGroup,
|
|
HiCog6Tooth,
|
|
HiOutlineUserCircle,
|
|
} from 'react-icons/hi2'
|
|
import { toast } from 'sonner'
|
|
import { navigationItems } from '../config/navigation.js'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
} from '../components/ui/dropdown-menu.jsx'
|
|
|
|
const iconMap = {
|
|
'/courses': HiBookOpen,
|
|
'/lessons': HiDocumentText,
|
|
'/question-bank': HiQuestionMarkCircle,
|
|
'/users': HiUserGroup,
|
|
'/settings': HiCog6Tooth,
|
|
}
|
|
|
|
function SidebarItem({ item }) {
|
|
const [open, setOpen] = useState(false)
|
|
const hasChildren = item.children && item.children.length > 0
|
|
const location = useLocation()
|
|
const isChildActive = hasChildren && item.children.some((c) => location.pathname === c.path)
|
|
const Icon = iconMap[item.path]
|
|
|
|
if (!hasChildren) {
|
|
return (
|
|
<NavLink
|
|
to={item.path}
|
|
className={({ isActive }) =>
|
|
isActive ? 'sidebar__link sidebar__link--active' : 'sidebar__link'
|
|
}
|
|
title={item.label}
|
|
>
|
|
<span className="sidebar__link-icon">
|
|
{Icon ? <Icon size={18} /> : item.shortLabel}
|
|
</span>
|
|
<span className="sidebar__link-text">{item.label}</span>
|
|
</NavLink>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={'sidebar__group' + (open || isChildActive ? ' sidebar__group--open' : '')}>
|
|
<button
|
|
type="button"
|
|
className={'sidebar__link sidebar__link--parent'}
|
|
onClick={() => setOpen((v) => !v)}
|
|
title={item.label}
|
|
>
|
|
<span className="sidebar__link-icon">
|
|
{Icon ? <Icon size={18} /> : item.shortLabel}
|
|
</span>
|
|
<span className="sidebar__link-text">{item.label}</span>
|
|
<HiChevronRight className={'sidebar__chevron' + (open ? ' sidebar__chevron--open' : '')} />
|
|
</button>
|
|
{open && (
|
|
<div className="sidebar__submenu">
|
|
{item.children.map((child) => (
|
|
<NavLink
|
|
key={child.path}
|
|
to={child.path}
|
|
className={({ isActive }) =>
|
|
isActive ? 'sidebar__sublink sidebar__sublink--active' : 'sidebar__sublink'
|
|
}
|
|
>
|
|
<span className="sidebar__sublink-text">{child.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MainLayout() {
|
|
return (
|
|
<div className="app-shell">
|
|
<aside className="sidebar">
|
|
<div className="sidebar__brand">
|
|
<span className="sidebar__logo"><HiAcademicCap size={22} /></span>
|
|
<div className="sidebar__brand-text">
|
|
<strong>APLP LMS</strong>
|
|
<span>Learning platform</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sidebar__divider" />
|
|
|
|
<nav className="sidebar__nav" aria-label="Main navigation">
|
|
{navigationItems.map((item) => (
|
|
<SidebarItem key={item.path} item={item} />
|
|
))}
|
|
</nav>
|
|
|
|
<div className="sidebar__footer">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="sidebar__footer-btn"
|
|
aria-label="Account menu"
|
|
title="Account"
|
|
>
|
|
<HiOutlineUserCircle size={20} />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent side="right" align="end">
|
|
<DropdownMenuItem onSelect={() => toast('Profile — coming soon')}>
|
|
Profile
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onSelect={() => toast('Logout — coming soon')}>
|
|
Logout
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="main-content">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MainLayout
|