update components

src/lib/components/MainNav.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" context="module">
+    export type NavLink = {
+        label: string;
+        href?: string;
+        showBadge?: boolean;
+        submenu?: ComponentType;
+    };
+</script>
+
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { classNames } from '$lib/utils/classnames';
+
+    import { hasNewChangelog } from '$routes/changelog/utils';
+    import type { ComponentType } from 'svelte';
+    import ProductsSubmenu from './ProductsSubmenu.svelte';
+
+    export let initialized = false;
+
+    let navLinks: NavLink[] = [
+        {
+            label: 'Docs',
+            href: '/docs'
+        },
+        {
+            label: 'Community',
+            href: '/community'
+        },
+        {
+            label: 'Blog',
+            href: '/blog'
+        },
+        {
+            label: 'Products',
+            submenu: ProductsSubmenu
+        },
+        {
+            label: 'Integrations',
+            href: '/integrations'
+        },
+        {
+            label: 'Changelog',
+            href: '/changelog',
+            showBadge: hasNewChangelog?.() && !$page.url.pathname.includes('/changelog')
+        },
+        {
+            label: 'Pricing',
+            href: '/pricing'
+        }
+    ];
+</script>
+
+<nav class="web-main-header-nav" aria-label="Main">
+    <ul class="web-main-header-nav-list">
+        {#each navLinks as navLink}
+            <li class="web-main-header-nav-item text-primary hover:text-accent">
+                {#if navLink.submenu}
+                    <button
+                        class="web-main-header-nav-item-button"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        aria-controls="submenu"
+                        data-submenu-button
+                    >
+                        <svelte:component this={navLink.submenu} label={navLink.label} />
+                    </button>
+                {:else}
+                    <a
+                        class={classNames(
+                            'data-[badge]:after:animate-scale-in data-[badge]:relative data-[badge]:after:absolute data-[badge]:after:size-1.5 data-[badge]:after:translate-full data-[badge]:after:rounded-full'
+                        )}
+                        href={navLink.href}
+                        data-initialized={initialized ? '' : undefined}
+                        data-badge={navLink.showBadge ? '' : undefined}
+                        >{navLink.label}
+                    </a>
+                {/if}
+            </li>
+        {/each}
+    </ul>
+</nav>
+
+<style>
+    [data-badge] {
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            background-color: hsl(var(--color-accent));
+            border-radius: 100%;
+            width: 0.375rem;
+            height: 0.375rem;
+
+            inset-block-start: -2px;
+            inset-inline-end: -4px;
+            translate: 100%;
+        }
+
+        &:not([data-initialized])::after {
+            animation: scale-in 0.2s ease-out;
+        }
+    }
+</style>

src/lib/components/ProductsSubmenu.svelte

@@ -4,6 +4,8 @@
         elements: { menu, item, trigger }
     } = createDropdownMenu();
 
+    export let label: string;
+
     const products = [
         {
             name: 'Auth',
@@ -50,14 +52,14 @@
     ];
 </script>
 
-<li class="text-primary hover:text-accent" use:melt={$trigger}>Products</li>
+<li class="text-primary hover:text-accent" use:melt={$trigger}>{label}</li>
 <div class="fixed !left-0 z-10 size-full bg-black/48" use:melt={$menu}>
     <div
         class="flex h-[600px] w-full flex-col items-center bg-[#232325]/90 px-12 pb-4 backdrop-blur-2xl"
     >
         <div class="flex w-full flex-1 flex-col justify-center">
             <span class="font-aeonik-fono text-primary text-xs uppercase"
-                >Products<span class="text-accent">_</span></span
+                >{label}<span class="text-accent">_</span></span
             >
             <div
                 class="mt-8 grid w-full grid-cols-1 place-content-between gap-16 md:grid-cols-2 lg:grid-cols-4"

src/lib/layouts/Main.svelte

@@ -27,6 +27,7 @@
     import InitBanner from '$lib/components/InitBanner.svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import ProductsSubmenu from '$lib/components/ProductsSubmenu.svelte';
+    import MainNav from '$lib/components/MainNav.svelte';
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
@@ -240,24 +241,7 @@
                         width="130"
                     />
                 </a>
-                <nav class="web-main-header-nav" aria-label="Main">
-                    <ul class="web-main-header-nav-list">
-                        {#each navLinks as navLink}
-                            <li class="web-main-header-nav-item text-primary hover:text-accent">
-                                <a
-                                    class={classNames(
-                                        'data-[badge]:after:animate-scale-in data-[badge]:relative data-[badge]:after:absolute data-[badge]:after:size-1.5 data-[badge]:after:translate-full data-[badge]:after:rounded-full'
-                                    )}
-                                    href={navLink.href}
-                                    data-initialized={$initialized ? '' : undefined}
-                                    data-badge={navLink.showBadge ? '' : undefined}
-                                    >{navLink.label}
-                                </a>
-                            </li>
-                        {/each}
-                        <ProductsSubmenu />
-                    </ul>
-                </nav>
+                <MainNav initialized={$initialized} />
             </div>
             <div class="web-main-header-end">
                 <a