use slots for nav in AppShell

src/App.svelte

@@ -12,17 +12,7 @@
     import ItemDetail from "./ItemDetail.svelte"
     import ItemList from "./ItemList.svelte"
     import AdvancedSearch from "./AdvancedSearch.svelte"
-
+    import { SearchIcon } from "@rgossiaux/svelte-heroicons/outline";
-    let sidebarItems = [
-        {text: "Game", link: "#/game", icon: "home"},
-        {text: "Topics", link: "#/topics", icon: "home"},
-        {text: "Formats", link: "#/formats", icon: "home"},
-        {text: "Random item", link: "#/item/1", icon: "home"},
-        {text: "Search", link: "#/search", icon: "home"},
-        {text: "Want to learn", link: "#/wanttolearn", icon: "home"},
-        {text: "Finished learning", link: "#/finishedlearning", icon: "home"},
-        {text: "Datasette", link: "/learn", icon: "home"}
-    ]
 
     let currentView = "/topics";
 
@@ -48,7 +38,8 @@
 
 <svelte:window on:hashchange={hashchange}/>
 
-<TailwindUI.AppShell {sidebarItems}>
+<TailwindUI.AppShell>
+    <svelte:fragment slot="content">
         {#if currentView === "/home" || currentView === "/"}
             <Home/>
         {:else if currentView === "/game"}
@@ -72,4 +63,38 @@
         {:else if currentView === "/finishedlearning"}
             <ItemList kind={1}/>
         {/if}
+    </svelte:fragment>
+
+    <svelte:fragment slot="nav">
+        <a href="#/topics" class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            Topics
+        </a>
+        <a href="#/formats" class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            Formats
+        </a>
+        <a href="#/item/1" class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            Random Item
+        </a>
+        <a href="#/search" class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            Search
+        </a>
+        <hr/>
+        <a href="#/wanttolearn" class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            Want to learn
+        </a>
+        <a href="#/finishedlearning" class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            Finished learning
+        </a>
+        <hr/>
+        <a href="/learn" class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            Datasette
+        </a>
+    </svelte:fragment>
 </TailwindUI.AppShell>

src/tailwindui/AppShell.svelte

@@ -1,9 +1,6 @@
 <script>
     import Icon from "./Icon.svelte"
     import MenuButton from "./MenuButton.svelte"
-    import SearchForm from "./SearchForm.svelte"
-    import { SearchIcon } from "@rgossiaux/svelte-heroicons/outline";
-    export let sidebarItems = [];
     let isNavDrawerOpen = false
     export let showNotificationBell = false;
     export let showProfileMenu = false;
@@ -70,6 +67,7 @@
                     {text}
                   </a>
               {/each}
+              <slot name="sidebar"></slot>
 
             </nav>
           </div>
@@ -91,13 +89,7 @@
         </div>
         <div class="mt-5 flex-1 flex flex-col">
           <nav class="flex-1 px-2 pb-4 space-y-1">
-            <!-- Current: "bg-indigo-800 text-white", Default: "text-indigo-100 hover:bg-indigo-600" -->
+            <slot name="nav"></slot>
-            {#each sidebarItems as { text, link, icon }, i}
-                <a href={link} class="w-full bg-indigo-800 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
-                  <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
-                  {text}
-                </a>
-            {/each}
           </nav>
         </div>
       </div>
@@ -127,7 +119,7 @@
       <main class="bg-gray-100">
         <div class="py-6">
           <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
-            <slot></slot>
+            <slot name="content"></slot>
           </div>
         </div>
       </main>