tethys.backend/resources/js/Components/AsideMenuLayer.vue

<script lang="ts" setup>
import { router } from '@inertiajs/vue3';
// import { Inertia } from '@inertiajs/inertia';
import { stardust } from '@eidellev/adonis-stardust/client';
import { mdiLogout, mdiClose } from '@mdi/js';
import { computed } from 'vue';
import { LayoutService } from '@/Stores/layout';
import { StyleService } from '@/Stores/style.service';
import AsideMenuList from '@/Components/AsideMenuList.vue';
import AsideMenuItem from '@/Components/AsideMenuItem.vue';
import BaseIcon from '@/Components/BaseIcon.vue';

defineProps({
    menu: {
        type: Array<Object>,
        default: () => [],
    },
});

const emit = defineEmits(['menu-click']);

const layoutStore = LayoutService();

const styleStore = StyleService();

const logoutItem = computed(() => ({
    name: 'Logout',
    label: 'Logout',
    icon: mdiLogout,
    color: 'info',
    link: '#',
}));

const logoutItemClick = async () => {
    // router.post(route('logout'));
    await router.post(stardust.route('logout'));
};

interface MenuItem {
    name: string;
    label: string;
    icon: string;
    color: string;
    link: string;
}

const menuClick = (event: Event, item: MenuItem) => {
    emit('menu-click', event, item);
};
</script>

<template>
    <aside
        id="aside"
        class="lg:pb-2 lg:pl-2 w-60 fixed flex z-40 top-0 lg:top-16 h-screen lg:h-[calc(100vh-64px)] transition-position overflow-hidden"
    >
        <div :class="styleStore.asideStyle" class="lg:rounded-xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900">
            <div :class="styleStore.asideBrandStyle" class="flex flex-row h-14 items-center justify-between dark:bg-slate-900">
                <div class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
                    <b class="font-black">Menu</b>
                </div>
                <button class="hidden lg:inline-block xl:hidden p-3" @click.prevent="layoutStore.isAsideLgActive = false">
                    <BaseIcon :path="mdiClose" />
                </button>
            </div>
            <div
                :class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
                class="flex-1 overflow-y-auto overflow-x-hidden"
            >
                <AsideMenuList :menu-items="menu" @menu-click="menuClick" />
            </div>
            <!-- <p class="menu-label">About</p>> -->
            <ul class="menu-list">
                <AsideMenuItem :item="logoutItem" @menu-click="logoutItemClick" />
            </ul>
        </div>
    </aside>
</template>