srcdev-nuxt-components 9.1.0 → 9.1.1

package/app/components/02.molecules/navigation/site-navigation/stories/SiteNavigation.stories.ts

@@ -0,0 +1,335 @@
+import { ref, reactive, computed } from "vue";
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import SiteNavigationComponent from "../SiteNavigation.vue";
+import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+
+const meta: Meta<typeof SiteNavigationComponent> = {
+  title: "Molecules/SiteNavigation",
+  component: SiteNavigationComponent,
+  argTypes: {
+    navAlign: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+      description: "Horizontal alignment of the nav list",
+    },
+    navItemData: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    navAlign: "left",
+  },
+};
+
+export default meta;
+
+const navItemData: NavItemData = {
+  main: [
+    { text: "Home", href: "#" },
+    { text: "About", href: "#" },
+    { text: "Services", href: "#" },
+    { text: "Work", href: "#" },
+    { text: "Contact", href: "#" },
+  ],
+};
+
+type Theme = "light" | "dark";
+
+const themeDefaults: Record<
+  Theme,
+  {
+    indicatorColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+    linkActiveColor: string;
+    panelBg: string;
+    panelLinkColor: string;
+    burgerColor: string;
+    pageBg: string;
+  }
+> = {
+  dark: {
+    indicatorColor: "#c0847a",
+    linkColor: "#f0ece8",
+    linkHoverColor: "#e09890",
+    linkActiveColor: "#c0847a",
+    panelBg: "#1a1614",
+    panelLinkColor: "#f0ece8",
+    burgerColor: "#f0ece8",
+    pageBg: "#1a1614",
+  },
+  light: {
+    indicatorColor: "#b05a50",
+    linkColor: "#1a1614",
+    linkHoverColor: "#b05a50",
+    linkActiveColor: "#8c3a30",
+    panelBg: "#f5f2f0",
+    panelLinkColor: "#1a1614",
+    burgerColor: "#1a1614",
+    pageBg: "#f5f2f0",
+  },
+};
+
+const DefaultTemplate: StoryFn<typeof SiteNavigationComponent> = (args) => ({
+  components: { SiteNavigationComponent },
+  setup() {
+    const theme = ref<Theme>("dark");
+
+    const controls = reactive({ ...themeDefaults.dark });
+
+    const setTheme = (newTheme: Theme) => {
+      theme.value = newTheme;
+      Object.assign(controls, themeDefaults[newTheme]);
+    };
+
+    const navStyle = computed(() => ({
+      "--site-nav-decorator-indicator-color": controls.indicatorColor,
+      "--site-nav-link-color": controls.linkColor,
+      "--site-nav-link-hover-color": controls.linkHoverColor,
+      "--site-nav-link-active-color": controls.linkActiveColor,
+      "--site-nav-panel-bg": controls.panelBg,
+      "--site-nav-panel-link-color": controls.panelLinkColor,
+      "--site-nav-panel-decorator-indicator-color": controls.indicatorColor,
+      "--site-nav-burger-color": controls.burgerColor,
+      "--page-bg": controls.pageBg,
+      "margin-block": "3.6rem",
+    }));
+
+    const cssSnippet = computed(
+      () => `.your-selector {
+  /* Indicator */
+  --site-nav-decorator-indicator-color: ${controls.indicatorColor};
+
+  /* Horizontal nav links */
+  --site-nav-link-color: ${controls.linkColor};
+  --site-nav-link-hover-color: ${controls.linkHoverColor};
+  --site-nav-link-active-color: ${controls.linkActiveColor};
+
+  /* Mobile panel */
+  --site-nav-panel-bg: ${controls.panelBg};
+  --site-nav-panel-link-color: ${controls.panelLinkColor};
+  --site-nav-panel-decorator-indicator-color: ${controls.indicatorColor};
+
+  /* Burger */
+  --site-nav-burger-color: ${controls.burgerColor};
+}`
+    );
+
+    const copied = ref(false);
+    const copySnippet = async () => {
+      await navigator.clipboard.writeText(cssSnippet.value);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+    };
+
+    return { args, navItemData, theme, controls, setTheme, navStyle, cssSnippet, copied, copySnippet };
+  },
+  template: `
+    <div class="sb-sitenav-story">
+
+      <!-- Preview: simulated header bar -->
+      <div class="sb-sitenav-note">
+        Resize the browser window to see the navigation collapse into a burger menu.
+      </div>
+      <div class="sb-sitenav-header" :class="'theme-' + theme" :style="navStyle">
+        <div class="sb-sitenav-logo">LOGO</div>
+        <SiteNavigationComponent
+          :nav-item-data="navItemData"
+          :nav-align="args.navAlign"
+        />
+      </div>
+
+      <!-- Controls -->
+      <div class="sb-sitenav-playground">
+
+        <fieldset>
+          <legend>Theme</legend>
+          <div class="sb-control-row">
+            <label>Light / Dark</label>
+            <div class="sb-theme-toggle">
+              <button :class="{ active: theme === 'light' }" @click="setTheme('light')">Light</button>
+              <button :class="{ active: theme === 'dark' }" @click="setTheme('dark')">Dark</button>
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Indicator</legend>
+          <div class="sb-control-row">
+            <label for="sb-indicator-color">Indicator colour</label>
+            <input id="sb-indicator-color" v-model="controls.indicatorColor" type="color" />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Horizontal nav links</legend>
+          <div class="sb-control-row">
+            <label for="sb-link-color">Link colour</label>
+            <input id="sb-link-color" v-model="controls.linkColor" type="color" />
+          </div>
+          <div class="sb-control-row">
+            <label for="sb-link-hover-color">Hover colour</label>
+            <input id="sb-link-hover-color" v-model="controls.linkHoverColor" type="color" />
+          </div>
+          <div class="sb-control-row">
+            <label for="sb-link-active-color">Active colour</label>
+            <input id="sb-link-active-color" v-model="controls.linkActiveColor" type="color" />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Mobile panel</legend>
+          <div class="sb-control-row">
+            <label for="sb-panel-bg">Panel background</label>
+            <input id="sb-panel-bg" v-model="controls.panelBg" type="color" />
+          </div>
+          <div class="sb-control-row">
+            <label for="sb-panel-link-color">Panel link colour</label>
+            <input id="sb-panel-link-color" v-model="controls.panelLinkColor" type="color" />
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Burger</legend>
+          <div class="sb-control-row">
+            <label for="sb-burger-color">Burger colour</label>
+            <input id="sb-burger-color" v-model="controls.burgerColor" type="color" />
+          </div>
+        </fieldset>
+
+      </div>
+
+      <!-- CSS snippet -->
+      <div class="sb-css-snippet">
+        <div class="sb-css-snippet-header">
+          <strong>CSS Token Snippet</strong>
+          <button class="sb-copy-btn" @click="copySnippet">{{ copied ? 'Copied!' : 'Copy' }}</button>
+        </div>
+        <pre class="sb-css-snippet-code">{{ cssSnippet }}</pre>
+      </div>
+
+    </div>
+
+    <style>
+      .sb-sitenav-story {
+        font-size: 1.4rem;
+        display: grid;
+        gap: 2.4rem;
+        padding: 2.4rem;
+      }
+      .sb-sitenav-note {
+        font-size: 1.3rem;
+        color: #888;
+        font-style: italic;
+      }
+      .sb-sitenav-header {
+        display: flex;
+        align-items: center;
+        gap: 3.2rem;
+        padding: 1.2rem 2.4rem;
+        transition: background 300ms;
+        position: relative;
+        min-height: 6rem;
+        border-radius: 0.4rem;
+      }
+      .sb-sitenav-header.theme-dark {
+        background: var(--page-bg, #1a1614);
+        color-scheme: dark;
+      }
+      .sb-sitenav-header.theme-light {
+        background: var(--page-bg, #f5f2f0);
+        color-scheme: light;
+      }
+      .sb-sitenav-logo {
+        font-size: 1.8rem;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        flex-shrink: 0;
+        opacity: 0.5;
+      }
+      .sb-sitenav-header .site-navigation {
+        flex: 1;
+        min-width: 0;
+      }
+      .sb-sitenav-playground {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+        gap: 1.6rem;
+      }
+      .sb-sitenav-playground fieldset {
+        border: 1px solid #ccc;
+        border-radius: 0.4rem;
+        padding: 1.6rem;
+      }
+      .sb-sitenav-playground legend {
+        font-weight: bold;
+        padding: 0 0.8rem;
+        font-size: 1.4rem;
+      }
+      .sb-control-row {
+        display: grid;
+        grid-template-columns: 1fr 14rem;
+        gap: 1rem;
+        align-items: center;
+        padding: 0.5rem 0;
+        font-size: 1.3rem;
+      }
+      .sb-control-row input[type="color"] {
+        height: 3.2rem;
+        width: 100%;
+        padding: 0.2rem;
+        border: 1px solid #ccc;
+        border-radius: 0.2rem;
+        cursor: pointer;
+        background: transparent;
+      }
+      .sb-theme-toggle { display: flex; gap: 0.4rem; }
+      .sb-theme-toggle button {
+        padding: 0.4rem 1.6rem;
+        border: 1px solid #ccc;
+        border-radius: 0.2rem;
+        cursor: pointer;
+        background: transparent;
+        font-size: 1.3rem;
+        color: inherit;
+      }
+      .sb-theme-toggle button.active { background: #e0e0e0; font-weight: bold; }
+      .sb-css-snippet {
+        border: 1px solid #ccc;
+        border-radius: 0.4rem;
+        overflow: hidden;
+      }
+      .sb-css-snippet-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 1.6rem;
+        border-bottom: 1px solid #ccc;
+        font-size: 1.4rem;
+      }
+      .sb-css-snippet-code {
+        margin: 0;
+        padding: 1.6rem;
+        font-family: monospace;
+        font-size: 1.3rem;
+        line-height: 1.6;
+        overflow-x: auto;
+        white-space: pre;
+      }
+      .sb-copy-btn {
+        padding: 0.4rem 1.2rem;
+        border: 1px solid #ccc;
+        border-radius: 0.2rem;
+        cursor: pointer;
+        background: transparent;
+        font-size: 1.3rem;
+        color: inherit;
+      }
+      .sb-copy-btn:hover { background: #e0e0e0; }
+    </style>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = { navAlign: "left" };

package/app/components/02.molecules/navigation/site-navigation/tests/SiteNavigation.spec.ts

@@ -0,0 +1,328 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import SiteNavigation from "../SiteNavigation.vue";
+import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+
+// useResizeObserver (from @vueuse/core) requires ResizeObserver
+const mockResizeObserver = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.stubGlobal("ResizeObserver", mockResizeObserver);
+  // ⚠️ Do NOT call vi.unstubAllGlobals() in afterEach —
+  // it removes global stubs from vitest.setup.ts ($fetch, etc.)
+});
+
+const defaultNavItemData: NavItemData = {
+  main: [
+    { text: "Home", href: "/" },
+    { text: "About", href: "/about" },
+    { text: "Contact", href: "/contact" },
+  ],
+};
+
+describe("SiteNavigation", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a nav element as root", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
+  });
+
+  it("has aria-label on the nav", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Site navigation");
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── isLoaded ──────────────────────────────────────────────────────────────
+
+  it("applies is-loaded class after mounting", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    await nextTick();
+    expect(wrapper.classes()).toContain("is-loaded");
+  });
+
+  // ─── Nav list ──────────────────────────────────────────────────────────────
+
+  it("renders the nav list when not collapsed", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.find(".site-nav-list").exists()).toBe(true);
+  });
+
+  it("renders the correct number of nav items", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    // Filter out .nav-indicator-li elements injected by initNavDecorators
+    const items = wrapper.findAll(".site-nav-list li:not(.nav-indicator-li)");
+    expect(items.length).toBe(3);
+  });
+
+  it("renders item text correctly", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const links = wrapper.findAll(".site-nav-link");
+    expect(links[0]!.text()).toContain("Home");
+    expect(links[1]!.text()).toContain("About");
+    expect(links[2]!.text()).toContain("Contact");
+  });
+
+  it("renders item href correctly", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const links = wrapper.findAll(".site-nav-link");
+    expect(links[0]!.attributes("href")).toBe("/");
+    expect(links[1]!.attributes("href")).toBe("/about");
+    expect(links[2]!.attributes("href")).toBe("/contact");
+  });
+
+  it("applies cssName as class on the li element", async () => {
+    const navItemData: NavItemData = {
+      main: [{ text: "Home", href: "/", cssName: "is-active" }],
+    };
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData },
+    });
+    expect(wrapper.find(".site-nav-list li").classes()).toContain("is-active");
+  });
+
+  it("renders an icon when iconName is provided", async () => {
+    const navItemData: NavItemData = {
+      main: [{ text: "Home", href: "/", iconName: "heroicons:home" }],
+    };
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData },
+    });
+    // Icon renders with aria-hidden="true"
+    const firstItem = wrapper.find(".site-nav-list li:not(.nav-indicator-li)");
+    expect(firstItem.find("[aria-hidden='true']").exists()).toBe(true);
+  });
+
+  it("does not render an icon when iconName is not provided", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    const firstLink = wrapper.find(".site-nav-link");
+    expect(firstLink.find("[aria-hidden='true']").exists()).toBe(false);
+  });
+
+  it("renders external links with the correct href", async () => {
+    const navItemData: NavItemData = {
+      main: [{ text: "External", href: "https://example.com", isExternal: true }],
+    };
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData },
+    });
+    expect(wrapper.find(".site-nav-link").attributes("href")).toBe("https://example.com");
+  });
+
+  // ─── Alignment variants ────────────────────────────────────────────────────
+
+  it("applies site-navigation--left class by default", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.classes()).toContain("site-navigation--left");
+  });
+
+  it("applies site-navigation--center class when navAlign is center", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData, navAlign: "center" },
+    });
+    expect(wrapper.classes()).toContain("site-navigation--center");
+  });
+
+  it("applies site-navigation--right class when navAlign is right", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData, navAlign: "right" },
+    });
+    expect(wrapper.classes()).toContain("site-navigation--right");
+  });
+
+  // ─── styleClassPassthrough ─────────────────────────────────────────────────
+
+  it("applies styleClassPassthrough classes to the nav element", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: {
+        navItemData: defaultNavItemData,
+        styleClassPassthrough: ["custom-nav", "theme-dark"],
+      },
+    });
+    expect(wrapper.classes()).toContain("custom-nav");
+    expect(wrapper.classes()).toContain("theme-dark");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: {
+        navItemData: defaultNavItemData,
+        styleClassPassthrough: ["initial-class"],
+      },
+    });
+    expect(wrapper.classes()).toContain("initial-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
+    await nextTick();
+
+    expect(wrapper.classes()).toContain("updated-class");
+    expect(wrapper.classes()).not.toContain("initial-class");
+  });
+
+  // ─── Non-collapsed state (default in JSDOM — dimensions are all 0) ─────────
+
+  it("does not show the burger button when not collapsed", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.find(".site-nav-burger").exists()).toBe(false);
+  });
+
+  it("does not show the nav panel when not collapsed", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.find(".site-nav-panel").exists()).toBe(false);
+  });
+
+  it("does not have is-collapsed class when not collapsed", async () => {
+    const wrapper = await mountSuspended(SiteNavigation, {
+      props: { navItemData: defaultNavItemData },
+    });
+    expect(wrapper.classes()).not.toContain("is-collapsed");
+  });
+
+  // ─── Collapsed state ───────────────────────────────────────────────────────
+  // isCollapsed is driven by DOM layout measurements (scrollWidth > clientWidth).
+  // In JSDOM both values are 0 so we cannot trigger collapse via resize.
+  // Instead we force the state directly through the component's setup context.
+
+  describe("when collapsed", () => {
+    // setupState auto-unwraps refs — set the plain value directly
+    interface SiteNavSetup {
+      isCollapsed: boolean;
+      isMenuOpen: boolean;
+    }
+
+    async function mountCollapsed() {
+      const wrapper = await mountSuspended(SiteNavigation, {
+        props: { navItemData: defaultNavItemData },
+      });
+      const setup = (wrapper.vm as unknown as { $: { setupState: SiteNavSetup } }).$.setupState;
+      setup.isCollapsed = true;
+      await nextTick();
+      return { wrapper, setup };
+    }
+
+    it("applies is-collapsed class", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.classes()).toContain("is-collapsed");
+    });
+
+    it("hides the horizontal nav list", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-list").exists()).toBe(false);
+    });
+
+    it("shows the burger button", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-burger").exists()).toBe(true);
+    });
+
+    it("shows the nav panel", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-panel").exists()).toBe(true);
+    });
+
+    it("burger button has aria-expanded false when menu is closed", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-burger").attributes("aria-expanded")).toBe("false");
+    });
+
+    it("panel does not have is-open class when menu is closed", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-panel").classes()).not.toContain("is-open");
+    });
+
+    it("renders panel links matching main nav items", async () => {
+      const { wrapper } = await mountCollapsed();
+      const panelLinks = wrapper.findAll(".site-nav-panel-link");
+      expect(panelLinks.length).toBe(3);
+      expect(panelLinks[0]!.text()).toContain("Home");
+      expect(panelLinks[1]!.text()).toContain("About");
+      expect(panelLinks[2]!.text()).toContain("Contact");
+    });
+
+    it("toggles isMenuOpen on burger click", async () => {
+      const { wrapper, setup } = await mountCollapsed();
+      expect(setup.isMenuOpen).toBe(false);
+      await wrapper.find(".site-nav-burger").trigger("click");
+      expect(setup.isMenuOpen).toBe(true);
+      await wrapper.find(".site-nav-burger").trigger("click");
+      expect(setup.isMenuOpen).toBe(false);
+    });
+
+    it("applies menu-open class when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".site-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.classes()).toContain("menu-open");
+    });
+
+    it("burger has aria-expanded true when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".site-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".site-nav-burger").attributes("aria-expanded")).toBe("true");
+    });
+
+    it("panel has is-open class when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".site-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".site-nav-panel").classes()).toContain("is-open");
+    });
+
+    it("panel is inert when menu is closed", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-panel").attributes("inert")).toBeDefined();
+    });
+
+    it("panel is not inert when menu is open", async () => {
+      const { wrapper } = await mountCollapsed();
+      await wrapper.find(".site-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".site-nav-panel").attributes("inert")).toBeUndefined();
+    });
+
+    it("panel has aria-controls pointing to site-nav-panel", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-burger").attributes("aria-controls")).toBe("site-nav-panel");
+    });
+  });
+});

package/app/components/02.molecules/navigation/site-navigation/tests/__snapshots__/SiteNavigation.spec.ts.snap

@@ -0,0 +1,30 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SiteNavigation > renders correct HTML structure 1`] = `
+"<nav class="site-navigation site-navigation--left is-loaded" aria-label="Site navigation">
+  <ul class="site-nav-list" style="--_transition-duration: 0ms; --_x-active: 0px; --_width-active: NaN; --_x-hovered: 0px; --_width-hovered: NaN;">
+    <li class=""><a href="/" class="site-nav-link" data-nav-item="">
+        <!--v-if--> Home
+      </a></li>
+    <li class=""><a href="/about" class="site-nav-link" data-nav-item="">
+        <!--v-if--> About
+      </a></li>
+    <li class=""><a href="/contact" class="site-nav-link" data-nav-item="">
+        <!--v-if--> Contact
+      </a></li>
+    <li class="nav-indicator-li" aria-hidden="true" role="none">
+      <div class="nav__active-indicator"></div>
+    </li>
+    <li class="nav-indicator-li" aria-hidden="true" role="none">
+      <div class="nav__active"></div>
+    </li>
+    <li class="nav-indicator-li" aria-hidden="true" role="none">
+      <div class="nav__hovered"></div>
+    </li>
+  </ul>
+  <!--v-if-->
+  <!--teleport start-->
+  <!--teleport end-->
+  <!--v-if-->
+</nav>"
+`;