<template>
  <div class="app-container">
    <!-- 引入侧边栏组件 -->
    <Menu 
      :initial-active="0" 
      @menu-click="handleSidebarClick"
    />
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <h1 class="text-2xl font-bold mb-4">首页</h1>
      <div class="bg-white p-6 rounded-lg shadow">
        <p>欢迎使用面向疾病预测的知识图谱应用系统</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Menu from '../components/Menu.vue';

// 处理侧边栏菜单点击
const handleSidebarClick = (menuItem) => {
  console.log('点击了菜单项:', menuItem);
  // 这里可以添加路由跳转或其他逻辑
};
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  height: 100%;
}

/* 确保左侧导航栏完全固定 */
.app-container > :first-child {
  position: fixed;
  height: 100vh;
  z-index: 10;
}

/* 为右侧内容添加左边距，避免被固定导航栏遮挡 */
.main-content {
  margin-left: 240px; /* 与Menu.vue中的sidebar-container宽度相同 */
  transition: margin-left 0.3s ease;
}

/* 当菜单折叠时调整内容区域 */
.app-container:has(.sidebar-container.collapsed) .main-content {
  margin-left: 60px;
}
</style>