feat: add theme mode support with AppThemeMode enum and AppThemeState service

- Introduced AppThemeMode enum to define theme options: System, Light, Dark.
- Updated AppSettingsDocument to include ThemeMode property.
- Created AppThemeState service to manage current theme mode and handle changes.
- Integrated theme mode handling in CouchbaseLiteAppSettingsService for persistence.
- Added JavaScript for theme management in the frontend, supporting system preference detection.
- Enhanced CSS with theme variables for consistent styling across light and dark modes.
- Updated Playwright tests to ensure sidebar functionality and responsiveness.

Components/Layout/NavMenu.razor.css

@@ -1,10 +1,19 @@
 .top-row {
     min-height: 3.5rem;
     background-color: rgba(0,0,0,0.4);
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+}
+
+.nav-menu-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
 .navbar-brand {
     font-size: 1.1rem;
+    margin-bottom: 0;
 }
 
 .sidebar-brand-compact {
@@ -15,6 +24,32 @@
     height: 100%;
 }
 
+.sidebar-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.2rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 0.65rem;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    flex: 0 0 auto;
+}
+
+.sidebar-toggle:hover {
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.sidebar-toggle-bar {
+    width: 1rem;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+}
+
 .bi {
     display: inline-block;
     position: relative;
@@ -122,19 +157,22 @@
         display: none;
     }
 
+    .nav-menu-shell-collapsed .nav-scrollable {
+        display: none;
+    }
+
+    .nav-menu-shell:not(.nav-menu-shell-collapsed) .nav-scrollable {
+        display: block;
+    }
+
     .nav-scrollable {
         height: auto;
     }
 }
 
 @media (min-width: 641px) {
-    .nav-menu-shell-collapsed .top-row {
-        padding-left: 0.5rem !important;
-        padding-right: 0.5rem !important;
-    }
-
     .nav-menu-shell-collapsed .container-fluid {
-        justify-content: center;
+        justify-content: flex-start;
     }
 
     .nav-menu-shell-collapsed .sidebar-brand-full,