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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user