<script setup lang="ts">
/**
 * Default layout with responsive navigation.
 *
 * Used for most authenticated pages (dashboard, collection, decks, etc.).
 * Shows sidebar navigation on desktop (md+) and bottom tabs on mobile.
 * Content area is scrollable and accounts for navigation elements.
 */
import NavSidebar from '@/components/NavSidebar.vue'
import NavBottomTabs from '@/components/NavBottomTabs.vue'
</script>

<template>
  <div class="min-h-screen flex bg-gray-900">
    <!-- Desktop sidebar -->
    <NavSidebar />

    <!-- Main content area -->
    <main class="flex-1 flex flex-col min-h-screen">
      <!-- Content with padding for mobile bottom nav -->
      <div class="flex-1 overflow-auto pb-20 md:pb-0">
        <slot />
      </div>
    </main>

    <!-- Mobile bottom tabs -->
    <NavBottomTabs />
  </div>
</template>
