<template>
  <div class="comp-test-layout">
    <div class="sidebar">
      <h2 class="sidebar-title">Test Pages</h2>
      <ul class="menu-list">
        <li>
          <a
            href="#"
            :class="['menu-item', { active: selectedMenu === 'comp-test' }]"
            @click.prevent="selectedMenu = 'comp-test'"
          >
            Component Demos
          </a>
        </li>
        <li>
          <a
            href="#"
            :class="['menu-item', { active: selectedMenu === 'svg-view' }]"
            @click.prevent="selectedMenu = 'svg-view'"
          >
            SVG Icon Viewer
          </a>
        </li>
      </ul>
    </div>
    <div class="content-area">
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, defineAsyncComponent } from 'vue';

  defineOptions({
    name: 'CompTestIndex',
  });

  const CompTest = defineAsyncComponent(() => import('./comp-test.vue'));
  const SvgView = defineAsyncComponent(() => import('./svg-view.vue'));

  const selectedMenu = ref('comp-test'); // Default to 'comp-test'

  const currentComponent = computed(() => {
    switch (selectedMenu.value) {
      case 'comp-test':
        return CompTest;
      case 'svg-view':
        return SvgView;
      default:
        return CompTest; // Fallback to CompTest
    }
  });
</script>

<style scoped>
  .comp-test-layout {
    display: flex;
    height: 100vh;
    background-color: #f8f9fa; /* Light gray background for the whole layout */
  }

  .sidebar {
    width: 250px; /* Fixed width for the sidebar */
    background-color: #ffffff; /* White background for sidebar */
    padding: 20px;
    border-right: 1px solid #dee2e6; /* Light border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  }

  .sidebar-title {
    font-size: 1.25rem; /* Slightly larger title */
    font-weight: 600;
    margin-bottom: 20px;
    color: #343a40; /* Darker text color */
    padding-left: 10px;
  }

  .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu-item {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #495057; /* Standard text color for menu items */
    border-radius: 6px; /* Rounded corners for menu items */
    margin-bottom: 5px; /* Space between menu items */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  }

  .menu-item:hover {
    background-color: #e9ecef; /* Light hover effect */
    color: #007bff; /* Blue color on hover */
  }

  .menu-item.active {
    background-color: #007bff; /* Blue background for active item */
    color: #ffffff; /* White text for active item */
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3); /* Shadow for active item */
  }

  .content-area {
    flex-grow: 1; /* Takes up remaining space */
    padding: 24px;
    overflow-y: auto; /* Allows scrolling for content */
    background-color: #f8f9fa; /* Consistent background */
  }
</style>
