|
| 1 | +'use client' |
| 2 | + |
| 3 | +import { useSidebar, useSidebarDispatch } from '@/contexts/SidebarContext' |
| 4 | +import { SidebarClose, SidebarOpen } from 'lucide-react' |
| 5 | +import { useIsMobile } from '@/hooks/use-mobile' |
| 6 | +import SidebarNavRail from './SidebarNavRail' |
| 7 | +import clsx from 'clsx' |
| 8 | + |
| 9 | +interface IAppSidebarProps {} |
| 10 | + |
| 11 | +export const AppSidebar = ({}: IAppSidebarProps) => { |
| 12 | + const { element, isOpen } = useSidebar() |
| 13 | + const dispatch = useSidebarDispatch() |
| 14 | + const isMobile = useIsMobile() |
| 15 | + |
| 16 | + const toggleSidebar = () => { |
| 17 | + dispatch({ type: 'SET_OPEN', payload: !isOpen }) |
| 18 | + } |
| 19 | + |
| 20 | + return ( |
| 21 | + <> |
| 22 | + {/* Toggle Button (mobile only) */} |
| 23 | + {isMobile && ( |
| 24 | + <button onClick={toggleSidebar} |
| 25 | + className={clsx( |
| 26 | + 'fixed top-4 z-50 transition-all bg-white border border-gray-300 shadow rounded-full p-2', |
| 27 | + isOpen ? 'left-52' : 'left-4' |
| 28 | + )} |
| 29 | + aria-label={isOpen ? 'Close Sidebar' : 'Open Sidebar'} |
| 30 | + > |
| 31 | + {isOpen ? <SidebarClose size={20} /> : <SidebarOpen size={20} />} |
| 32 | + </button> |
| 33 | + )} |
| 34 | + |
| 35 | + {/* Sidebar */} |
| 36 | + <div |
| 37 | + className={clsx('h-screen w-64 bg-sidebar border-r border-sidebar-border z-40 transition-transform duration-300', |
| 38 | + isMobile |
| 39 | + ? [ |
| 40 | + 'fixed top-0 left-0', |
| 41 | + isOpen ? 'translate-x-0' : '-translate-x-full', |
| 42 | + 'flex flex-col' |
| 43 | + ] |
| 44 | + : 'flex flex-col sticky top-0' |
| 45 | + )} |
| 46 | + > |
| 47 | + {/* Header */} |
| 48 | + <div className="w-full h-16 border-b border-sidebar-border p-2 flex justify-center items-center bg-white"> |
| 49 | + {isMobile ? ( |
| 50 | + <img src="/DMVLOGO.svg" alt="Logo" className="h-full" draggable={false} /> |
| 51 | + ) : ( |
| 52 | + <img src="/DMVLOGOHORZ.svg" alt="Logo" className="h-full" draggable={false} /> |
| 53 | + )} |
| 54 | + </div> |
| 55 | + |
| 56 | + {/* Content */} |
| 57 | + <div className="flex-1 overflow-y-auto relative flex"> |
| 58 | + <SidebarNavRail /> |
| 59 | + {element} |
| 60 | + </div> |
| 61 | + </div> |
| 62 | + </> |
| 63 | + ) |
| 64 | +} |
0 commit comments