From 552f4f1f214a9d2fd279b3eed1ab33be0ed98a20 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Mon, 4 May 2026 16:40:43 -0400
Subject: [PATCH] fix: collapse sidebar by default on small screens

---
 .../app-shell/001-responsive-sidebar-default.md | 17 +++++++++++++++++
 frontend/src/App.vue                            |  7 +++++--
 2 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 docs/TASKS/app-shell/001-responsive-sidebar-default.md

diff --git a/docs/TASKS/app-shell/001-responsive-sidebar-default.md b/docs/TASKS/app-shell/001-responsive-sidebar-default.md
new file mode 100644
index 0000000..1f97da6
--- /dev/null
+++ b/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
+```
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8db31c2..cfdd3f4 100644
--- a/frontend/src/App.vue
+++ b/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>