Nuxt4 Layouts

<template>
  <div
    id="imperial-dashboard-layout"
    class="flex flex-col h-screen overflow-hidden bg-black"
  >
    <UHeader class="border-b border-red-900/20 bg-black/50 backdrop-blur-md">
      <template #left>
        <NuxtLink to="/dashboard">
          <UAvatar
            src="https://www.geekcals.com/wp-content/uploads/2015/08/Imperial-Logo.jpg"
            class="w-8 h-8 p-1 bg-black ring-1 ring-red-600/30"
          />
        </NuxtLink>
        <span class="ml-3 font-bold tracking-tighter uppercase italic text-white">Terminal</span>
      </template>
      <template #right>
        <UColorModeButton />
      </template>
    </UHeader>

    <div class="flex flex-1 overflow-hidden">
      <AppSidebar class="w-64 shrink-0 border-r border-zinc-900" />

      <UMain class="flex-1 overflow-y-auto relative bg-zinc-950">
        <div class="fixed inset-0 pointer-events-none opacity-[0.02] bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-size-[100%_2px,3px_100%]" />

        <div class="relative z-10">
          <slot />
        </div>
      </UMain>
    </div>

    <UFooter class="border-t border-zinc-900 bg-black py-2">
      <template #left>
        <span class="text-[10px] text-zinc-600 uppercase tracking-[0.2em] px-4 font-mono">
          Status: Sector Secure // Protocol 4.2.2
        </span>
      </template>
    </UFooter>
  </div>
</template>