feat: update UI

src/layouts/MainLayout.jsx

@@ -1,52 +1,116 @@
-import { useState } from 'react'
-import { NavLink, Outlet } from 'react-router-dom'
+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 (
-    <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>
+    <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>
 
-        <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>
+          <div className="sidebar__divider" />
 
-        <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>
+          <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>
+        <main className="main-content">
+          <Outlet />
+        </main>
+      </div>
+    </SidebarContext.Provider>
   )
 }