fix: collapse sidebar by default on small screens

docs/TASKS/app-shell/001-responsive-sidebar-default.md

@@ -0,0 +1,17 @@
+# Responsive Sidebar Default
+
+## Goal
+
+Collapse the authenticated app sidebar by default on smaller devices while preserving the existing desktop expanded default and manual toggle behavior.
+
+## Relevant Files
+
+- `frontend/src/App.vue`
+- `frontend/src/layouts/main/AppSidebar.vue`
+
+## Validation
+
+```bash
+cd frontend
+npm run build
+```

frontend/src/App.vue

@@ -34,6 +34,7 @@
 <script async setup>
     import { computed, ref, watch } from 'vue';
     import { useRoute } from 'vue-router';
+    import { useDisplay } from 'vuetify';
     import { useAuthStore } from '@/features/auth/stores/authStore.js';
     import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
     import AppBar from '@/layouts/main/AppBar.vue';
@@ -42,7 +43,9 @@
 
     const route = useRoute();
     const authStore = useAuthStore();
-    const isSidebarExpanded = ref(true);
+    const { smAndDown } = useDisplay();
+    const defaultSidebarExpanded = computed(() => !smAndDown.value);
+    const isSidebarExpanded = ref(defaultSidebarExpanded.value);
 
     const showsAppSidebar = computed(() =>
         authStore.isAuthenticated && route.path.startsWith('/app')
@@ -54,7 +57,7 @@
             return;
         }
 
-        isSidebarExpanded.value = true;
+        isSidebarExpanded.value = defaultSidebarExpanded.value;
     }, { immediate: true });
 </script>