<script lang="ts">
  import '../app.css';

  let { children } = $props();
</script>

<svelte:head>
  <title>SvelteKit 7 GUIs</title>
</svelte:head>

<div class="drawer drawer-open">
  <input id="my-drawer-2" type="checkbox" class="drawer-toggle"/>
  <div class="drawer-content">
    <main class="p-4">
      {@render children()}
    </main>
  </div>
  <div class="drawer-side">
    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <li><a href="/1_counter">1. Counter</a></li>
      <li><a href="/2_temperature_converter">2. Temperature Converter</a></li>
    </ul>
  </div>
</div>
