Mobile navbar

.vitepress/components/NavItem.vue

@@ -0,0 +1,210 @@
+<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 -->
+  <a
+    v-if="!screenMenu"
+    :href="props.link"
+    :class="['VPNavBarMenuLink', { active: isActive }]"
+  >
+    <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
+    class="VPNavScreenMenuGroup mobile-nav-group"
+    :class="{ open: isOpen }"
+  >
+    <button
+      type="button"
+      class="button"
+      :class="{ active: isActive }"
+      :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;
+}
+
+.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;
+  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: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);
+}
+
+.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>

.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;

.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,31 @@ 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,
+        },
+      },
+      {
+        component: "NavItem",
+        props: {
+          text: "FAQ",
+          link: "/faq/",
+          activeMatch: "^/faq(/|$)",
+        },
       },
-      { text: "Dashboard", link: "/dashboard/quickstart/", activeMatch: "^/dashboard(/|$)" },
-      { text: "FAQ", link: "/faq", activeMatch: "^/faq(/|$)" },
     ] satisfies DefaultTheme.NavItem[],
 
     sidebar: {

.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/" },

.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/" },

.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);
 }

.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);
   },