KArtSell.Aegis/frontend/src/shared/shell/AppLayout.vue

<script setup lang="ts">
import { ref } from 'vue'
import Sidebar from './Sidebar.vue'
import Header from './Header.vue'
import Footer from './Footer.vue'

const isSidebarOpen = ref(true)
const isDarkMode = ref(false)

const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
}

const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
  // Apply dark mode to root element
  if (isDarkMode.value) {
    document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    document.documentElement.removeAttribute('data-theme')
  }
}
</script>

<template>
  <div class="app-layout" :class="{ 'dark-mode': isDarkMode }">
    <!-- Sidebar -->
    <Sidebar :isOpen="isSidebarOpen" @toggle="toggleSidebar" />

    <!-- Main Content -->
    <div class="app-main">
      <!-- Header -->
      <Header
        @toggle-sidebar="toggleSidebar"
        @toggle-dark-mode="toggleDarkMode"
        :isDarkMode="isDarkMode"
      />

      <!-- Page Content -->
      <main class="app-content">
        <slot></slot>
      </main>

      <!-- Footer -->
      <Footer />
    </div>
  </div>
</template>

<style scoped>
.app-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

.app-main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.app-content {
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--color-background-primary);
}

/* Smooth transitions */
:deep(*) {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

@media (max-width: 768px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
}
</style>