Web-Antrean/components/SideBar.vue

<template>
  <v-navigation-drawer
    v-model="drawer"
    :rail="rail"
    permanent
    app
    color="white"
    width="280"
    rail-width="72"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div class="pa-4 d-flex align-center" style="height: 64px">
      <v-icon color="#ff9248" size="32">mdi-hospital-building</v-icon>
      <v-toolbar-title v-show="!rail" class="ml-3 text-h6">
        Antrean RSSA
      </v-toolbar-title>
    </div>

    <v-divider></v-divider>

    <v-list density="default" nav class="py-2">
      <!-- search bar
      <v-list-item
        prepend-icon="mdi-magnify"
        :title="!rail ? 'Search' : ''"
        rounded="lg"
        class="mx-2 my-1"
      >
      </v-list-item> -->

      <template v-for="item in navItemsStore.getNavItems" :key="item.id">

        <v-menu
          v-if="item.children && item.children.length > 0"
          open-on-hover
          location="end"
          :disabled="!rail"
        >
          <template v-slot:activator="{ props }">
            <v-list-group v-if="!rail" :value="item.name">
              <template v-slot:activator="{ props: listGroupProps }">
                <v-list-item
                  v-bind="listGroupProps"
                  :prepend-icon="item.icon"
                  :title="item.name"
                  :active="item.name === currentActiveMenu"
                  rounded="lg"
                  class="mx-2 my-1"
                >
                </v-list-item>
              </template>
              <v-list-item
                v-for="child in item.children"
                :key="child.id"
                :to="child.path"
                :title="child.name"
                :active="child.path === currentRoute.path"
                rounded="lg"
                class="mx-2 my-1 pl-12"
              >
              </v-list-item>
            </v-list-group>

            <v-list-item
              v-else
              v-bind="props"
              :prepend-icon="item.icon"
              :active="item.name === currentActiveMenu"
              rounded="lg"
              class="mx-2 my-1"
            >
            </v-list-item>
          </template>

          <v-list class="py-2" style="min-width: 200px">
            <v-list-item>
              <v-list-item-title class="font-weight-bold">
                {{ item.name }}
              </v-list-item-title>
            </v-list-item>
            <v-divider class="my-2"></v-divider>
            <v-list-item
              v-for="child in item.children"
              :key="child.id"
              :to="child.path"
              :title="child.name"
              :active="child.path === currentRoute.path"
              rounded="lg"
              class="mx-2"
            >
            </v-list-item>
          </v-list>
        </v-menu>

        <v-list-item
          v-else
          :prepend-icon="item.icon"
          :title="!rail ? item.name : ''"
          :to="item.path"
          :active="item.path === currentRoute.path"
          rounded="lg"
          class="mx-2 my-1"
        >
          <template v-slot:append v-if="item.badge && !rail">
            <v-chip size="x-small" color="error" variant="flat">{{
              item.badge
            }}</v-chip>
          </template>
        </v-list-item>
      </template>

      <v-divider class="my-4 mx-2"></v-divider>
    </v-list>

    <v-spacer></v-spacer>

  <template v-slot:append>
  <div class="pa-3">
    <ProfileMenu 
      :user="user.value"  :rail="rail"
      @logout="handleLogout"
      class="full-width-on-expand" 
    />
  </div>
</template>
  </v-navigation-drawer>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
// Import store Pinia
import { useNavItemsStore } from "@/stores/navItems"; // Sesuaikan path ini jika perlu
import ProfileMenu from "./ProfileMenu.vue";

// State
const drawer = ref(true);
const rail = ref(true);
const hoverTimeout = ref(null);

// Akses Pinia Store
const user = ref({
    name: 'Adam Sulfat',
    email: 'adam@rssa.com',
    picture: 'https://i.pravatar.cc/150?img=33', // Ganti dengan URL gambar dinamis
    id: 'a1b2c3d4e5f6g7h8'
});
const navItemsStore = useNavItemsStore();

const currentRoute = useRoute();

const currentActiveMenu = computed(() => {
  // Menggunakan Getter untuk mendapatkan array menu yang pasti valid
  const items = navItemsStore.getNavItems; 

  // Pengecekan keamanan (walaupun Getter seharusnya sudah menjamin array)
  if (!Array.isArray(items) || items.length === 0) {
    return "";
  }

  // Cari item utama yang sedang aktif
  const currentItem = items.find((item) => item.path === currentRoute.path);
  if (currentItem) {
    return currentItem.name;
  }

  // Cari item anak (children) yang sedang aktif
  for (const item of items) {
    if (item.children && Array.isArray(item.children)) { 
      const childItem = item.children.find(
        (child) => child.path === currentRoute.path 
      );
      if (childItem) {
        return item.name;
      }
    }
  }
  return "";
});

// Hover handlers
const handleMouseEnter = () => {
  if (hoverTimeout.value) {
    clearTimeout(hoverTimeout.value);
  }
  hoverTimeout.value = setTimeout(() => {
    rail.value = false;
  }, 100);
};

const handleMouseLeave = () => {
  if (hoverTimeout.value) {
    clearTimeout(hoverTimeout.value);
  }
  hoverTimeout.value = setTimeout(() => {
    rail.value = true;
  }, 200);
};

const handleLogout = () => {
  console.log("Logging out...");
  // Tambahkan logika logout di sini
};
</script>

<style scoped>
.v-list-item--active {
  background-color: #e3f2fd !important;
  color: #1976d2 !important;
}

.v-list-item--active :deep(.v-list-item__prepend) {
  color: #1976d2 !important;
}

.v-list-item {
  transition: all 0.2s ease;
}

.v-list-item:hover {
  background-color: #f5f5f5;
}

.v-navigation-drawer {
  border-right: 1px solid #e0e0e0 !important;
  transition: width 0.2s ease-in-out !important;
}

.hover-bg:hover {
  background-color: #f5f5f5;
}

.cursor-pointer {
  cursor: pointer;
}

/* Custom scrollbar */
:deep(.v-navigation-drawer__content) {
  overflow-y: auto;
  overflow-x: hidden;
}

:deep(.v-navigation-drawer__content)::-webkit-scrollbar {
  width: 6px;
}

:deep(.v-navigation-drawer__content)::-webkit-scrollbar-track {
  background: transparent;
}

:deep(.v-navigation-drawer__content)::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

:deep(.v-navigation-drawer__content)::-webkit-scrollbar-thumb:hover {
  background: #999;
}
</style>