67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
|
<script 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.js';
|
||
|
|
import { StyleService } from '@/Stores/style.js';
|
||
|
|
import AsideMenuList from '@/Components/AsideMenuList.vue';
|
||
|
|
import AsideMenuItem from '@/Components/AsideMenuItem.vue';
|
||
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
menu: {
|
||
|
|
type: 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'));
|
||
|
|
};
|
||
|
|
|
||
|
|
const menuClick = (event, item) => {
|
||
|
|
emit('menu-click', event, item);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<aside id="aside" class="lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen 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 v-bind:menu="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>
|