feat(navigation): add NavSection Holocene component

src/lib/components/side-nav.svelte

@@ -10,25 +10,30 @@
     isCloud?: boolean;
     linkList: NavLinkListItem[];
     bottom?: Snippet;
+    navContent?: Snippet;
   }
 
-  let { isCloud = false, linkList, bottom }: Props = $props();
+  let { isCloud = false, linkList, bottom, navContent }: Props = $props();
 </script>
 
 <Navigation {isCloud} {bottom} aria-label={translate('common.primary')}>
-  {#each linkList as item}
-    {#if 'divider' in item && item.divider}
-      <hr class="my-4 border-subtle group-data-[nav=closed]:hidden" />
-    {:else if 'href' in item && !item.hidden}
-      <NavigationItem
-        link={item.href}
-        label={item.label}
-        icon={item.icon}
-        tooltip={item?.tooltip || item.label}
-        external={item?.external}
-        animate={item?.animate}
-        isActive={item.isActive}
-      />
-    {/if}
-  {/each}
+  {#if navContent}
+    {@render navContent()}
+  {:else}
+    {#each linkList as item}
+      {#if 'divider' in item && item.divider}
+        <hr class="my-4 border-subtle group-data-[nav=closed]:hidden" />
+      {:else if 'href' in item && !item.hidden}
+        <NavigationItem
+          link={item.href}
+          label={item.label}
+          icon={item.icon}
+          tooltip={item?.tooltip || item.label}
+          external={item?.external}
+          animate={item?.animate}
+          isActive={item.isActive}
+        />
+      {/if}
+    {/each}
+  {/if}
 </Navigation>

src/lib/holocene/navigation/nav-group.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { NavLinkItem } from '$lib/types/global';
+
+  import NavigationItem from './navigation-item.svelte';
+
+  interface Props {
+    navItems: NavLinkItem[];
+  }
+
+  let { navItems }: Props = $props();
+</script>
+
+{#each navItems as item}
+  <NavigationItem
+    link={item.href}
+    label={item.label}
+    icon={item.icon}
+    tooltip={item.tooltip || item.label}
+    external={item.external}
+    animate={item.animate}
+    isActive={item.isActive}
+  />
+{/each}

src/lib/types/global.ts

@@ -144,7 +144,7 @@ export type BooleanString = 'true' | 'false';
 
 export type DataEncoderStatus = 'notRequested' | 'success' | 'error';
 
-type NavLinkItem = {
+export type NavLinkItem = {
   href: string;
   icon: IconName;
   label: string;

src/routes/(app)/+layout.svelte

@@ -13,6 +13,7 @@
   import ErrorBoundary from '$lib/holocene/error-boundary.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import MainContentContainer from '$lib/holocene/main-content-container.svelte';
+  import NavGroup from '$lib/holocene/navigation/nav-group.svelte';
   import NavigationItem from '$lib/holocene/navigation/navigation-item.svelte';
   import Toaster from '$lib/holocene/toaster.svelte';
   import UserMenuMobile from '$lib/holocene/user-menu-mobile.svelte';
@@ -23,7 +24,11 @@
   import { lastUsedNamespace, namespaces } from '$lib/stores/namespaces';
   import { toaster } from '$lib/stores/toaster';
   import { temporalVersion } from '$lib/stores/versions';
-  import type { NamespaceListItem, NavLinkListItem } from '$lib/types/global';
+  import {
+    isNavLinkItem,
+    type NamespaceListItem,
+    type NavLinkListItem,
+  } from '$lib/types/global';
   import { setCoreContext } from '$lib/utilities/core-context';
   import DarkMode from '$lib/utilities/dark-mode';
   import {
@@ -195,6 +200,19 @@
 
   let routes = $derived(getRoutes(activeNamespaceName));
   let linkList = $derived(getLinkList(routes, !!$inProgressBatchOperation));
+  let linkListForFirstGroup = $derived(
+    linkList
+      .slice(
+        0,
+        linkList.findIndex((item) => 'divider' in item),
+      )
+      .filter(isNavLinkItem),
+  );
+  let linkListForSecondGroup = $derived(
+    linkList
+      .slice(linkList.findIndex((item) => 'divider' in item) + 1)
+      .filter(isNavLinkItem),
+  );
   let {
     workflowsRoute,
     schedulesRoute,
@@ -276,6 +294,11 @@
   />
   <div class="sticky top-0 z-30 hidden h-screen w-auto md:block">
     <SideNavigation {linkList} {isCloud}>
+      {#snippet navContent()}
+        <NavGroup navItems={linkListForFirstGroup} />
+        <hr class="my-4 border-subtle group-data-[nav=closed]:hidden" />
+        <NavGroup navItems={linkListForSecondGroup} />
+      {/snippet}
       {#snippet bottom()}
         {#if !isCloud}
           <NavigationItem