<script setup>
// import HelloWorld from './components/HelloWorld.vue'
// import TheWelcome from './components/TheWelcome.vue'
// import UserList from './components/UserList.vue';
import tutorial_1_options from './components/Tutorial-1-options.vue';
import tutorial_1_composition from './components/Tutorial-1-composition.vue';
import tutorial_2_composition from './components/Tutorial-2-composition.vue';
import sidebar from './components/Sidebar.vue';
import { store } from './components/Store.js';
import { menuList } from './components/Store.js';

const componentMap = {
    tutorial_1_options,
    tutorial_1_composition,
    tutorial_2_composition
};

</script>

<template>
    <!--<TheWelcome />-->
    <div class="container">
        <div class="sidebar">
            <sidebar/>
        </div>
        <div class="main-content">
            <!-- 主要内容区域 -->
            <div v-for="menu in menuList" :index="menu.id" :key="menu.id">
                <!--动态渲染组件-->
                <div v-if="menu.id === store.currentId || store.currentId === 0"> <!--选择的是All，或者选择的是当前项-->
                    <component v-if="menu.id != 0" :is="componentMap[menu.elementName]"></component>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
    display: flex; /* 使用Flex布局 */
    height: 100%;
}

.sidebar {
    width: 200px; /* 设置侧边栏的固定宽度 */
    background-color: #f5f5f5; /* 可选：背景颜色以区分 */
    /* 以下样式让Sidebar靠左并保持固定 */
    position: sticky; /* 或者使用fixed，根据你的具体需求 */
    left: 0;
    top: 0;
    height: 100vh; /* 让Sidebar高度充满视口 */
    overflow-y: auto; /* 如果内容超过高度，添加滚动条 */
}

.main-content {
    /* 主内容区域将填充除了Sidebar之外的剩余空间 */
    flex-grow: 1;
    padding-left: 30px; /* 考虑到Sidebar的宽度和可能的边距，调整至适合的值 */
    overflow-y: auto; /* 添加滚动条以防内容溢出 */
}
</style>