<template>
  <div class="flex h-screen">
    <MalioSidebar :sections="navSections">
      <template #logo>
        <NuxtLink to="/">
          <img src="/LOGO_MALIO.png" alt="Malio">
        </NuxtLink>
      </template>
      <template #logo-collapsed>
        <NuxtLink to="/">
          <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio">
        </NuxtLink>
      </template>
    </MalioSidebar>

    <main class="flex-1 overflow-y-auto p-6">
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts">
import {navSections} from '../playground.nav'
</script>
