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