From 9e3e69bb0824504255c34768332bacf5eef84adf Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Thu, 26 May 2022 11:47:14 +0100
Subject: [PATCH] sidebar

---
 src/App.svelte                 | 42 +++++++++++++++++-----------------
 src/TopicDetail.svelte         | 39 +++++++------------------------
 src/tailwindui/AppShell.svelte |  2 +-
 templates/index.html           | 11 +++++++++
 4 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 6f56611..0c8f8da 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -83,35 +83,35 @@
     </svelte:fragment>
 
     <svelte:fragment slot="nav">
-        <a href="#/topics" class={(currentView === "/topics" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 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 href="#/topics" class={(currentView === "/topics" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
+            <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            <h3 class="text-center"> Topics</h3>
         </a>
-        <a href="#/formats" class={(currentView === "/formats" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 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 href="#/formats" class={(currentView === "/formats" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
+            <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            <h3 class="text-center"> Formats</h3>
         </a>
-        <a href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-indigo-600 w-full 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 href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-gray-900 w-full group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md">
+            <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            <h3 class="text-center"> Random Item</h3>
         </a>
-        <a href="#/search" class={(currentView === "/search" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 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 href="#/search" class={(currentView === "/search" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
+            <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            <h3 class="text-center"> Search</h3>
         </a>
         <hr/>
-        <a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
-            <BookmarkIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
-            Want to learn
+        <a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
+            <BookmarkIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            <h3 class="text-center"> Want to learn</h3>
         </a>
-        <a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
-            <BookmarkAltIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
-            Finished learning
+        <a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
+            <BookmarkAltIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            <h3 class="text-center"> Finished learning</h3>
         </a>
         <hr/>
-        <a href="/learn" class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md">
-            <CogIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
-            Datasette
+        <a href="/learn" class="text-indigo-100 hover:bg-gray-900 w-full group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md">
+            <CogIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
+            <h3 class="text-center"> Datasette</h3>
         </a>
 
     </svelte:fragment>
diff --git a/src/TopicDetail.svelte b/src/TopicDetail.svelte
index 472fc16..a62864f 100644
--- a/src/TopicDetail.svelte
+++ b/src/TopicDetail.svelte
@@ -16,7 +16,8 @@
         .then(r => r.json())
         .then(data => {
             items = data;
-        });  
+        }); 
+        
 </script>
 
 <SearchForm {alltopics}/>
@@ -31,22 +32,21 @@
 
 <div>
     <div class="">
-        <sl-tab-group>
-            {#each formats as format}
-                <sl-tab slot="nav" panel="{format.id}" class="px-2 py-1 bg-gray-900 rounded-md mr-3 mb-3 text-gray-200 shadow hover:text-gray-100 hover:bg-gray-800">{format.name}</sl-tab>
-            {/each}
-
-            {#each formats as format}            
+        <sl-tab-group placement="start">
+            {#each formats.filter(f => items.filter(x => x.links.includes(f.id + '|')).length > 0) as format}
+                    <sl-tab slot="nav" panel="{format.id}" class="">{format.name}</sl-tab>
+                
+        
                 {#if format.id == 'book'}
                 <sl-tab-panel name="{format.id}">
                     <div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
                         {#each items.filter(x => x.links.includes(format.id + '|')) as item}
+                        
                         <BookCard {item}/>
                         {/each}
                     </div>
                 </sl-tab-panel>
                 
-
                 {:else if format.id == 'video'}
                 <sl-tab-panel name="{format.id}">
                     <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
@@ -69,29 +69,6 @@
         </sl-tab-group>     
     </div>
 
-    <!-- {#each formats as format} 
-        <h1>{format.name}</h1>
-        {#if format.id == 'book'}
-            <div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
-                {#each items.filter(x => x.links.includes(format.id + '|')) as item}
-                <BookCard {item}/>
-                {/each}
-            </div>
-
-        {:else if format.id == 'video'}
-            <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
-                {#each items.filter(x => x.links.includes(format.id + '|')) as item}
-                <VideoCard {item}/>
-                {/each}    
-            </div>     
-        {:else} 
-            <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
-                {#each items.filter(x => x.links.includes(format.id + '|')) as item}
-                <GenericCard {item}/>
-                {/each} 
-            </div>        
-        {/if}     
-    {/each} -->
 </div>
 
 
diff --git a/src/tailwindui/AppShell.svelte b/src/tailwindui/AppShell.svelte
index 94437b2..ed2f979 100644
--- a/src/tailwindui/AppShell.svelte
+++ b/src/tailwindui/AppShell.svelte
@@ -73,7 +73,7 @@
     {/if}
   
     <!-- Static sidebar for desktop -->
-    <div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
+    <div class="hidden md:flex md:w-32 md:flex-col md:fixed md:inset-y-0">
       <!-- Sidebar component, swap this element with another sidebar if you like -->
       <div class="flex flex-col flex-grow pt-5 bg-cyan-900 text-white overflow-y-auto">
         <div class="flex items-center flex-shrink-0 px-4 text-white tracking-wider text-2xl">
diff --git a/templates/index.html b/templates/index.html
index 0f15d27..7a37be9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,6 +4,17 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<script src="//cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+		<script>
+			tailwind.config = {
+				theme: {
+					extend: {
+						colors: {
+							clifford: '#da373d',
+						}
+					}
+				}
+			}
+		</script>
         <script src="/static/bundle.js" defer></script>
 		<link href="/static/bundle.css" rel="stylesheet" />
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />