From 174dc034cc9f0e1eb66cc45c53608f83a233b206 Mon Sep 17 00:00:00 2001
From: Yanni Guemar <yanni@caido.io>
Date: Tue, 27 Oct 2026 08:53:32 -0400
Subject: [PATCH 1/2] Added an download link in the top nav bar

---
 .vitepress/config.mts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index bc7515f6..16ffdeb5 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -95,6 +95,14 @@ export default defineConfig({
           activeMatch: "^/faq(/|$)",
         },
       },
+      {
+        component: "NavItem",
+        props: {
+          text: "Download",
+          link: "https://www.caido.io/download?utm_source=docs&utm_medium=nav",
+          activeMatch: "^$",
+        },
+      },
     ] satisfies DefaultTheme.NavItem[],
 
     sidebar: {

From 05669f854ff60defc1a3da53977608a6ef4b3ee0 Mon Sep 17 00:00:00 2001
From: Yanni Guemar <yanni@caido.io>
Date: Tue, 3 Nov 2026 09:26:09 -0500
Subject: [PATCH 2/2] Added styling for the Download button (Let me know if
 anything looks off I used AI to help with the styling)

---
 .vitepress/components/NavItem.vue | 39 +++++++++++++++++++++++++++++--
 .vitepress/config.mts             |  2 ++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/.vitepress/components/NavItem.vue b/.vitepress/components/NavItem.vue
index d2f8dd3a..6cbfec37 100644
--- a/.vitepress/components/NavItem.vue
+++ b/.vitepress/components/NavItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from "vitepress";
 import { computed, inject, ref } from "vue";
+import Icon from "./Icon.vue";
 
 const props = defineProps<{
   text: string;
@@ -8,6 +9,8 @@ const props = defineProps<{
   activeMatch: string;
   items?: { text: string; link: string }[];
   screenMenu?: boolean;
+  button?: boolean;
+  icon?: string;
 }>();
 
 const route = useRoute();
@@ -38,8 +41,9 @@ function isChildActive(link: string) {
   <a
     v-if="!screenMenu"
     :href="props.link"
-    :class="['VPNavBarMenuLink', { active: isActive }]"
+    :class="['VPNavBarMenuLink', { active: isActive, 'nav-button': props.button }]"
   >
+    <Icon v-if="props.icon" :icon="props.icon" aria-hidden="true" />
     <span>{{ props.text }}</span>
   </a>
 
@@ -48,9 +52,10 @@ function isChildActive(link: string) {
     v-else-if="!props.items"
     :href="props.link"
     class="VPNavBarMenuLink mobile-nav-single-link"
-    :class="{ active: isActive }"
+    :class="{ active: isActive, 'nav-button': props.button }"
     @click="closeScreen?.()"
   >
+    <Icon v-if="props.icon" :icon="props.icon" aria-hidden="true" />
     <span>{{ props.text }}</span>
   </a>
 
@@ -207,4 +212,34 @@ function isChildActive(link: string) {
 .mobile-nav-link.active {
   color: var(--vp-c-brand-1);
 }
+
+.VPNavBarMenuLink.nav-button {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  gap: 8px;
+  margin: 0 12px;
+  padding: 8px 14px;
+  border: none;
+  border-radius: 6px;
+  background-color: var(--vp-c-brand-3);
+  color: #fff;
+  line-height: 20px;
+  white-space: nowrap;
+  transition: background-color 0.2s;
+}
+
+.VPNavBarMenuLink.nav-button:hover {
+  background-color: var(--vp-c-brand-2);
+  color: #fff;
+}
+
+.VPNavBarMenuLink.nav-button:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 3px;
+}
+
+.VPNavBarMenuLink.nav-button.mobile-nav-single-link {
+  margin: 12px 0;
+}
 </style>
diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index 16ffdeb5..6fb18a55 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -101,6 +101,8 @@ export default defineConfig({
           text: "Download",
           link: "https://www.caido.io/download?utm_source=docs&utm_medium=nav",
           activeMatch: "^$",
+          button: true,
+          icon: "download",
         },
       },
     ] satisfies DefaultTheme.NavItem[],