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

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>
+  );
+};