feat: add header-nav-before-modules slot

Author: onmax

docs/vitepress-theme/index.md

@@ -325,6 +325,45 @@ copyOptions: source-only  # Show only "View Source" button
 ---
 ```
 
+## Custom Header Slot
+
+The theme provides a slot in the header navigation to add custom content between the search bar and modules dropdown. This is useful for adding custom navigation items, buttons, or other elements.
+
+To use this slot, create a custom theme file:
+
+```ts [.vitepress/theme/index.ts]
+import { defineNimiqThemeConfig } from 'nimiq-vitepress-theme/theme'
+import CustomHeaderNav from './CustomHeaderNav.vue'
+
+export default defineNimiqThemeConfig({
+  Layout() {
+    return {
+      'header-nav-before-modules': CustomHeaderNav
+    }
+  }
+})
+```
+
+Then create your custom component:
+
+```vue [.vitepress/theme/CustomHeaderNav.vue]
+<template>
+  <a
+    href="https://example.com"
+    target="_blank"
+    flex="~ items-center gap-8"
+    f-px-2xs py-4 f-rounded-xs
+    bg="transparent hocus:neutral-200"
+    transition-colors
+  >
+    <div i-tabler:external-link />
+    <span f-text-sm font-medium>Docs</span>
+  </a>
+</template>
+```
+
+The slot is only visible on desktop in the home layout.
+
 ## Customization
 
 This theme **has not been developed with customatization in mind**. In fact, it has the least possible amount of options on purpose as we want to keep it simple.

packages/nimiq-vitepress-theme/src/layout/DesktopHeader.vue

@@ -45,6 +45,9 @@ const moduleCards = computed(() => {
       <!-- Search -->
       <CommandMenu w-full min-w-320 />
 
+      <!-- Custom slot between search and modules -->
+      <slot name="header-nav-before-modules" />
+
       <!-- Modules Dropdown -->
       <CollapsibleRoot v-model:open="isModulesDropdownOpen" relative>
         <CollapsibleTrigger

packages/nimiq-vitepress-theme/src/layout/Layout.vue

@@ -42,7 +42,11 @@ const isMobileOrTablet = breakpoints.smaller('lg')
       <MobileNav fixed bottom-0 />
     </template>
     <template v-else>
-      <DesktopHeader />
+      <DesktopHeader>
+        <template #header-nav-before-modules>
+          <slot name="header-nav-before-modules" />
+        </template>
+      </DesktopHeader>
       <Content f-pt-xl />
     </template>
   </div>