glowing-fiesta-original/app/layouts/Default.vue

<script setup lang="ts">
import { useAuthStore } from "~/stores/auth";
import DefaultSidebar from "~/layouts/default/Sidebar.vue";

import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";

import { Separator } from "~/components/ui/separator";

import { useRuntimeConfig } from "#app";

const currentYear = new Date().getFullYear();

const config = useRuntimeConfig();

const authStore = useAuthStore();
await authStore.init();
</script>

<template>
  <SidebarProvider>
    <DefaultSidebar :user="authStore.user" />
    <SidebarInset>
      <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
        <SidebarTrigger class="-ml-1" />
        <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem class="hidden md:block">
              <BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator class="hidden md:block" />
            <BreadcrumbItem>
              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </header>
      <main class="flex flex-1 flex-col gap-4 p-4">
        <slot />
      </main>
      <footer class="flex h-12 shrink-0 items-center gap-2 border-b px-4" data-testid="footer">
        <div v-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
          Glowing Fiesta 2025 <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
        </div>
        <div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
          Glowing Fiesta 2025 - {{ currentYear }} <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
        </div>
      </footer>
    </SidebarInset>
  </SidebarProvider>
</template>