Skip to content

Commit 7816dfa

Browse files
committed
feat: add header-nav-before-modules slot
1 parent 89a76d2 commit 7816dfa

File tree

3 files changed

+47
-1
lines changed

3 files changed

+47
-1
lines changed

docs/vitepress-theme/index.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,45 @@ copyOptions: source-only # Show only "View Source" button
325325
---
326326
```
327327

328+
## Custom Header Slot
329+
330+
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.
331+
332+
To use this slot, create a custom theme file:
333+
334+
```ts [.vitepress/theme/index.ts]
335+
import { defineNimiqThemeConfig } from 'nimiq-vitepress-theme/theme'
336+
import CustomHeaderNav from './CustomHeaderNav.vue'
337+
338+
export default defineNimiqThemeConfig({
339+
Layout() {
340+
return {
341+
'header-nav-before-modules': CustomHeaderNav
342+
}
343+
}
344+
})
345+
```
346+
347+
Then create your custom component:
348+
349+
```vue [.vitepress/theme/CustomHeaderNav.vue]
350+
<template>
351+
<a
352+
href="https://example.com"
353+
target="_blank"
354+
flex="~ items-center gap-8"
355+
f-px-2xs py-4 f-rounded-xs
356+
bg="transparent hocus:neutral-200"
357+
transition-colors
358+
>
359+
<div i-tabler:external-link />
360+
<span f-text-sm font-medium>Docs</span>
361+
</a>
362+
</template>
363+
```
364+
365+
The slot is only visible on desktop in the home layout.
366+
328367
## Customization
329368

330369
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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ const moduleCards = computed(() => {
4545
<!-- Search -->
4646
<CommandMenu w-full min-w-320 />
4747

48+
<!-- Custom slot between search and modules -->
49+
<slot name="header-nav-before-modules" />
50+
4851
<!-- Modules Dropdown -->
4952
<CollapsibleRoot v-model:open="isModulesDropdownOpen" relative>
5053
<CollapsibleTrigger

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,11 @@ const isMobileOrTablet = breakpoints.smaller('lg')
4242
<MobileNav fixed bottom-0 />
4343
</template>
4444
<template v-else>
45-
<DesktopHeader />
45+
<DesktopHeader>
46+
<template #header-nav-before-modules>
47+
<slot name="header-nav-before-modules" />
48+
</template>
49+
</DesktopHeader>
4650
<Content f-pt-xl />
4751
</template>
4852
</div>

0 commit comments

Comments
 (0)