Private
Public Access
1
0

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>
This commit is contained in:
Catherine Renelle
2026-02-09 19:44:39 -05:00
parent 5811588698
commit 9a49adf89a
+20 -7
View File
@@ -5,13 +5,11 @@
title="Purrse" title="Purrse"
subtitle="Personal Finance" subtitle="Personal Finance"
nav nav
@click="rail = !rail"
class="drawer-header"
> >
<template v-slot:append> <template v-slot:append>
<v-btn <v-icon>mdi-chevron-left</v-icon>
:icon="rail ? 'mdi-chevron-right' : 'mdi-chevron-left'"
variant="text"
@click="rail = !rail"
/>
</template> </template>
</v-list-item> </v-list-item>
@@ -26,7 +24,9 @@
:to="item.route" :to="item.route"
:value="item.route" :value="item.route"
rounded="xl" rounded="xl"
/> >
<v-tooltip v-if="rail" activator="parent" location="end">{{ item.title }}</v-tooltip>
</v-list-item>
</v-list> </v-list>
<template v-slot:append> <template v-slot:append>
@@ -37,7 +37,9 @@
title="Logout" title="Logout"
@click="handleLogout" @click="handleLogout"
rounded="xl" rounded="xl"
/> >
<v-tooltip v-if="rail" activator="parent" location="end">Logout</v-tooltip>
</v-list-item>
</v-list> </v-list>
</template> </template>
</v-navigation-drawer> </v-navigation-drawer>
@@ -179,3 +181,14 @@ function handleLogout() {
router.push('/login') router.push('/login')
} }
</script> </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>