From 22649a26062f9b24d63c3159dfb60748d9984826 Mon Sep 17 00:00:00 2001
From: Nilesh <19304+nileshtrivedi@users.noreply.github.com>
Date: Fri, 20 May 2022 10:13:46 +0100
Subject: [PATCH] sidebar styling

---
 src/App.svelte                 | 14 +++++++-------
 src/tailwindui/AppShell.svelte |  8 --------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 0b8c5b5..6aa1ebe 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -66,33 +66,33 @@
     </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">
+        <a href="#/topics" class={(currentView === "/topics" ? '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"}>
             <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">
+        <a href="#/formats" class={(currentView === "/formats" ? '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"}>
             <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">
+        <a href="#/item/1" 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>
-        <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">
+        <a href="#/search" class={(currentView === "/search" ? '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"}>
             <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">
+        <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"}>
             <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">
+        <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"}>
             <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">
+        <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">
             <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
             Datasette
         </a>
diff --git a/src/tailwindui/AppShell.svelte b/src/tailwindui/AppShell.svelte
index a53de9c..afc207c 100644
--- a/src/tailwindui/AppShell.svelte
+++ b/src/tailwindui/AppShell.svelte
@@ -60,15 +60,7 @@
           </div>
           <div class="mt-5 flex-1 h-0 overflow-y-auto">
             <nav class="px-2 space-y-1">
-              <!-- Current: "bg-indigo-800 text-white", Default: "text-indigo-100 hover:bg-indigo-600" -->
-              {#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-base font-medium rounded-md">
-                    <Icon kind={icon}/>
-                    {text}
-                  </a>
-              {/each}
               <slot name="sidebar"></slot>
-
             </nav>
           </div>
         </div>