glpi-vue/src/components/NavMenu.vue at 7a17d56e60725e8307b44b79c8b37b5dd3cc2290 · cconard96/glpi-vue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script setup lang="ts">
    import {PanelMenu, Menubar} from 'primevue';
    import {RouterLink, useRoute} from "vue-router";
    import { useMainMenu } from '@/composables/useMainMenu.ts';
    import {ref, watch} from "vue";
    const { menu } = useMainMenu();
    const items = ref(menu);

    defineProps<{
        mobile: boolean
    }>();

    // Expanded keys for the PanelMenu based on the current route
    const expanded_keys = ref({});
    const route = useRoute();
    const updateExpandedKeys = () => {
        const pathSegments = route.path.split('/').filter(segment => segment);
        if (pathSegments.length > 0) {
            expanded_keys.value = { [pathSegments[0]]: true };
        } else {
            expanded_keys.value = {};
        }
    };
    updateExpandedKeys();
    watch(() => route.path, () => {
        updateExpandedKeys();
    });
</script>

<template>
    <nav class="light:bg-[#2f3f64] dark:bg-inherit" :class="!mobile ? 'h-screen' : ''" aria-label="Main Navigation">
        <RouterLink v-show="!mobile" to="/" class="flex items-center justify-center h-16 text-white text-5xl font-bold mt-2 italic">
            GLPI
        </RouterLink>
        <div style="height: calc(100% - var(--spacing) * 16)">
            <PanelMenu v-if="!mobile" :model="items" v-model:expanded-keys="expanded_keys" class="h-full w-full overflow-y-auto"
                       :pt="{
                            panel: { class: 'bg-inherit border-0' },
                            headerContent: { class: 'light:text-surface-100 hover:bg-[#212c46]' },
                            itemContent: { class: 'light:text-surface-100 hover:bg-[#212c46]' }
                       }">
                <template #item="{ item }" :key="item.key ?? item.label.toLowerCase()">
                    <RouterLink v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom class="w-full">
                        <a class="flex items-center cursor-pointer px-4 py-2" :href="href" @click="navigate">
                            <span :class="item.icon" />
                            <span class="ml-2">{{ item.label }}</span>
                        </a>
                    </RouterLink>
                    <a v-else class="flex items-center cursor-pointer px-4 py-2" :href="item.url" :target="item.target">
                        <span :class="item.icon" />
                        <span class="ml-2">{{ item.label }}</span>
                        <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
                    </a>
                </template>
            </PanelMenu>
            <Menubar v-else :model="items" class="static" :pt="{
                rootlist: {
                    'class': 'w-auto max-w-screen top-[55px] left-[14px]'
                },
                root: { class: 'p-2' },
            }"></Menubar>
        </div>
    </nav>
</template>

<style scoped>

</style>