feat(ui): add collapsible sidebar for mobile devices

- Add hamburger menu toggle button in top bar (visible on mobile only)
- Sidebar slides in/out from the left with smooth transition
- Add dark overlay when sidebar is open on mobile
- Close sidebar on overlay click, nav item click, or escape key
- Support RTL languages (sidebar slides from right)
- Add dark theme styles for toggle button
- Responsive breakpoint at 768px

static/css/layout/sidebar.css

@@ -8,6 +8,51 @@
 	height: 100%;
 	flex-shrink: 0;
 	box-shadow: 2px 0 12px rgba(0,0,0,0.15);
+	transition: transform 0.3s ease;
+}
+
+/* Sidebar overlay for mobile */
+.sidebar-overlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 998;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+
+.sidebar-overlay.active {
+	display: block;
+	opacity: 1;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+	.sidebar {
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 999;
+		transform: translateX(-100%);
+	}
+
+	.sidebar.open {
+		transform: translateX(0);
+	}
+
+	[dir='rtl'] .sidebar {
+		left: auto;
+		right: 0;
+		transform: translateX(100%);
+	}
+
+	[dir='rtl'] .sidebar.open {
+		transform: translateX(0);
+	}
 }
 
 .logo-container {

static/css/layout/topbar.css

@@ -20,6 +20,42 @@
 	flex-shrink: 0;
 }
 
+/* Sidebar toggle button (hidden on desktop) */
+.sidebar-toggle {
+	display: none;
+	background: none;
+	border: none;
+	padding: 10px;
+	cursor: pointer;
+	color: #4a5568;
+	border-radius: 8px;
+	transition: background-color 0.2s, color 0.2s;
+	margin-right: 12px;
+	flex-shrink: 0;
+}
+
+.sidebar-toggle:hover {
+	background-color: #f7fafc;
+	color: #ff5e3a;
+}
+
+.sidebar-toggle i {
+	font-size: 20px;
+}
+
+/* Mobile responsive styles for top bar */
+@media (max-width: 768px) {
+	.top-bar {
+		padding: 0 16px;
+	}
+
+	.sidebar-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
 .search-container {
 	flex-grow: 1;
 	max-width: 600px;

static/css/themes/dark.css

@@ -201,3 +201,13 @@
 [data-theme="dark"] .search-sort-select:focus {
     border-color: #ff5e3a;
 }
+
+/* Dark theme for mobile sidebar toggle */
+[data-theme="dark"] .sidebar-toggle {
+    color: #94a3b8;
+}
+
+[data-theme="dark"] .sidebar-toggle:hover {
+    background-color: #334155;
+    color: #ff5e3a;
+}