132 lines
4.0 KiB
Vue
132 lines
4.0 KiB
Vue
<template>
|
|
<aside
|
|
:class="[
|
|
'fixed top-16 left-0 w-60 bg-gray-600 text-white transform transition-transform duration-300 ease-in-out z-40 h-full',
|
|
isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
|
]"
|
|
role="navigation"
|
|
aria-label="Menu principal">
|
|
<nav class="h-full overflow-y-auto">
|
|
<ul class="h-full flex flex-col">
|
|
<li v-for="(item, index) in menuItems" :key="index" class="mb-2">
|
|
<template v-if="item.id">
|
|
<MenuGroup
|
|
:id="item.id"
|
|
:icon="item.icon"
|
|
:text="item.text"
|
|
:sub-items="item.subItems"
|
|
:is-active="isActive(item)"
|
|
:to="item.to" />
|
|
</template>
|
|
<MenuItem
|
|
v-else
|
|
:icon="item.icon"
|
|
:text="item.text"
|
|
:to="item.to"
|
|
:is-active="isActiveRoute(item.to)"
|
|
:badge="item.badge" />
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute } from 'vue-router';
|
|
import {
|
|
BookOpenIcon,
|
|
PlusIcon,
|
|
ArrowDownTrayIcon,
|
|
GlobeAltIcon,
|
|
ArrowsRightLeftIcon,
|
|
CalendarIcon,
|
|
ClockIcon,
|
|
Cog6ToothIcon,
|
|
ComputerDesktopIcon
|
|
} from '@heroicons/vue/24/outline';
|
|
import MenuItem from './sidebar/MenuItem.vue';
|
|
import MenuGroup from './sidebar/MenuGroup.vue';
|
|
|
|
const route = useRoute();
|
|
const props = defineProps({
|
|
isOpen: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const isActiveRoute = path => {
|
|
return route.path === path;
|
|
};
|
|
|
|
const isActive = item => {
|
|
if (!item.to) {
|
|
return item.subItems?.some(subItem => route.path === subItem.to) || false;
|
|
}
|
|
|
|
if (item.to === '/') {
|
|
return route.path === '/' || ['/add', '/import', '/discover'].includes(route.path);
|
|
}
|
|
|
|
return route.path.startsWith(item.to);
|
|
};
|
|
|
|
const menuItems = [
|
|
{
|
|
icon: BookOpenIcon,
|
|
text: 'Mangas',
|
|
to: '/',
|
|
id: 'mangas',
|
|
subItems: [
|
|
{ icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
|
|
{
|
|
icon: ArrowDownTrayIcon,
|
|
text: 'Import bibliothèque',
|
|
to: '/import'
|
|
},
|
|
{ icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
|
|
]
|
|
},
|
|
{
|
|
icon: ArrowsRightLeftIcon,
|
|
text: 'Convertir CBR en CBZ',
|
|
to: '/convert'
|
|
},
|
|
{
|
|
icon: CalendarIcon,
|
|
text: 'Calendrier',
|
|
to: '/calendar'
|
|
},
|
|
{
|
|
icon: ClockIcon,
|
|
text: 'Activité',
|
|
to: '/activity',
|
|
badge: '3'
|
|
},
|
|
{
|
|
icon: Cog6ToothIcon,
|
|
text: 'Paramètres',
|
|
to: '/settings',
|
|
id: 'settings',
|
|
subItems: [
|
|
{ icon: null, text: 'Général', to: '/settings/general' },
|
|
{ icon: null, text: 'Dossiers', to: '/settings/folders' },
|
|
{ icon: null, text: 'Scrappers', to: '/settings/scrappers' },
|
|
{ icon: null, text: 'UI', to: '/settings/ui' }
|
|
]
|
|
},
|
|
{
|
|
icon: ComputerDesktopIcon,
|
|
text: 'Système',
|
|
to: '/system',
|
|
id: 'system',
|
|
subItems: [
|
|
{ icon: null, text: 'Status', to: '/system/status' },
|
|
{ icon: null, text: 'Backup', to: '/system/backup' },
|
|
{ icon: null, text: 'Logs', to: '/system/logs' },
|
|
{ icon: null, text: 'Updates', to: '/system/updates' }
|
|
]
|
|
}
|
|
];
|
|
</script>
|