fix: top menu

src/layouts/MainLayout.jsx

@@ -1,4 +1,4 @@
-import { useState, createContext, useContext } from 'react'
+import { useState } from 'react'
 import { NavLink, Outlet, useLocation } from 'react-router-dom'
 import {
   HiChevronRight,
@@ -8,14 +8,16 @@ import {
   HiQuestionMarkCircle,
   HiUserGroup,
   HiCog6Tooth,
+  HiOutlineUserCircle,
 } from 'react-icons/hi2'
+import { toast } from 'sonner'
 import { navigationItems } from '../config/navigation.js'
-
-const SidebarContext = createContext()
-
-export function useSidebar() {
-  return useContext(SidebarContext)
-}
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../components/ui/dropdown-menu.jsx'
 
 const iconMap = {
   '/courses': HiBookOpen,
@@ -83,34 +85,53 @@ function SidebarItem({ item }) {
 }
 
 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 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" />
+        <div className="sidebar__divider" />
 
-          <nav className="sidebar__nav" aria-label="Main navigation">
-            {navigationItems.map((item) => (
-              <SidebarItem key={item.path} item={item} />
-            ))}
-          </nav>
-        </aside>
+        <nav className="sidebar__nav" aria-label="Main navigation">
+          {navigationItems.map((item) => (
+            <SidebarItem key={item.path} item={item} />
+          ))}
+        </nav>
 
-        <main className="main-content">
-          <Outlet />
-        </main>
-      </div>
-    </SidebarContext.Provider>
+        <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>
   )
 }