From a072668326ac00f262cb4c320adfc370c0c91a65 Mon Sep 17 00:00:00 2001
From: Emile Fugulin <code@efugulin.com>
Date: Fri, 13 Feb 2026 13:36:31 -0500
Subject: [PATCH 1/2] Make navbar mobile friendly

---
 .vitepress/components/NavItem.vue | 168 ++++++++++++++++++++++++++++++
 .vitepress/components/Navbar.vue  |   7 ++
 .vitepress/config.mts             |  32 ++++--
 .vitepress/navbars/app.ts         |   2 +-
 .vitepress/navbars/dashboard.ts   |   2 +-
 .vitepress/theme/Layout.vue       |  14 ++-
 .vitepress/theme/index.ts         |   4 +-
 7 files changed, 215 insertions(+), 14 deletions(-)
 create mode 100644 .vitepress/components/NavItem.vue

diff --git a/.vitepress/components/NavItem.vue b/.vitepress/components/NavItem.vue
new file mode 100644
index 00000000..d7b1b7f9
--- /dev/null
+++ b/.vitepress/components/NavItem.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { useRoute } from "vitepress";
+import { computed, inject, ref } from "vue";
+
+const props = defineProps<{
+  text: string;
+  link: string;
+  activeMatch: string;
+  items: { text: string; link: string }[];
+  screenMenu?: boolean;
+}>();
+
+const route = useRoute();
+const closeScreen = inject<(() => void) | undefined>("close-screen");
+
+const isOpen = ref(false);
+
+const isActive = computed(() => {
+  const path = route.path;
+  const match = props.activeMatch;
+  try {
+    return new RegExp(match).test(path);
+  } catch {
+    return false;
+  }
+});
+
+function isChildActive(link: string) {
+  const path = route.path;
+  if (path === link) return true;
+  if (link.endsWith("/") && path.startsWith(link)) return true;
+  return false;
+}
+</script>
+
+<template>
+  <!-- Desktop: single link (same as VPNavBarMenuLink) -->
+  <a
+    v-if="!screenMenu"
+    :href="props.link"
+    :class="['VPNavBarMenuLink', { active: isActive }]"
+  >
+    <span>{{ props.text }}</span>
+  </a>
+
+  <!-- Mobile: expandable group with children -->
+  <div
+    v-else
+    class="VPNavScreenMenuGroup mobile-nav-group"
+    :class="{ open: isOpen }"
+  >
+    <button
+      type="button"
+      class="button"
+      :aria-expanded="isOpen"
+      @click="isOpen = !isOpen"
+    >
+      <span class="button-text">{{ props.text }}</span>
+      <span class="vpi-plus button-icon" />
+    </button>
+    <div class="items">
+      <a
+        v-for="item in props.items"
+        :key="item.link"
+        :href="item.link"
+        :class="['mobile-nav-link', { active: isChildActive(item.link) }]"
+        @click="closeScreen?.()"
+      >
+        {{ item.text }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPNavBarMenuLink {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  line-height: var(--vp-nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+  text-decoration: none;
+}
+
+.VPNavBarMenuLink.active {
+  color: var(--vp-c-brand-1);
+}
+
+.VPNavBarMenuLink:hover {
+  color: var(--vp-c-brand-1);
+}
+
+/* Mobile group (matches VPNavScreenMenuGroup) */
+.mobile-nav-group {
+  border-bottom: 1px solid var(--vp-c-divider);
+  height: 48px;
+  overflow: hidden;
+  transition: border-color 0.5s;
+}
+
+.mobile-nav-group .items {
+  visibility: hidden;
+}
+
+.mobile-nav-group.open .items {
+  visibility: visible;
+}
+
+.mobile-nav-group.open {
+  padding-bottom: 10px;
+  height: auto;
+}
+
+.mobile-nav-group.open .button {
+  padding-bottom: 6px;
+  color: var(--vp-c-brand-1);
+}
+
+.mobile-nav-group.open .button-icon {
+  transform: rotate(45deg);
+}
+
+.mobile-nav-group .button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 4px 11px 0;
+  width: 100%;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.mobile-nav-group .button:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.mobile-nav-group .button-icon {
+  transition: transform 0.25s;
+}
+
+.mobile-nav-link {
+  display: block;
+  margin-left: 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+  transition: color 0.25s;
+}
+
+.mobile-nav-link:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.mobile-nav-link.active {
+  color: var(--vp-c-brand-1);
+}
+</style>
diff --git a/.vitepress/components/Navbar.vue b/.vitepress/components/Navbar.vue
index 0e86f1ff..6def1572 100644
--- a/.vitepress/components/Navbar.vue
+++ b/.vitepress/components/Navbar.vue
@@ -89,6 +89,13 @@ const isActive = (link: string) => {
   border-bottom-color: var(--vp-c-brand-1);
 }
 
+/* Hide second navbar on mobile; section links are in the hamburger menu */
+@media (max-width: 960px) {
+  .second-navbar {
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
   .second-navbar-container {
     padding: 8px 16px;
diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index 37674b45..8b28779f 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -4,10 +4,8 @@ import llmstxt from "vitepress-plugin-llms";
 import type { DefaultTheme } from "vitepress";
 
 import MermaidExample from "./mermaid";
-import {
-  appSidebars,
-  dashboardSidebars,
-} from "./sidebars";
+import { appNavbar, dashboardNavbar } from "./navbars";
+import { appSidebars, dashboardSidebars } from "./sidebars";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -63,12 +61,28 @@ export default defineConfig({
 
     nav: [
       {
-        text: "Application",
-        link: "/app/quickstart/",
-        activeMatch: "^/app(/.*)?$",
+        component: "NavItem",
+        props: {
+          text: "Application",
+          link: "/app/quickstart/",
+          activeMatch: "^/app(/.*)?$",
+          items: appNavbar,
+        },
+      },
+      {
+        component: "NavItem",
+        props: {
+          text: "Dashboard",
+          link: "/dashboard/quickstart/",
+          activeMatch: "^/dashboard(/|$)",
+          items: dashboardNavbar,
+        },
+      },
+      {
+        text: "FAQ",
+        link: "/faq",
+        activeMatch: "^/faq(/|$)",
       },
-      { text: "Dashboard", link: "/dashboard/quickstart/", activeMatch: "^/dashboard(/|$)" },
-      { text: "FAQ", link: "/faq", activeMatch: "^/faq(/|$)" },
     ] satisfies DefaultTheme.NavItem[],
 
     sidebar: {
diff --git a/.vitepress/navbars/app.ts b/.vitepress/navbars/app.ts
index 96e7a09e..53e2ebd2 100644
--- a/.vitepress/navbars/app.ts
+++ b/.vitepress/navbars/app.ts
@@ -1,6 +1,6 @@
 import type { DefaultTheme } from "vitepress";
 
-export const appNavbar: DefaultTheme.NavItem[] = [
+export const appNavbar: DefaultTheme.NavItemWithLink[] = [
   { text: "Get Started", link: "/app/quickstart/" },
   { text: "How-to Guides", link: "/app/guides/" },
   { text: "Tutorials", link: "/app/tutorials/" },
diff --git a/.vitepress/navbars/dashboard.ts b/.vitepress/navbars/dashboard.ts
index fada4179..1cc2a41b 100644
--- a/.vitepress/navbars/dashboard.ts
+++ b/.vitepress/navbars/dashboard.ts
@@ -1,6 +1,6 @@
 import type { DefaultTheme } from "vitepress";
 
-export const dashboardNavbar: DefaultTheme.NavItem[] = [
+export const dashboardNavbar: DefaultTheme.NavItemWithLink[] = [
   { text: "Get Started", link: "/dashboard/quickstart/" },
   { text: "Guides", link: "/dashboard/guides/" },
   { text: "Concepts", link: "/dashboard/concepts/" },
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index 969d3b71..6fc2f9ad 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -12,15 +12,25 @@ const { Layout } = DefaultThemeComponent;
       <Navbar style="margin-top: -48px; margin-left: -32px; z-index: 1" />
     </template>
     <template #doc-before>
-      <div style="height: var(--vp-nav-height)" />
+      <div class="second-navbar-spacer" />
     </template>
     <template #aside-top>
-      <div style="height: var(--vp-nav-height)" />
+      <div class="second-navbar-spacer" />
     </template>
   </Layout>
 </template>
 
 <style scoped>
+.second-navbar-spacer {
+  height: var(--vp-nav-height);
+}
+
+@media (max-width: 960px) {
+  .second-navbar-spacer {
+    height: 0;
+  }
+}
+
 :deep(.VPHomeHero) h1.heading .text {
   color: var(--vp-c-text-1);
 }
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 282f6132..eee787b5 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -4,9 +4,10 @@ import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 
 import Icon from "../components/Icon.vue";
+import LabContainer from "../components/Lab.vue";
 import Mermaid from "../components/Mermaid.vue";
+import NavItem from "../components/NavItem.vue";
 import ProContainer from "../components/Pro.vue";
-import LabContainer from "../components/Lab.vue";
 
 import "./custom.css";
 import Layout from "./Layout.vue";
@@ -18,6 +19,7 @@ export default {
     library.add(fas);
     app.component("ProContainer", ProContainer);
     app.component("Mermaid", Mermaid);
+    app.component("NavItem", NavItem);
     app.component("Icon", Icon);
     app.component("LabContainer", LabContainer);
   },

From 858421572545c4bd4473f6b55647d1380484c7e5 Mon Sep 17 00:00:00 2001
From: Emile Fugulin <code@efugulin.com>
Date: Fri, 13 Feb 2026 13:53:24 -0500
Subject: [PATCH 2/2] Add single link support

---
 .vitepress/components/NavItem.vue | 50 ++++++++++++++++++++++++++++---
 .vitepress/config.mts             |  9 ++++--
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/.vitepress/components/NavItem.vue b/.vitepress/components/NavItem.vue
index d7b1b7f9..d2f8dd3a 100644
--- a/.vitepress/components/NavItem.vue
+++ b/.vitepress/components/NavItem.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
   text: string;
   link: string;
   activeMatch: string;
-  items: { text: string; link: string }[];
+  items?: { text: string; link: string }[];
   screenMenu?: boolean;
 }>();
 
@@ -34,7 +34,7 @@ function isChildActive(link: string) {
 </script>
 
 <template>
-  <!-- Desktop: single link (same as VPNavBarMenuLink) -->
+  <!-- Desktop: single link -->
   <a
     v-if="!screenMenu"
     :href="props.link"
@@ -43,6 +43,17 @@ function isChildActive(link: string) {
     <span>{{ props.text }}</span>
   </a>
 
+  <!-- Mobile: single link when no children -->
+  <a
+    v-else-if="!props.items"
+    :href="props.link"
+    class="VPNavBarMenuLink mobile-nav-single-link"
+    :class="{ active: isActive }"
+    @click="closeScreen?.()"
+  >
+    <span>{{ props.text }}</span>
+  </a>
+
   <!-- Mobile: expandable group with children -->
   <div
     v-else
@@ -52,6 +63,7 @@ function isChildActive(link: string) {
     <button
       type="button"
       class="button"
+      :class="{ active: isActive }"
       :aria-expanded="isOpen"
       @click="isOpen = !isOpen"
     >
@@ -116,13 +128,37 @@ function isChildActive(link: string) {
 
 .mobile-nav-group.open .button {
   padding-bottom: 6px;
-  color: var(--vp-c-brand-1);
 }
 
 .mobile-nav-group.open .button-icon {
   transform: rotate(45deg);
 }
 
+/* Only highlight button when a child is the current page */
+.mobile-nav-group .button.active {
+  color: var(--vp-c-brand-1);
+}
+
+.mobile-nav-single-link {
+  display: block;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding: 12px 0 11px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+  transition: color 0.25s;
+}
+
+.mobile-nav-single-link:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.mobile-nav-single-link.active {
+  color: var(--vp-c-brand-1);
+}
+
 .mobile-nav-group .button {
   display: flex;
   justify-content: space-between;
@@ -139,7 +175,13 @@ function isChildActive(link: string) {
   cursor: pointer;
 }
 
-.mobile-nav-group .button:hover {
+.mobile-nav-group .button:hover:not(.active),
+.mobile-nav-group .button:focus:not(.active) {
+  color: var(--vp-c-text-1);
+}
+
+.mobile-nav-group .button.active:hover,
+.mobile-nav-group .button.active:focus {
   color: var(--vp-c-brand-1);
 }
 
diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index 8b28779f..8052ffc3 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -79,9 +79,12 @@ export default defineConfig({
         },
       },
       {
-        text: "FAQ",
-        link: "/faq",
-        activeMatch: "^/faq(/|$)",
+        component: "NavItem",
+        props: {
+          text: "FAQ",
+          link: "/faq/",
+          activeMatch: "^/faq(/|$)",
+        },
       },
     ] satisfies DefaultTheme.NavItem[],