<template>
  <div class="sidebar-container">
    <div class="sidebar-logo">
      <span v-if="!collapse" class="logo-title">HoneyBox</span>
      <span v-else class="logo-title-mini">HB</span>
    </div>
    <el-scrollbar>
      <el-menu
        :default-active="activeMenu"
        :collapse="collapse"
        :unique-opened="true"
        background-color="transparent"
        text-color="var(--sidebar-text)"
        active-text-color="var(--sidebar-text-active)"
        class="sidebar-menu"
        router
      >
        <SidebarItem
          v-for="menu in menus"
          :key="menu.id"
          :item="menu"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { usePermissionStore } from '@/store/modules/permission'
import SidebarItem from './SidebarItem.vue'

defineProps<{
  collapse: boolean
}>()

const route = useRoute()
const permissionStore = usePermissionStore()

const menus = computed(() => permissionStore.menus)
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--sidebar-bg);
}

.sidebar-logo {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.logo-title {
  color: var(--text-white);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}

.logo-title-mini {
  color: var(--text-white);
  font-size: 18px;
  font-weight: bold;
}

.sidebar-menu {
  border-right: none !important;
}

:deep(.el-menu) {
  border-right: none;
  background-color: transparent !important;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu-item) {
  margin: 4px 8px;
  border-radius: var(--border-radius-base);
  transition: all var(--transition-duration) var(--transition-timing);
}

:deep(.el-menu-item:hover) {
  background-color: var(--sidebar-item-hover) !important;
}

:deep(.el-menu-item.is-active) {
  background-color: var(--sidebar-item-active) !important;
  color: var(--sidebar-text-active) !important;
  font-weight: 500;
}

:deep(.el-sub-menu__title) {
  margin: 4px 8px;
  border-radius: var(--border-radius-base);
  transition: all var(--transition-duration) var(--transition-timing);
}

:deep(.el-sub-menu__title:hover) {
  background-color: var(--sidebar-item-hover) !important;
}

:deep(.el-sub-menu .el-menu) {
  background-color: transparent !important;
}

:deep(.el-sub-menu .el-menu-item) {
  margin: 2px 8px 2px 16px;
}
</style>
