feat(layout): add mobile sidebar drawer navigation

src/components/Navbar.tsx

@@ -3,14 +3,18 @@ import { useNavigate } from "react-router-dom"
 import { useTranslation } from "../hooks/useTranslation"
 import { Button } from "./ui/button"
 import { SettingsMenu } from "./SettingsMenu"
-import { LogOut, User, Moon, Sun, Globe, Command } from "lucide-react"
+import { LogOut, User, Moon, Sun, Globe, Command, Menu } from "lucide-react"
 import { logoutUser, getUserProfile } from "../api/users"
 import { WorkspaceSelector } from "./WorkspaceSelector"
 import { toast } from "sonner"
 import { NotificationBell } from "./notifications/NotificationBell"
 import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
 
-export function Navbar() {
+type NavbarProps = {
+  onOpenSidebar?: () => void
+}
+
+export function Navbar({ onOpenSidebar }: NavbarProps) {
   const { t, lang, setLanguage } = useTranslation()
   const navigate = useNavigate()
   const [showLogoutModal, setShowLogoutModal] = useState(false)
@@ -106,12 +110,22 @@ export function Navbar() {
   return (
     <>
       <header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200/80 bg-white/70 px-8 py-6 backdrop-blur-md transition-colors dark:border-slate-800/80 dark:bg-slate-900/70">
-        <div className="flex cursor-pointer items-center gap-2" onClick={() => navigate("/")}>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={onOpenSidebar}
+            className="inline-flex h-11 w-11 items-center justify-center rounded-xl border border-slate-200 text-slate-600 transition-colors hover:bg-slate-100 md:hidden dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800"
+            title="Open menu"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+          <div className="flex cursor-pointer items-center gap-2" onClick={() => navigate("/")}>
           <span className="relative z-20 flex items-center gap-2 text-xl font-bold tracking-tight text-slate-900 dark:text-slate-50">
             <Command className="h-7 w-7" />
             {t.title || "Qlockify"}
           </span>
         </div>
+        </div>
 
         <div className="flex items-center gap-4">
           {user && <WorkspaceSelector />}