arie.bagus.2905/Web-Antrean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change on login sidebar and dashboard

Browse Source
This commit is contained in:
Fanrouver
2025-11-05 13:00:06 +07:00
parent dbb8050dc5
commit 89688e02f3
4 changed files with 171 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
components/SideBar1.vue
View File

@@ -4,7 +4,8 @@
:rail="rail"
permanent
app
class="bg-white d-flex flex-column" @update:model-value="emit('update:drawer', $event)"
class="bg-white"
@update:model-value="emit('update:drawer', $event)"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
@@ -22,7 +23,8 @@
</v-list-item>
<v-divider></v-divider>
<v-list density="compact" nav class="mt-2" v-model:opened="openedGroups"> <template v-for="item in items" :key="item.name">
<v-list density="compact" nav class="mt-2" v-model:opened="openedGroups">
<template v-for="item in items" :key="item.name">
<v-list-group
v-if="item.children"
@@ -38,74 +40,53 @@
active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
></v-list-item>
</template>
=======
<v-list
density="compact"
nav
class="mt-2 flex-grow-1" v-model:opened="openedGroups"
>
<template v-for="item in items" :key="item.name">
<v-list-group
v-if="item.children"
:value="item.name"
:disabled="rail"
>
<template v-slot:activator="{ props: groupProps }">
<v-list-item
v-bind="groupProps"
:prepend-icon="item.icon"
:title="item.name"
color="orange-darken-2"
active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
></v-list-item>
</template>
>>>>>>> d7f3240a8226d36d66c5dc319c7a665539d5d8e3
<v-list-item
v-for="child in item.children"
:key="child.name"
:to="child.path"
:title="child.name"
:prepend-icon="child.icon"
link
class="pl-8"
color="orange-darken-2"
active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
></v-list-item>
</v-list-group>
<v-list-item
v-for="child in item.children"
:key="child.name"
:to="child.path"
:title="child.name"
:prepend-icon="child.icon"
link
class="pl-8"
color="orange-darken-2"
active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
></v-list-item>
</v-list-group>
<v-tooltip
v-else
:disabled="!rail"
open-on-hover
location="end"
:text="item.name"
>
<template #activator="{ props: tooltipProps }">
<v-list-item
v-bind="tooltipProps"
:prepend-icon="item.icon"
:title="item.name"
:to="item.path"
link
color="orange-darken-2"
active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
></v-list-item>
</template>
</v-tooltip>
</template>
<v-tooltip
v-else
:disabled="!rail"
open-on-hover
location="end"
:text="item.name"
>
<template #activator="{ props: tooltipProps }">
<v-list-item
v-bind="tooltipProps"
:prepend-icon="item.icon"
:title="item.name"
:to="item.path"
link
color="orange-darken-2"
active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
></v-list-item>
</template>
</v-tooltip>
</template>
</v-list>
<v-spacer></v-spacer>
<v-divider></v-divider>
<v-list v-if="user" nav density="compact" class="pa-2 flex-shrink-0">
<v-list v-if="user" nav density="compact" class="pa-2">
<ProfilePopup
:user="user"
@logout="handleLogout"
:rail="rail"
/>
</v-list>
<v-list v-else nav density="compact" class="flex-shrink-0">
<v-list v-else nav density="compact">
<v-list-item
@click="redirectToLogin"
prepend-icon="mdi-login"
@@ -117,11 +98,12 @@
</v-navigation-drawer>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, onMounted, ref, watch } from 'vue'; // IMPORT WATCH
import { navigateTo } from '#app';
import { defineProps, defineEmits, onMounted, ref, watch } from 'vue';
import { navigateTo, useRoute } from '#app';
import ProfilePopup from './ProfilePopup.vue';
import { useAuth } from '~/composables/useAuth';
import { useAuth } from '~/composables/useAuth'; // Ensure this path is correct
const { user, logout, checkAuth } = useAuth();
const route = useRoute(); // Access the current route
@@ -151,23 +133,40 @@ const props = defineProps({
const emit = defineEmits(['update:drawer', 'toggle-rail']);
// --- NEW STATE FOR DROPDOWN GROUPS ---
// This holds the names of the currently open list groups.
const openedGroups = ref<string[]>([]);
const isHovering = ref(false);
// --- NEW WATCHER TO CLOSE DROPDOWNS ---
// --- WATCHERS FOR DROPDOWN AND HIGHLIGHTING ---
// 1. WATCHER: Close dropdowns when sidebar collapses (rail = true)
watch(() => props.rail, (newRailState) => {
if (newRailState === true) {
// If the sidebar is collapsing (rail is true), close all groups
openedGroups.value = [];
}
});
// ------------------------------------
// 2. WATCHER: Open the parent group when a child route is active
watch(() => route.path, (newPath) => {
// Find the parent item whose children contain the current path
const activeParent = props.items.find(item =>
item.children && item.children.some(child =>
child.path === newPath
)
);
if (activeParent) {
// If a parent is active, ensure it's in the openedGroups array
if (!openedGroups.value.includes(activeParent.name)) {
openedGroups.value.push(activeParent.name);
}
// Optional: Keep only the active parent open, closing others
// openedGroups.value = [activeParent.name];
}
}, { immediate: true });
// Local state for hover-to-expand rail feature
const isHovering = ref(false);
// --- HOVER LOGIC for Rail Expansion ---
const handleMouseEnter = () => {
if (props.rail) {