feat: add centerButton, menuButton, linksContent snippets and bars icon to BottomNavigation

src/lib/components/bottom-nav.svelte

@@ -33,6 +33,30 @@
         },
       ]
     >;
+    centerButton?: Snippet<
+      [
+        {
+          open: boolean;
+          onClick: () => void;
+        },
+      ]
+    >;
+    menuButton?: Snippet<
+      [
+        {
+          open: boolean;
+          onClick: () => void;
+        },
+      ]
+    >;
+    linksContent?: Snippet<
+      [
+        {
+          open: boolean;
+          closeMenu: () => void;
+        },
+      ]
+    >;
     profilePicture?: Snippet;
     class?: ClassNameValue;
   }
@@ -44,6 +68,9 @@
     showNamespacePicker = true,
     children,
     nsPicker,
+    centerButton,
+    menuButton,
+    linksContent,
     profilePicture,
     class: className = '',
   }: Props = $props();
@@ -122,11 +149,15 @@
     out:slide={{ duration: 200, delay: 0 }}
   >
     {#if viewLinks}
-      <div
-        class="flex h-full flex-col-reverse justify-start gap-6 overflow-auto px-4 py-8"
-      >
-        {@render linksSnippet?.()}
-      </div>
+      {#if linksContent}
+        {@render linksContent({ open: viewLinks, closeMenu })}
+      {:else}
+        <div
+          class="flex h-full flex-col-reverse justify-start gap-6 overflow-auto px-4 py-8"
+        >
+          {@render linksSnippet?.()}
+        </div>
+      {/if}
     {/if}
     {#if nsPicker}
       {@render nsPicker({ open: viewNamespaces, closeMenu })}
@@ -150,38 +181,49 @@
   data-testid="top-nav"
   aria-label={translate('common.main')}
 >
-  <button
-    class="nav-button relative"
-    data-testid="nav-menu-button"
-    class:active-shadow={viewLinks}
-    type="button"
-    onclick={onLinksClick}
-  >
-    {#if viewLinks}
-      <Icon name="close" height={32} width={32} />
+  {#if menuButton}
+    {@render menuButton({ open: viewLinks, onClick: onLinksClick })}
+  {:else}
+    <button
+      class="nav-button relative"
+      data-testid="nav-menu-button"
+      class:active-shadow={viewLinks}
+      type="button"
+      onclick={onLinksClick}
+    >
+      {#if viewLinks}
+        <Icon name="close" height={32} width={32} />
+      {:else}
+        <Logo height={32} width={32} />
+      {/if}
+    </button>
+  {/if}
+  {#if showNamespacePicker}
+    {#if centerButton}
+      {@render centerButton({
+        open: viewNamespaces,
+        onClick: onNamespaceClick,
+      })}
     {:else}
-      <Logo height={32} width={32} />
+      <div class="namespace-wrapper">
+        <Button
+          variant="ghost"
+          data-testid="namespace-switcher"
+          leadingIcon="namespace-switcher"
+          size="xs"
+          class="grow text-white"
+          on:click={onNamespaceClick}>{truncateNamespace(namespace)}</Button
+        >
+        <div class="ml-1 h-full w-1 border-l border-subtle"></div>
+        <Button
+          variant="ghost"
+          size="xs"
+          href={routeForNamespace({ namespace })}
+          disabled={!namespaceExists}
+          ><Icon class="text-white" name="external-link" /></Button
+        >
+      </div>
     {/if}
-  </button>
-  {#if showNamespacePicker}
-    <div class="namespace-wrapper">
-      <Button
-        variant="ghost"
-        data-testid="namespace-switcher"
-        leadingIcon="namespace-switcher"
-        size="xs"
-        class="grow text-white"
-        on:click={onNamespaceClick}>{truncateNamespace(namespace)}</Button
-      >
-      <div class="ml-1 h-full w-1 border-l border-subtle"></div>
-      <Button
-        variant="ghost"
-        size="xs"
-        href={routeForNamespace({ namespace })}
-        disabled={!namespaceExists}
-        ><Icon class="text-white" name="external-link" /></Button
-      >
-    </div>
   {/if}
   <button
     class="nav-button"

src/lib/holocene/icon/paths.ts

@@ -11,6 +11,7 @@ import arrowUp from './svg/arrow-up.svelte';
 import ascending from './svg/ascending.svelte';
 import astronaut from './svg/astronaut.svelte';
 import aws from './svg/aws.svelte';
+import bars from './svg/bars.svelte';
 import batchOperation from './svg/batch-operation.svelte';
 import book from './svg/book-sparkles.svelte';
 import bookmark from './svg/bookmark.svelte';
@@ -168,6 +169,7 @@ export const icons = {
   ascending,
   astronaut,
   aws,
+  bars,
   'batch-operation': batchOperation,
   book,
   bookmark,

src/lib/holocene/icon/svg/bars.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <line
+    x1="3"
+    y1="6"
+    x2="21"
+    y2="6"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+  <line
+    x1="3"
+    y1="12"
+    x2="21"
+    y2="12"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+  <line
+    x1="3"
+    y1="18"
+    x2="21"
+    y2="18"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+</Svg>