breadcrumb feature added

src/TopicDetail.svelte

@@ -18,7 +18,6 @@
         });  
 </script>
 
-
 <TopicMasonryGrid {topicname} {alltopics}/>
 
 <!-- <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
@@ -31,10 +30,12 @@
     <div class="">
         <sl-tab-group>
             {#each formats as format}
-                <sl-tab slot="nav" panel="general" 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>
+                <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}            
                 {#if format.id == 'book'}
-                <sl-tab-panel name="general">
+                <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}/>
@@ -44,7 +45,7 @@
                 
 
                 {:else if format.id == 'video'}
-                <sl-tab-panel name="general">
+                <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">
                         {#each items.filter(x => x.links.includes(format.id + '|')) as item}
                         <VideoCard {item}/>
@@ -53,7 +54,7 @@
                 </sl-tab-panel>
 
                 {:else} 
-                <sl-tab-panel name="general">
+                <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">
                         {#each items.filter(x => x.links.includes(format.id + '|')) as item}
                         <GenericCard {item}/>

src/TopicMasonryGrid.svelte

@@ -66,15 +66,23 @@
 
 </script>
 
-
-<h1 class="text-2xl font-bold mb-4 text-gray-100">
-{#if topic}
-    {capitalize(topic.display_name)}
-{:else}
-    All Topics
-{/if}
-</h1>
-
+<div class="mb-10">
+    <sl-breadcrumb>
+        <sl-breadcrumb-item>All Topics</sl-breadcrumb-item>
+        {#if topic}
+            {#if topic.parent_id}
+                <sl-breadcrumb-item>
+                    {capitalize(topic.parent_id)}
+                </sl-breadcrumb-item>
+            {/if}
+             {#if topic.display_name}
+                <sl-breadcrumb-item>
+                    {capitalize(topic.display_name)}
+                </sl-breadcrumb-item>
+            {/if}   
+        {/if}
+    </sl-breadcrumb>
+</div>
 
 <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
   {#each [...map.entries()] as parent}

src/tailwindui/ComboBox.svelte

@@ -13,7 +13,7 @@
         </svg>
       </button>
   
-      <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" id="options" role="listbox">
+      <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm hidden" id="options" role="listbox">
         {#each options as option}
         <!--
           Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.