[Documentation Bug]: Navigation Menu Documentation code example is chopped up

[rezelute]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Reka UI version: 2.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://reka-ui.com/docs/components/navigation-menu

Steps to reproduce

Have a look at the docs here: https://reka-ui.com/docs/components/navigation-menu
Try flicking between Index.vue and NavigationMenuListItem.vue buttons. Initial load seems to show fine ..

Describe the bug

I was just trying to follow the examples below but they appear chopped up

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'reka-ui'
import './styles.css'

import NavigationMenuListItem from './NavigationMenuListItem.vue'

const currentTrigger = ref('')
</script>

<template>
  <
    v-model="currentTrigger"
    class="NavigationMenuRoot"
  >
    < class="NavigationMenuList">
      <>
        <
          class="NavigationMenuTrigger"
        >
          Learn
          <Icon
            icon="radix-icons:caret-down"
            class="CaretDown"
          />
        </>
        <
          class="NavigationMenuContent"
        >
          <ul class="List one">
            <li :style="{ gridRow: 'span 3' }">
              < as-child>
                <a
                  class="Callout"
                  href="/"
                >
                  <img src="https://reka-ui.com/logo.svg">
                  <div class="CalloutHeading">Reka UI</div>
                  <p class="CalloutText">Unstyled, accessible components for Vue.</p>
                </a>
              </>
            </li>

            <NavigationMenuListItem
              href="https://stitches.dev/"
              title="Stitches"
            >
              CSS-in-JS with best-in-class developer experience.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              href="/colors"
              title="Colors"
            >
              Beautiful, thought-out palettes with auto dark mode.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              href="https://lucide.dev/icons/"
              title="Icons"
            >
              A crisp set of 15x15 icons, balanced and consistent.
            </NavigationMenuListItem>
          </ul>
        </>
      </>

      <>
        <
          class="NavigationMenuTrigger"
        >
          Overview
          <Icon
            icon="radix-icons:caret-down"
            class="CaretDown"
          />
        </>
        < class="NavigationMenuContent">
          <ul class="List two">
            <NavigationMenuListItem
              title="Introduction"
              href="/docs/primitives/overview/introduction"
            >
              Build high-quality, accessible design systems and web apps.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Getting started"
              href="/docs/primitives/overview/getting-started"
            >
              A quick tutorial to get you up and running with Reka UI.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Styling"
              href="/docs/primitives/guides/styling"
            >
              Unstyled and compatible with any styling solution.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Animation"
              href="/docs/primitives/guides/animation"
            >
              Use CSS keyframes or any animation library of your choice.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Accessibility"
              href="/docs/primitives/overview/accessibility"
            >
              Tested in a range of browsers and assistive technologies.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Releases"
              href="/docs/primitives/overview/releases"
            >
              Reka UI releases and their changelogs.
            </NavigationMenuListItem>
          </ul>
        </>
      </>

      <>
        <
          class="NavigationMenuLink"
          href="https://github.com/unovue/reka-ui"
        >
          Github
        </>
      </>

      <
        class="NavigationMenuIndicator"
      >
        <div class="Arrow" />
      </>
    </>

    <div class="ViewportPosition">
      <
        class="NavigationMenuViewport"
      />
    </div>
  </>
</template>

and also NavigationMenuListItem.vue

<script setup lang="ts">
import { NavigationMenuLink } from 'reka-ui'

const props = defineProps({
  title: String,
})
</script>

<template>
  <li>
    < as-child>
      <a
        v-bind="$attrs"
        class="ListItemLink"
      >
        <div class="ListItemHeading">
          {{ props.title }}
        </div>
        <p class="ListItemText">
          <slot />
        </p>
      </a>
    </>
  </li>
</template>

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[zernonia]

Thanks for reporting the issue! Fixed 😁