feat(frontend): improve responsive navigation shell

src/components/Sidebar.tsx

@@ -1,187 +1,405 @@
-import { useState } from 'react';
-import { NavLink } from 'react-router-dom';
-import { 
+import { useEffect, useState } from "react"
+import { NavLink, useNavigate } from "react-router-dom"
+import {
   Users,
-  LayoutDashboard, 
+  LayoutDashboard,
   X,
-  PanelLeftClose, 
-  PanelLeftOpen, 
-  PanelRightClose, 
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
   PanelRightOpen,
   Briefcase,
   ChartColumn,
   Clock3,
   History,
   Tags,
-} from 'lucide-react';
-import { useOptionalWorkspace } from '../context/WorkspaceContext';
-import { useTranslation } from '../hooks/useTranslation';
-import { canWorkspace, WORKSPACE_LOGS_VIEW } from '../lib/permissions';
+  User,
+  Globe,
+  LogOut,
+  LogIn,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { useOptionalWorkspace } from "../context/WorkspaceContext"
+import { useTranslation } from "../hooks/useTranslation"
+import { canWorkspace, WORKSPACE_LOGS_VIEW } from "../lib/permissions"
+import { WorkspaceSelector } from "./WorkspaceSelector"
+import { SettingsMenu } from "./SettingsMenu"
+import { Button } from "./ui/button"
+import { getUserProfile, logoutUser } from "../api/users"
+import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
 
 type SidebarProps = {
-  mobileOpen?: boolean;
-  onMobileClose?: () => void;
-};
+  mobileOpen?: boolean
+  onMobileClose?: () => void
+}
 
 export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) => {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  
-  const { t, lang } = useTranslation();
-  const workspaceContext = useOptionalWorkspace();
-  const activeWorkspace = workspaceContext?.activeWorkspace ?? null;
-  const isRtl = lang === 'fa';
-  const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW);
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [showLogoutModal, setShowLogoutModal] = useState(false)
+  const [user, setUser] = useState<any>(null)
+
+  const navigate = useNavigate()
+  const { t, lang, setLanguage } = useTranslation()
+
+  const workspaceContext = useOptionalWorkspace()
+  const activeWorkspace = workspaceContext?.activeWorkspace ?? null
+
+  const isRtl = lang === "fa"
+  const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW)
 
   const ToggleIcon = isRtl
-    ? (isCollapsed ? PanelRightOpen : PanelRightClose)
-    : (isCollapsed ? PanelLeftOpen : PanelLeftClose);
+    ? isCollapsed
+      ? PanelRightOpen
+      : PanelRightClose
+    : isCollapsed
+      ? PanelLeftOpen
+      : PanelLeftClose
+
+  useEffect(() => {
+    const handleProfileUpdated = ((e: CustomEvent) => {
+      if (e.detail) {
+        setUser((prev: any) => (prev ? { ...prev, ...e.detail } : e.detail))
+      }
+    }) as EventListener
+
+    window.addEventListener("profile_updated", handleProfileUpdated)
+    return () => window.removeEventListener("profile_updated", handleProfileUpdated)
+  }, [])
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const token = getAccessToken()
+      if (!token) return
+
+      try {
+        const userData = await getUserProfile()
+        setUser(userData)
+      } catch (error) {
+        console.error("Failed to fetch user profile:", error)
+      }
+    }
+
+    void fetchUser()
+  }, [])
+
+  const handleLogout = async () => {
+    try {
+      const refreshToken = getRefreshToken()
+      if (refreshToken) {
+        await logoutUser(refreshToken)
+      }
+    } catch (error) {
+      console.error("Logout API failed:", error)
+    } finally {
+      clearSessionTokens()
+      setUser(null)
+      setShowLogoutModal(false)
+      onMobileClose?.()
+      toast.success(t.logoutToast || "Successfully logged out!")
+      navigate("/auth")
+    }
+  }
+
+  const toggleLanguage = () => {
+    const newLang = isRtl ? "en" : "fa"
+
+    if (setLanguage) {
+      setLanguage(newLang)
+    } else {
+      localStorage.setItem("language", newLang)
+      window.location.reload()
+    }
+  }
 
   const navItems = [
     {
-      path: '/timesheet',
+      path: "/timesheet",
       icon: Clock3,
-      label: t.sidebar?.timesheet || 'Timesheet'
+      label: t.sidebar?.timesheet || "Timesheet",
     },
     {
-      path: '/tags',
+      path: "/tags",
       icon: Tags,
-      label: t.sidebar?.tags || 'Tags'
-    },
-    { 
-      path: '/clients', 
-      icon: Users, 
-      label: t.sidebar?.clients || 'Clients' 
-    },
-    { 
-      path: '/projects', 
-      icon: Briefcase, 
-      label: t.sidebar?.projects || 'Projects' 
-    },
-    { 
-      path: '/workspaces', 
-      icon: LayoutDashboard, 
-      label: t.sidebar?.workspaces || 'Workspaces' 
+      label: t.sidebar?.tags || "Tags",
     },
     {
-      path: '/reports',
+      path: "/clients",
+      icon: Users,
+      label: t.sidebar?.clients || "Clients",
+    },
+    {
+      path: "/projects",
+      icon: Briefcase,
+      label: t.sidebar?.projects || "Projects",
+    },
+    {
+      path: "/workspaces",
+      icon: LayoutDashboard,
+      label: t.sidebar?.workspaces || "Workspaces",
+    },
+    {
+      path: "/reports",
       icon: ChartColumn,
-      label: t.sidebar?.reports || 'Reports'
+      label: t.sidebar?.reports || "Reports",
     },
     ...(canViewLogs
       ? [
           {
-            path: '/logs',
+            path: "/logs",
             icon: History,
-            label: t.sidebar?.logs || 'Logs',
+            label: t.sidebar?.logs || "Logs",
           },
         ]
       : []),
-  ];
+  ]
 
   const renderNavItems = (mobile = false) =>
     navItems.map((item) => {
-      const Icon = item.icon;
+      const Icon = item.icon
+
       return (
         <NavLink
-          key={`${mobile ? 'mobile' : 'desktop'}-${item.path}`}
+          key={`${mobile ? "mobile" : "desktop"}-${item.path}`}
           to={item.path}
           title={!mobile && isCollapsed ? item.label : undefined}
           onClick={() => {
-            if (mobile) onMobileClose?.();
+            if (mobile) onMobileClose?.()
           }}
           className={({ isActive }) =>
             `flex items-center rounded-lg text-sm font-medium transition-colors ${
               mobile
-                ? 'gap-3 px-4 py-3'
+                ? "gap-3 px-4 py-3"
                 : isCollapsed
-                  ? 'justify-center px-0 py-2.5'
-                  : 'gap-3 px-3 py-2.5'
+                  ? "justify-center px-0 py-2.5"
+                  : "gap-3 px-3 py-2.5"
             } ${
               isActive
-                ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
-                : 'text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50'
+                ? "bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400"
+                : "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
             }`
           }
         >
           <Icon size={mobile ? 20 : isCollapsed ? 22 : 18} className="shrink-0" />
+
           {(mobile || !isCollapsed) && (
             <span className="truncate whitespace-nowrap">{item.label}</span>
           )}
         </NavLink>
-      );
-    });
+      )
+    })
+
+  const renderMobileTopSection = () => {
+    if (!user) {
+      return null
+    }
+
+    return (
+      <div className="border-b border-slate-200 p-4 dark:border-slate-800">
+        <div className="w-full">
+          <WorkspaceSelector className="w-full" />
+        </div>
+      </div>
+    )
+  }
+
+  const renderMobileFooterSection = () => {
+    if (!user) {
+      return (
+        <div className="border-t border-slate-200 p-4 dark:border-slate-800">
+          <button
+            onClick={toggleLanguage}
+            className="flex w-full items-center gap-3 rounded-lg px-4 py-3 mb-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
+          >
+            <Globe size={20} className="shrink-0" />
+            <span className="truncate whitespace-nowrap">
+              {isRtl ? "English" : "فارسی"}
+            </span>
+          </button>
+
+          <Button
+            onClick={() => {
+              onMobileClose?.()
+              navigate("/auth")
+            }}
+            className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
+          >
+            <LogIn className="mr-2 h-4 w-4" />
+            {t.login?.signIn || "Login"}
+          </Button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="space-y-1 p-4">
+        <button
+          onClick={() => {
+            onMobileClose?.()
+            navigate("/profile")
+          }}
+          className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
+        >
+          <User size={20} className="shrink-0" />
+          <span className="truncate whitespace-nowrap">
+            {t.profile?.title || "Profile"}
+          </span>
+        </button>
+
+        <button
+          onClick={toggleLanguage}
+          className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
+        >
+          <Globe size={20} className="shrink-0" />
+          <span className="truncate whitespace-nowrap">
+            {isRtl ? "English" : "فارسی"}
+          </span>
+        </button>
+
+        <button
+          onClick={() => setShowLogoutModal(true)}
+          className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-950/50"
+        >
+          <LogOut size={20} className="shrink-0" />
+          <span className="truncate whitespace-nowrap">{t.logout || "Logout"}</span>
+        </button>
+      </div>
+    )
+  }
 
   return (
     <>
-      <aside 
-        className={`border-e border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 hidden md:flex flex-col h-screen sticky top-0 shrink-0 transition-all duration-300 ease-in-out ${
-          isCollapsed ? 'w-20' : 'w-64'
+      {/* Desktop sidebar */}
+      <aside
+        className={`hidden h-screen shrink-0 flex-col border-e border-slate-200 bg-white transition-all duration-300 ease-in-out md:sticky md:top-0 md:flex dark:border-slate-800 dark:bg-slate-950 ${
+          isCollapsed ? "w-20" : "w-64"
         }`}
       >
-        <div className={`h-18.25 flex items-center border-b border-slate-200 dark:border-slate-800 shrink-0 transition-all ${
-          isCollapsed ? 'justify-center px-0' : 'justify-between px-6'
-        }`}>
+        <div
+          className={`flex h-[73px] shrink-0 items-center border-b border-slate-200 transition-all dark:border-slate-800 ${
+            isCollapsed ? "justify-center px-0" : "justify-between px-6"
+          }`}
+        >
           {!isCollapsed && (
-            <h2 className="text-xl font-bold text-slate-800 dark:text-white truncate">
+            <h2 className="truncate text-xl font-bold text-slate-800 dark:text-white">
               {t.title || "Qlockify"}
             </h2>
           )}
+
           <button
             onClick={() => setIsCollapsed(!isCollapsed)}
-            className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
-            title={isCollapsed ? (t.sidebar?.expand || 'Expand') : (t.sidebar?.collapse || 'Collapse')}
+            className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
+            title={
+              isCollapsed
+                ? t.sidebar?.expand || "Expand"
+                : t.sidebar?.collapse || "Collapse"
+            }
           >
             <ToggleIcon size={20} />
           </button>
         </div>
-        
-        <nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
+
+        <nav className="flex-1 space-y-1 overflow-y-auto overflow-x-hidden p-4">
           {renderNavItems(false)}
         </nav>
       </aside>
 
+      {/* Mobile sidebar */}
       <div
-        className={`fixed inset-0 z-[70] md:hidden transition-all duration-200 ${
-          mobileOpen ? 'pointer-events-auto' : 'pointer-events-none'
+        className={`fixed inset-0 z-[70] transition-all duration-200 md:hidden ${
+          mobileOpen ? "pointer-events-auto" : "pointer-events-none"
         }`}
         aria-hidden={!mobileOpen}
       >
         <button
           type="button"
           className={`absolute inset-0 bg-slate-950/50 backdrop-blur-[1px] transition-opacity ${
-            mobileOpen ? 'opacity-100' : 'opacity-0'
+            mobileOpen ? "opacity-100" : "opacity-0"
           }`}
           onClick={onMobileClose}
         />
+
         <aside
-          className={`absolute inset-y-0 flex w-[18.5rem] max-w-[86vw] flex-col bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
+          dir={isRtl ? "rtl" : "ltr"}
+          className={`absolute inset-y-0 flex w-[19.5rem] max-w-[88vw] flex-col overflow-hidden bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
             isRtl
               ? `right-0 border-s border-slate-200 dark:border-slate-800 ${
-                  mobileOpen ? 'translate-x-0' : 'translate-x-full'
+                  mobileOpen ? "translate-x-0" : "translate-x-full"
                 }`
               : `left-0 border-e border-slate-200 dark:border-slate-800 ${
-                  mobileOpen ? 'translate-x-0' : '-translate-x-full'
+                  mobileOpen ? "translate-x-0" : "-translate-x-full"
                 }`
           }`}
         >
-          <div className="flex items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
-            <h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
-              {t.title || "Qlockify"}
-            </h2>
-            <button
-              type="button"
-              onClick={onMobileClose}
-              className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
-              title="Close"
-            >
-              <X size={20} />
-            </button>
+          <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+            <div className="flex shrink-0 items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
+              <h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
+                Qlockify.ir
+              </h2>
+
+              <button
+                type="button"
+                onClick={onMobileClose}
+                className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
+                title="Close"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="shrink-0">
+              {renderMobileTopSection()}
+            </div>
+
+            <nav className="shrink-0 space-y-1 p-4">
+              {renderNavItems(true)}
+            </nav>
+
+            <div className="mt-auto shrink-0">
+              {renderMobileFooterSection()}
+            </div>
           </div>
-          <nav className="flex-1 space-y-1 overflow-y-auto p-4">
-            {renderNavItems(true)}
-          </nav>
         </aside>
       </div>
+
+      {showLogoutModal && (
+        <div
+          className="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 px-4"
+          onClick={() => setShowLogoutModal(false)}
+        >
+          <div
+            className="w-full max-w-sm rounded-lg border bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
+              {t.confirmLogoutTitle || "Confirm Logout"}
+            </h2>
+
+            <p className="mb-6 text-slate-600 dark:text-slate-400">
+              {t.confirmLogoutMessage ||
+                "Are you sure you want to log out of your account?"}
+            </p>
+
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="outline"
+                onClick={() => setShowLogoutModal(false)}
+                className="dark:text-white"
+              >
+                {t.actions?.cancel || "Cancel"}
+              </Button>
+
+              <Button
+                variant="destructive"
+                onClick={handleLogout}
+                className="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
+              >
+                {t.logout || "Logout"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
-  );
-};
+  )
+}