102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Menu Overlay -->
|
|
<div
|
|
class="slide-menu-overlay"
|
|
:class="{ open: isOpen }"
|
|
@click="$emit('close')"
|
|
></div>
|
|
|
|
<!-- Slide Menu -->
|
|
<nav class="slide-menu" :class="{ open: isOpen }">
|
|
<!-- Dynamic Menu Sections -->
|
|
<div
|
|
v-for="section in menuItems"
|
|
:key="section.title"
|
|
class="menu-section"
|
|
>
|
|
<h3 class="menu-title">{{ section.title }}</h3>
|
|
<ul class="menu-list">
|
|
<li
|
|
v-for="item in section.items"
|
|
:key="item.to"
|
|
class="menu-item"
|
|
>
|
|
<router-link
|
|
:to="item.to"
|
|
class="menu-link"
|
|
:class="{ active: isRouteActive(item.to) }"
|
|
@click="$emit('close')"
|
|
>
|
|
<i :class="['menu-icon', item.icon]"></i>
|
|
<span>{{ item.label }}</span>
|
|
<span v-if="item.badge" class="menu-badge">{{ item.badge }}</span>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Profile Section (at bottom) -->
|
|
<div class="menu-section menu-profile">
|
|
<div class="profile-info">
|
|
<i class="pi pi-user"></i>
|
|
<span>{{ currentUser?.username || 'Utilizator' }}</span>
|
|
</div>
|
|
<ul class="menu-list">
|
|
<slot name="profile-items"></slot>
|
|
<li class="menu-item">
|
|
<a href="#" class="menu-link" @click.prevent="handleLogout">
|
|
<i class="menu-icon pi pi-sign-out"></i>
|
|
<span>Deconectare</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useRoute } from "vue-router";
|
|
|
|
export default {
|
|
name: "SlideMenu",
|
|
props: {
|
|
// Is menu open?
|
|
isOpen: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// Menu items configuration
|
|
// Format: [{ title: 'Section', items: [{ to: '/path', icon: 'pi pi-icon', label: 'Label', badge: null }] }]
|
|
menuItems: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
// Current user object
|
|
currentUser: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
},
|
|
emits: ["close", "logout"],
|
|
setup(props, { emit }) {
|
|
const route = useRoute();
|
|
|
|
const isRouteActive = (path) => {
|
|
return route.path === path;
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
emit("logout");
|
|
emit("close");
|
|
};
|
|
|
|
return {
|
|
isRouteActive,
|
|
handleLogout,
|
|
};
|
|
},
|
|
};
|
|
</script>
|