Web-Antrean/components/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}">
        <v-icon color="orange-darken-2" size="36">mdi-hospital-box-outline</v-icon>
        <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">Antrian</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>