tkPage/src/views/nav.vue

<template>
  <div class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 subtle-grid shadow-2xl overflow-hidden mx-auto" style="width: 1600px; height: 900px;">
    <div class="flex h-full overflow-hidden">
      <Sidebar class="flex-none h-full" @activeIndex="activeIndexFn" />
      <main class="flex-1 overflow-y-auto p-4 relative flex flex-col h-full bg-[#f3f5f9]">
        <div v-show="activeIndexA == 1" class="h-full">
          <workbenches />
        </div>
        <div v-show="activeIndexA == 2" class="h-full">
          <hostsList />
        </div>
        <!-- Decorative blobs -->
        <!-- <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div> -->
        <!-- <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-secondary/5 rounded-full blur-3xl pointer-events-none"></div> -->
        
        <!-- <div class="absolute bottom-2 right-4 text-xs text-slate-400">{{ version }}</div> -->
      </main>
    </div>
  </div>
</template>

<script setup>
import Sidebar from '../components/Sidebar.vue';
import hostsList from '@/views/hosts/hostsList.vue'
import workbenches from '@/views/hosts/workbenches.vue'
import { ref } from 'vue'

let activeIndexA = ref(1)
const version = ref('v0.1.0')

function activeIndexFn(data) {
  activeIndexA.value = data
  console.log(data)
}
</script>

<style>
/* Global resets if needed, but Tailwind handles most */
body {
  margin: 0;
  padding: 0;
  background-color: #f3f5f9; /* Match background */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
</style>