feat: finalisation de la Sidebar.vue
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
d9e935f7de
commit
53365df456
@@ -1,155 +1,131 @@
|
||||
<template>
|
||||
<aside
|
||||
:class="[
|
||||
'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
|
||||
isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
||||
]"
|
||||
>
|
||||
<nav class="h-full overflow-y-auto py-4">
|
||||
<div v-for="(item, index) in menuItems" :key="index" class="mb-2">
|
||||
<!-- Menu item with submenu -->
|
||||
<template v-if="item.id">
|
||||
<button
|
||||
@click="toggleMenu(item.id)"
|
||||
class="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
<component
|
||||
:is="expandedMenus[item.id] ? ChevronUpIcon : ChevronDownIcon"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div v-show="expandedMenus[item.id]">
|
||||
<template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
|
||||
<router-link
|
||||
v-if="subItem.to"
|
||||
:to="subItem.to"
|
||||
class="block px-4 py-2 pl-12 hover:bg-gray-100"
|
||||
>
|
||||
{{ subItem.text }}
|
||||
</router-link>
|
||||
<button
|
||||
v-else
|
||||
@click="subItem.onClick"
|
||||
class="w-full text-left px-4 py-2 pl-12 hover:bg-gray-100"
|
||||
>
|
||||
{{ subItem.text }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Simple menu item -->
|
||||
<router-link
|
||||
v-else
|
||||
:to="item.to"
|
||||
class="block px-4 py-2 hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="item.badge"
|
||||
class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"
|
||||
>
|
||||
{{ item.badge }}
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<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 { ref } from 'vue';
|
||||
import {
|
||||
BookOpenIcon,
|
||||
PlusIcon,
|
||||
ArrowDownTrayIcon,
|
||||
GlobeAltIcon,
|
||||
ArrowsRightLeftIcon,
|
||||
CalendarIcon,
|
||||
ClockIcon,
|
||||
Cog6ToothIcon,
|
||||
ComputerDesktopIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon
|
||||
} from '@heroicons/vue/24/outline';
|
||||
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 props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'add-manga-click']);
|
||||
const isActiveRoute = path => {
|
||||
return route.path === path;
|
||||
};
|
||||
|
||||
const expandedMenus = ref({
|
||||
mangas: true,
|
||||
settings: false,
|
||||
system: false
|
||||
});
|
||||
const isActive = item => {
|
||||
if (!item.to) {
|
||||
return item.subItems?.some(subItem => route.path === subItem.to) || false;
|
||||
}
|
||||
|
||||
const toggleMenu = (menuId) => {
|
||||
expandedMenus.value[menuId] = !expandedMenus.value[menuId];
|
||||
};
|
||||
if (item.to === '/') {
|
||||
return route.path === '/' || ['/add', '/import', '/discover'].includes(route.path);
|
||||
}
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: BookOpenIcon,
|
||||
text: 'Mangas',
|
||||
id: 'mangas',
|
||||
subItems: [
|
||||
{ icon: PlusIcon, text: 'Ajouter un nouveau', onClick: () => emit('add-manga-click') },
|
||||
{ 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',
|
||||
id: 'settings',
|
||||
subItems: [
|
||||
{ text: 'Général', to: '/settings/general' },
|
||||
{ text: 'Dossiers', to: '/settings/folders' },
|
||||
{ text: 'Scrappers', to: '/settings/scrappers' },
|
||||
{ text: 'UI', to: '/settings/ui' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: ComputerDesktopIcon,
|
||||
text: 'Système',
|
||||
id: 'system',
|
||||
subItems: [
|
||||
{ text: 'Status', to: '/system/status' },
|
||||
{ text: 'Backup', to: '/system/backup' },
|
||||
{ text: 'Logs', to: '/system/logs' },
|
||||
{ text: 'Updates', to: '/system/updates' }
|
||||
]
|
||||
},
|
||||
];
|
||||
</script>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user