feat(sidebar): add collapsible and rtl-friendly Sidebar component

src/App.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from "./components/ThemeProvider"
 import { LanguageProvider } from "./components/LanguageProvider"
 import { Toaster } from "./components/ui/toaster"
 import { Navbar } from "./components/Navbar"
+import { Sidebar } from './components/Sidebar';
 import { WorkspaceProvider } from "./context/WorkspaceContext"
 import Auth from "./pages/Auth"
 import Profile from "./pages/Profile"
@@ -15,14 +16,19 @@ import Clients from "./pages/Clients"
 
 const MainLayout = () => {
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors">
-      <Navbar />
-      <main>
-        <Outlet />
-      </main>
+    <div className="flex h-screen bg-slate-50 dark:bg-slate-950 overflow-hidden text-slate-900 dark:text-slate-100">
+      <Sidebar />
+
+      <div className="flex-1 flex flex-col h-screen overflow-hidden">
+        <Navbar />
+
+        <main className="flex-1 overflow-y-auto relative">
+          <Outlet />
+        </main>
+      </div>
     </div>
-  )
-}
+  );
+};
 
 const RootRedirect = () => {
   const isAuthenticated = !!localStorage.getItem("accessToken")  

src/components/Navbar.tsx

@@ -111,7 +111,7 @@ export function Navbar() {
         >
           <span className="relative z-20 flex items-center gap-2 font-bold text-xl tracking-tight text-slate-900 dark:text-slate-50">
             <Command className="h-7 w-7" />
-            Qlockify
+            {t.title || "Qlockify"}
           </span>
         </div>
         

src/components/Sidebar.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import { 
+  Users, 
+  LayoutDashboard, 
+  PanelLeftClose, 
+  PanelLeftOpen, 
+  PanelRightClose, 
+  PanelRightOpen 
+} from 'lucide-react';
+import { useTranslation } from '../hooks/useTranslation';
+
+export const Sidebar = () => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  
+  const { t, lang } = useTranslation();
+  const isRtl = lang === 'fa';
+
+  const ToggleIcon = isRtl
+    ? (isCollapsed ? PanelRightOpen : PanelRightClose)
+    : (isCollapsed ? PanelLeftOpen : PanelLeftClose);
+
+  const navItems = [
+    { 
+      path: '/workspaces', 
+      icon: LayoutDashboard, 
+      label: t.sidebar?.workspaces || 'Workspaces' 
+    },
+    { 
+      path: '/clients', 
+      icon: Users, 
+      label: t.sidebar?.clients || 'Clients' 
+    },
+  ];
+
+  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'
+      }`}
+    >
+      <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'
+      }`}>
+        {!isCollapsed && (
+          <h2 className="text-xl font-bold text-slate-800 dark:text-white truncate">
+            {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')}
+        >
+          <ToggleIcon size={20} />
+        </button>
+      </div>
+      
+      <nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              title={isCollapsed ? item.label : undefined}
+              className={({ isActive }) =>
+                `flex items-center py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                  isCollapsed ? 'justify-center px-0' : 'gap-3 px-3'
+                } ${
+                  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'
+                }`
+              }
+            >
+              <Icon size={isCollapsed ? 22 : 18} className="shrink-0" />
+              {!isCollapsed && (
+                <span className="truncate whitespace-nowrap">{item.label}</span>
+              )}
+            </NavLink>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+};

src/locales/en.ts

@@ -1,6 +1,15 @@
 export const en = {
+  title: "Qlockify",
+  logout: "Logout",
+  logoutToast: "Successfully logged out!",
+  confirmLogoutTitle: "Confirm Logout",
+  confirmLogoutMessage: "Are you sure you want to log out of your account?",
+  cancel: "Cancel",
+  lightMode: "Light Mode",
+  darkMode: "Dark Mode",
+
   login: {
-    welcome: "Welcome to Qlockify",
+    welcome: (title: string = "Qlockifiy") => `Welcome to ${title}`,
     enterPassword: "Enter your password",
     verifyNumber: "Verify your number",
     enterMobileDesc: "Enter your mobile number to continue",
@@ -29,11 +38,13 @@ export const en = {
       invalidOtp: "Invalid OTP code"
     }
   },
-    loginTerms: {
+
+  loginTerms: {
     prefix: "By logging in, you agree to our ",
     link: "Terms of Service and Privacy Policy",
     suffix: ""
   },
+
   terms: {
     back: "Back",
     title: "Terms of Service and Privacy Policy",
@@ -71,6 +82,7 @@ export const en = {
       },
     },
   },
+
   profile: {
     title: "User Profile",
     firstName: "First Name",
@@ -95,13 +107,6 @@ export const en = {
       error: "Something went wrong!"
     }
   },
-  logout: "Logout",
-  logoutToast: "Successfully logged out!",
-  confirmLogoutTitle: "Confirm Logout",
-  confirmLogoutMessage: "Are you sure you want to log out of your account?",
-  cancel: "Cancel",
-  lightMode: "Light Mode",
-  darkMode: "Dark Mode",
 
   workspace: {
     title: "Workspace Management",
@@ -222,4 +227,11 @@ export const en = {
     page: "Page",
     next: "Next",
   },
+
+  sidebar: {
+    workspaces: 'Workspaces',
+    clients: 'Clients',
+    expand: 'Expand',
+    collapse: 'Collapse',
+  },
 }

src/locales/fa.ts

@@ -1,6 +1,15 @@
 export const fa = {
+  title: "Qlockify",
+  logout: "خروج",
+  logoutToast: "با موفقیت خارج شدید!",
+  confirmLogoutTitle: "تایید خروج",
+  confirmLogoutMessage: "آیا مطمئن هستید که می‌خواهید از حساب خود خارج شوید؟",
+  cancel: "لغو",
+  lightMode: "حالت روشن",
+  darkMode: "حالت تاریک",
+
   login: {
-    welcome: "به Qlockify خوش آمدید",
+    welcome: (title: string = "Qlockifiy") => `به ${title} خوش آمدید`,
     enterPassword: "رمز عبور خود را وارد کنید",
     verifyNumber: "تایید شماره موبایل",
     enterMobileDesc: "برای ادامه، شماره موبایل خود را وارد کنید",
@@ -29,11 +38,13 @@ export const fa = {
       invalidOtp: "کد تایید نامعتبر است"
     }
   },
+
   loginTerms: {
     prefix: "با ورود به سیستم، شما با ",
     link: "شرایط خدمات و حریم خصوصی",
     suffix: " ما موافقت می‌کنید."
   },
+
   terms: {
     back: "بازگشت",
     title: "شرایط خدمات و حریم خصوصی",
@@ -71,6 +82,7 @@ export const fa = {
       },
     },
   },
+
   profile: {
     title: "پروفایل کاربر",
     firstName: "نام",
@@ -96,13 +108,6 @@ export const fa = {
       error: "خطایی رخ داد!"
     }
   },
-  logout: "خروج",
-  logoutToast: "با موفقیت خارج شدید!",
-  confirmLogoutTitle: "تایید خروج",
-  confirmLogoutMessage: "آیا مطمئن هستید که می‌خواهید از حساب خود خارج شوید؟",
-  cancel: "لغو",
-  lightMode: "حالت روشن",
-  darkMode: "حالت تاریک",
 
   workspace: {
     title: "مدیریت ورک‌اسپیس‌ها",
@@ -156,7 +161,7 @@ export const fa = {
     orderByUpdatedDesc: "آخرین ویرایش",
     orderByCreatedDesc: "جدیدترین",
     orderByCreatedAsc: "قدیمی‌ترین",
-    orderByName: "نام (الف تا ی)",
+    orderByName: "نام (الفبایی)",
     deleteSuccess: "فضای کاری با موفقیت حذف شد",
     deleteTitle: "حذف فضای کاری",
     deleteWarning: "برای تأیید حذف، لطفاً نام فضای کاری را وارد کنید:",
@@ -223,4 +228,11 @@ export const fa = {
     page: "صفحه",
     next: "بعدی",
   },
+
+  sidebar: {
+    workspaces: 'ورک‌اسپیس‌ها',
+    clients: 'مشتریان',
+    expand: 'باز کردن',
+    collapse: 'جمع کردن',
+  },
 }

src/pages/Auth.tsx

@@ -89,7 +89,7 @@ export default function Auth() {
       <div className="relative hidden h-full flex-col bg-slate-900 dark:bg-slate-900/50 p-10 text-white lg:flex border-e border-slate-200 dark:border-slate-800">
         <div className="relative z-20 flex items-center text-lg font-medium gap-2">
           <Command className="h-6 w-6" />
-          Qlockify
+          {t.title || "Qlockify"}
         </div>
         <div className="relative z-20 mt-auto">
           <blockquote className="space-y-2">
@@ -106,7 +106,7 @@ export default function Auth() {
               <Command className="h-8 w-8" />
             </div>
             <h1 className="text-2xl font-semibold tracking-tight">
-              {step === "mobile" && t.login.welcome}
+              {step === "mobile" && t.login.welcome(t.title)}
               {step === "password" && t.login.enterPassword}
               {step === "otp" && t.login.verifyNumber}
             </h1>