web-antrean/components/layout/SideBar.vue

<template>
  <v-navigation-drawer
    :model-value="drawer"
    :rail="rail"
    permanent
    app
    class="bg-white d-flex flex-column"
    @update:model-value="emit('update:drawer', $event)"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <v-list-item class="py-4 px-2" :class="{ 'text-center': rail }">
      <div class="d-flex align-center" :class="{ 'justify-center': rail }">
        <img
          src="/Antrean Logo.png"
          alt="Antrean Logo"
          style="width: 72px; height: 72px; object-fit: contain"
        />
        <v-list-item-title
          v-if="!rail"
          class="ml-2 text-h6 font-weight-bold text-blue-grey-darken-4"
        >
          <span class="text-orange-darken-2">Antrean</span> RSSA
        </v-list-item-title>
      </div>
    </v-list-item>
    <v-divider></v-divider>

    <v-list
      density="compact"
      nav
      class="mt-2 flex-grow-1"
      v-model:opened="openedGroups"
    >
      <template v-for="item in items" :key="item.name">
        <v-list-group v-if="item.children" :value="item.name" :disabled="rail">
          <template v-slot:activator="{ props: groupProps }">
            <v-list-item
              v-bind="groupProps"
              :prepend-icon="item.icon"
              :title="item.name"
              color="orange-darken-2"
              active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
            ></v-list-item>
          </template>

          <v-list-item
            v-for="child in item.children"
            :key="child.name"
            :to="child.path"
            :title="child.name"
            :prepend-icon="child.icon"
            link
            class="pl-8"
            color="orange-darken-2"
            active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
          ></v-list-item>
        </v-list-group>

        <v-tooltip
          v-else
          :disabled="!rail"
          open-on-hover
          location="end"
          :text="item.name"
        >
          <template #activator="{ props: tooltipProps }">
            <v-list-item
              v-bind="tooltipProps"
              :prepend-icon="item.icon"
              :title="item.name"
              :to="item.path"
              link
              color="orange-darken-2"
              active-class="bg-orange-lighten-5 text-orange-darken-2 font-weight-bold"
            ></v-list-item>
          </template>
        </v-tooltip>
      </template>
    </v-list>

    <v-divider></v-divider>

    <v-list v-if="user" nav density="compact" class="pa-2 flex-shrink-0">
      <ProfilePopup :user="user" @logout="handleLogout" :rail="rail" />
    </v-list>
    <v-list v-else nav density="compact" class="flex-shrink-0">
      <v-list-item
        @click="redirectToLogin"
        prepend-icon="mdi-login"
        title="Login"
        link
        color="blue-grey-darken-4"
      ></v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, onMounted, ref, watch } from "vue";
import { navigateTo } from "#app";
import ProfilePopup from "./ProfilePopup.vue";
import { useAuth } from "~/composables/useAuth";

const { user, logout, checkAuth } = useAuth();

interface NavItem {
  id: number;
  name: string;
  path: string;
  icon: string;
  children?: NavItem[];
}

const props = defineProps({
  items: {
    type: Array as () => NavItem[],
    required: true,
  },
  rail: {
    type: Boolean,
    required: true,
  },
  drawer: {
    type: Boolean,
    required: true,
  },
});

const emit = defineEmits(["update:drawer", "toggle-rail"]);

const openedGroups = ref<string[]>([]);

watch(
  () => props.rail,
  (newRailState) => {
    if (newRailState === true) {
      openedGroups.value = [];
    }
  }
);

const isHovering = ref(false);

const handleMouseEnter = () => {
  if (props.rail) {
    isHovering.value = true;
    emit("toggle-rail");
  }
};

const handleMouseLeave = () => {
  if (isHovering.value) {
    isHovering.value = false;
    emit("toggle-rail");
  }
};

// --- AUTH LOGIC (Kept the same) ---

const handleLogout = async () => {
  console.log("🚪 SideBar logout initiated...");
  try {
    await logout();
  } catch (error) {
    console.error("❌ SideBar logout error:", error);
  }
};

const redirectToLogin = () => {
  navigateTo("/LoginPage");
};

onMounted(async () => {
  await checkAuth();
});
</script>

<style scoped>
/* No specific overrides needed */
</style>