roa2web-service-auto/src/modules/reports/components/layout/HamburgerMenu.vue

<template>
  <div>
    <!-- Menu Overlay -->
    <div
      class="slide-menu-overlay"
      :class="{ open: isOpen }"
      @click="closeMenu"
    ></div>

    <!-- Slide Menu -->
    <nav class="slide-menu" :class="{ open: isOpen }">
      <!-- Navigation Section -->
      <div class="menu-section">
        <h3 class="menu-title">Navigare</h3>
        <ul class="menu-list">
          <li class="menu-item">
            <router-link
              to="/dashboard"
              class="menu-link"
              :class="{ active: $route.name === 'Dashboard' }"
              @click="closeMenu"
            >
              <i class="menu-icon pi pi-home"></i>
              <span>Dashboard</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link
              to="/invoices"
              class="menu-link"
              :class="{ active: $route.name === 'Invoices' }"
              @click="closeMenu"
            >
              <i class="menu-icon pi pi-file"></i>
              <span>Facturi</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link
              to="/bank-cash-register"
              class="menu-link"
              :class="{ active: $route.name === 'BankCashRegister' }"
              @click="closeMenu"
            >
              <i class="menu-icon pi pi-money-bill"></i>
              <span>Casa și Banca</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link
              to="/trial-balance"
              class="menu-link"
              :class="{ active: $route.name === 'TrialBalance' }"
              @click="closeMenu"
            >
              <i class="menu-icon pi pi-calculator"></i>
              <span>Balanță de Verificare</span>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- System Section -->
      <div class="menu-section">
        <h3 class="menu-title">Sistem</h3>
        <ul class="menu-list">
          <li class="menu-item">
            <router-link
              to="/cache-stats"
              class="menu-link"
              :class="{ active: $route.name === 'CacheStats' }"
              @click="closeMenu"
            >
              <i class="menu-icon pi pi-chart-bar"></i>
              <span>Statistici cache</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">
          <li class="menu-item">
            <router-link
              to="/telegram"
              class="menu-link"
              :class="{ active: $route.name === 'Telegram' }"
              @click="closeMenu"
            >
              <i class="menu-icon pi pi-telegram"></i>
              <span>Telegram Bot</span>
            </router-link>
          </li>
          <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 { computed } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "../../stores/auth";

export default {
  name: "HamburgerMenu",
  props: {
    isOpen: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["close"],
  setup(props, { emit }) {
    const router = useRouter();
    const authStore = useAuthStore();

    const currentUser = computed(() => authStore.currentUser);

    const closeMenu = () => {
      emit("close");
    };

    const handleLogout = async () => {
      try {
        authStore.logout();
        closeMenu();
        await router.push("/login");
      } catch (error) {
        console.error("Logout error:", error);
      }
    };

    return {
      currentUser,
      closeMenu,
      handleLogout,
    };
  },
};
</script>