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")