revert cluster menu dropdown

defenseunicorns · Nov 6, 2024 · d4ba8f1 · d4ba8f1
1 parent 5987dd6
commit d4ba8f1
Showing 1 changed file with 10 additions and 19 deletions.
diff --git a/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte b/ui/src/lib/features/navigation/navbar/clustermenu/component.svelte
@@ -67,7 +67,7 @@
   $: availableClusters = $clusters.filter((cluster) => !cluster.selected).sort((a, b) => a.name.localeCompare(b.name))
 </script>
 
-<div class="relative w-64">
+<div class="w-full md:block md:w-auto">
   <button
     id="clusterDropdownButton"
     data-dropdown-toggle="clusterDropdown"
@@ -76,37 +76,28 @@
         await fetchClusters()
       }
     }}
-    class={`group flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium bg-white dark:bg-gray-800 border ${
+    class={`flex items-center justify-between w-full py-2 px-3 text-sm text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent ${
       switchErr
-        ? 'border-red-500 text-red-500 hover:bg-red-50 dark:border-red-500 dark:text-red-400 dark:hover:bg-red-900/10'
-        : 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700'
-    } rounded-lg transition-all duration-200 ease-in-out`}
+        ? 'text-red-500 dark:hover:text-white'
+        : 'dark:text-gray-400 dark:hover:text-white dark:focus:text-white'
+    }`}
   >
-    <div class="flex items-center space-x-2">
-      <div class={`w-2 h-2 rounded-full ${switchErr ? 'bg-red-500' : 'bg-green-400'}`}></div>
-      <span>
-        {selected}
-      </span>
-    </div>
-    <ChevronDown class="ml-1 h-4 w-4 text-gray-500 transition-transform duration-200" />
+    {selected}
+    <ChevronDown class="ml-1 expanded-only h-5 w-5 transition duration-200" />
   </button>
-
   <ul
     id="clusterDropdown"
     aria-labelledby="clusterDropdownButton"
     bind:this={dropdown}
-    class="absolute w-full mt-2 hidden font-normal bg-white rounded-lg shadow-lg z-10 dark:bg-gray-700 py-1 text-sm dark:text-gray-300 ring-1 ring-black ring-opacity-5"
+    class="z-10 hidden font-normal bg-white rounded-lg shadow m-w-48 max-w-72 dark:bg-gray-700 dark:divide-gray-600 py-2 text-sm dark:text-gray-300"
   >
     {#each availableClusters as cluster}
       <li>
         <button
-          class="flex rounded-md items-center w-full px-4 py-2.5 text-left hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-white transition-colors duration-150"
+          class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white truncate"
           on:click={() => switchCluster(cluster)}
         >
-          <div class="flex items-center space-x-2">
-            <div class="w-2 h-2 rounded-full bg-gray-300"></div>
-            <span class="truncate">{cluster.context}.{cluster.name}</span>
-          </div>
+          {cluster.context}.{cluster.name}
         </button>
       </li>
     {/each}