<template>
  <div class="main-menu-container" :class="themeClass">
    <!-- 侧边栏菜单 -->
    <Sidebar 
      :is-collapse="sidebarCollapse" 
      @toggle-collapse="handleSidebarToggle"
      class="sidebar-menu"
    />
  </div>
</template>

<script setup>
import { ref, inject, computed } from 'vue'
import { useI18n } from 'vue-i18n'
// 导入Sidebar组件
import Sidebar from '/src/components/menu/Sidebar.vue'

// 注入主题配置
const theme = inject('theme', { 
  currentTheme: 'light',
  switchTheme: () => {}
})

// 国际化
const { t } = useI18n()

// 控制侧边栏折叠状态
const sidebarCollapse = ref(false)

// 计算主题类名
const themeClass = computed(() => `theme-${theme.currentTheme}`)

// 处理侧边栏折叠/展开切换
const handleSidebarToggle = () => {
  sidebarCollapse.value = !sidebarCollapse.value
}
</script>

<style scoped>
.main-menu-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-background);
  transition: background-color 0.3s ease;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: var(--color-background);
  color: var(--color-text);
  transition: all 0.3s ease;
}

.sidebar-menu {
  width: 100%;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

/* 适配不同主题的滚动条样式 */
:deep(.sidebar-menu ::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.sidebar-menu ::-webkit-scrollbar-track) {
  background: var(--color-surface-alt);
  border-radius: 3px;
}

:deep(.sidebar-menu ::-webkit-scrollbar-thumb) {
  background: var(--color-border);
  border-radius: 3px;
}

:deep(.sidebar-menu ::-webkit-scrollbar-thumb:hover) {
  background: var(--color-primary);
  opacity: 0.7;
}
</style>
    