54 lines
1.7 KiB
React
54 lines
1.7 KiB
React
|
import { useState } from 'react'
|
||
|
|
import { NavLink, Outlet } from 'react-router-dom'
|
||
|
|
import { navigationItems } from '../config/navigation.js'
|
||
|
|
|
||
|
|
function MainLayout() {
|
||
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={isSidebarCollapsed ? 'app-shell app-shell--collapsed' : 'app-shell'}>
|
||
|
|
<aside className="sidebar">
|
||
|
|
<div className="sidebar__brand">
|
||
|
|
<span className="sidebar__logo">L</span>
|
||
|
|
<div className="sidebar__brand-text">
|
||
|
|
<strong>APLP LMS</strong>
|
||
|
|
<span>Learning platform</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="sidebar__toggle"
|
||
|
|
aria-label={isSidebarCollapsed ? 'Mo rong sidebar' : 'Thu gon sidebar'}
|
||
|
|
title={isSidebarCollapsed ? 'Mo rong sidebar' : 'Thu gon sidebar'}
|
||
|
|
onClick={() => setIsSidebarCollapsed((current) => !current)}
|
||
|
|
>
|
||
|
|
{isSidebarCollapsed ? '>' : '<'}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<nav className="sidebar__nav" aria-label="Main navigation">
|
||
|
|
{navigationItems.map((item) => (
|
||
|
|
<NavLink
|
||
|
|
key={item.path}
|
||
|
|
to={item.path}
|
||
|
|
className={({ isActive }) =>
|
||
|
|
isActive ? 'sidebar__link sidebar__link--active' : 'sidebar__link'
|
||
|
|
}
|
||
|
|
title={item.label}
|
||
|
|
>
|
||
|
|
<span className="sidebar__link-icon">{item.shortLabel}</span>
|
||
|
|
<span className="sidebar__link-text">{item.label}</span>
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<main className="main-content">
|
||
|
|
<Outlet />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MainLayout
|