aplp.frontend.lms/src/layouts/MainLayout.jsx

import { useState, createContext, useContext } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom'
import {
  HiChevronRight,
  HiAcademicCap,
  HiBookOpen,
  HiDocumentText,
  HiQuestionMarkCircle,
  HiUserGroup,
  HiCog6Tooth,
} from 'react-icons/hi2'
import { navigationItems } from '../config/navigation.js'

const SidebarContext = createContext()

export function useSidebar() {
  return useContext(SidebarContext)
}

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() {
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)

  return (
    <SidebarContext.Provider value={{ isSidebarCollapsed, toggleSidebar: () => setIsSidebarCollapsed(v => !v) }}>
      <div className={isSidebarCollapsed ? 'app-shell app-shell--collapsed' : '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>
        </aside>

        <main className="main-content">
          <Outlet />
        </main>
      </div>
    </SidebarContext.Provider>
  )
}

export default MainLayout