From 9a49adf89aaccfd2054ed3d10e0e631769213710 Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Mon, 9 Feb 2026 19:44:39 -0500
Subject: [PATCH] Fix navigation drawer: rail expand, icon centering, and
 tooltips

- Make the entire header clickable to toggle rail mode so users
  can expand the drawer after collapsing it
- Center the cat icon in rail mode via scoped CSS
- Add tooltips on all nav items and logout when in rail mode

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/AppLayout.vue | 27 +++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index e2239a4..56047ff 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -5,13 +5,11 @@
       title="Purrse"
       subtitle="Personal Finance"
       nav
+      @click="rail = !rail"
+      class="drawer-header"
     >
       <template v-slot:append>
-        <v-btn
-          :icon="rail ? 'mdi-chevron-right' : 'mdi-chevron-left'"
-          variant="text"
-          @click="rail = !rail"
-        />
+        <v-icon>mdi-chevron-left</v-icon>
       </template>
     </v-list-item>
 
@@ -26,7 +24,9 @@
         :to="item.route"
         :value="item.route"
         rounded="xl"
-      />
+      >
+        <v-tooltip v-if="rail" activator="parent" location="end">{{ item.title }}</v-tooltip>
+      </v-list-item>
     </v-list>
 
     <template v-slot:append>
@@ -37,7 +37,9 @@
           title="Logout"
           @click="handleLogout"
           rounded="xl"
-        />
+        >
+          <v-tooltip v-if="rail" activator="parent" location="end">Logout</v-tooltip>
+        </v-list-item>
       </v-list>
     </template>
   </v-navigation-drawer>
@@ -179,3 +181,14 @@ function handleLogout() {
   router.push('/login')
 }
 </script>
+
+<style scoped>
+.drawer-header {
+  cursor: pointer;
+}
+
+.v-navigation-drawer--rail .drawer-header :deep(.v-list-item__prepend) {
+  margin-inline-end: 0;
+  justify-content: center;
+}
+</style>