GUI 1 - Counter

src/routes/+layout.svelte

@@ -0,0 +1,22 @@
+<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>
+    </ul>
+  </div>
+</div>

src/routes/+page.svelte

@@ -0,0 +1 @@
+<p class="m-4">Select a GUI</p>

src/routes/1_counter/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  let state = $state(0);
+</script>
+
+<div class="text-center">
+  <div class="stats shadow-lg">
+    <div class="stat">
+      <div class="stat-title">1. Counter</div>
+      <div class="stat-value">{state}</div>
+      <button class="btn" onclick={() => state++}>Count</button>
+    </div>
+  </div>
+</div>