fix(NavigationMenu): highlight border on children only with `vertical…

…` orientation
nuxt · Dec 17, 2024 · e931880 · e931880
1 parent 82d6344
commit e931880
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 100 deletions.
diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md
@@ -152,7 +152,6 @@ props:
   items:
     - - label: Guide
         icon: i-lucide-book-open
-        defaultOpen: true
         children:
           - label: Introduction
             description: Fully styled and customizable components for Nuxt.
@@ -190,7 +189,9 @@ props:
             to: /composables/use-toast
       - label: Components
         icon: i-lucide-box
+        to: /components
         active: true
+        defaultOpen: true
         children:
           - label: Link
             icon: i-lucide-file-text
@@ -240,10 +241,10 @@ Use the `highlight-color` prop to change the color of the border. It defaults to
 
 ::component-code
 ---
+collapse: true
 prettier: true
 ignore:
   - items
-  - highlight
   - class
 external:
   - items
@@ -254,25 +255,89 @@ props:
   items:
     - - label: Guide
         icon: i-lucide-book-open
-        to: /getting-started
+        children:
+          - label: Introduction
+            description: Fully styled and customizable components for Nuxt.
+            icon: i-lucide-house
+          - label: Installation
+            description: Learn how to install and configure Nuxt UI in your application.
+            icon: i-lucide-cloud-download
+          - label: 'Icons'
+            icon: 'i-lucide-smile'
+            description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+          - label: 'Colors'
+            icon: 'i-lucide-swatch-book'
+            description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
+          - label: 'Theme'
+            icon: 'i-lucide-cog'
+            description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
       - label: Composables
         icon: i-lucide-database
-        to: /composables
+        children:
+          - label: defineShortcuts
+            icon: i-lucide-file-text
+            description: Define shortcuts for your application.
+            to: /composables/define-shortcuts
+          - label: useModal
+            icon: i-lucide-file-text
+            description: Display a modal within your application.
+            to: /composables/use-modal
+          - label: useSlideover
+            icon: i-lucide-file-text
+            description: Display a slideover within your application.
+            to: /composables/use-slideover
+          - label: useToast
+            icon: i-lucide-file-text
+            description: Display a toast within your application.
+            to: /composables/use-toast
       - label: Components
         icon: i-lucide-box
         to: /components
         active: true
+        defaultOpen: true
+        children:
+          - label: Link
+            icon: i-lucide-file-text
+            description: Use NuxtLink with superpowers.
+            to: /components/link
+          - label: Modal
+            icon: i-lucide-file-text
+            description: Display a modal within your application.
+            to: /components/modal
+          - label: NavigationMenu
+            icon: i-lucide-file-text
+            description: Display a list of links.
+            to: /components/navigation-menu
+          - label: Pagination
+            icon: i-lucide-file-text
+            description: Display a list of pages.
+            to: /components/pagination
+          - label: Popover
+            icon: i-lucide-file-text
+            description: Display a non-modal dialog that floats around a trigger element.
+            to: /components/popover
+          - label: Progress
+            icon: i-lucide-file-text
+            description: Show a horizontal bar to indicate task progression.
+            to: /components/progress
     - - label: GitHub
         icon: i-simple-icons-github
         badge: 3.8k
         to: https://github.com/nuxt/ui
         target: _blank
-  class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]'
+      - label: Help
+        icon: i-lucide-circle-help
+        disabled: true
+  class: 'data-[orientation=horizontal]:border-b border-[var(--ui-border)] data-[orientation=vertical]:w-48'
 ---
 ::
 
 ::note
-In this example, the `border-l` and `border-b` classes are applied to display a border, this is not done by default to let you have a clean slate to work with.
+In this example, the `border-b` class is applied to display a border in `horizontal` orientation, this is not done by default to let you have a clean slate to work with.
+::
+
+::caution
+In `vertical` orientation, the `highlight` prop only highlights the border of active children.
 ::
 
 ### Color

diff --git a/playground/app/pages/components/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue
@@ -16,7 +16,6 @@ const items = [
     label: 'Documentation',
     icon: 'i-lucide-book-open',
     badge: 10,
-    defaultOpen: true,
     children: [{
       label: 'Introduction',
       description: 'Fully styled and customizable components for Nuxt.',
@@ -38,6 +37,7 @@ const items = [
     label: 'Components',
     icon: 'i-lucide-box',
     active: true,
+    defaultOpen: true,
     children: [{
       label: 'Link',
       icon: 'i-lucide-file',
@@ -101,7 +101,8 @@ const items = [
       :orientation="orientation"
       :highlight="highlight"
       :highlight-color="highlightColor"
-      :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-s border-[var(--ui-border)]'"
+      :class="highlight && 'data-[orientation=horizontal]:border-b border-[var(--ui-border)]'"
+      class="data-[orientation=vertical]:w-48"
     />
   </div>
 </template>
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
@@ -231,8 +231,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
               :disabled="item.disabled"
               @select="item.onSelect"
             >
-              <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active, disabled: !!item.disabled })">
-                <ReuseItemTemplate :item="(item as T)" :active="active" :index="index" />
+              <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: !(orientation === 'vertical' && item.children?.length) })">
+                <ReuseItemTemplate :item="(item as T)" :active="active || item.active" :index="index" />
               </ULinkBase>
             </component>
 
@@ -269,7 +269,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <ULinkBase v-bind="childSlotProps" :class="ui.link({ class: [props.ui?.link, childItem.class], active: childActive, disabled: !!childItem.disabled })">
+                    <ULinkBase v-bind="childSlotProps" :class="ui.link({ class: [props.ui?.link, childItem.class], active: childActive, disabled: !!childItem.disabled, level: true })">
                       <ReuseItemTemplate :item="(childItem as T)" :active="childActive" :index="childIndex" />
                     </ULinkBase>
                   </NavigationMenuLink>

diff --git a/src/theme/navigation-menu.ts b/src/theme/navigation-menu.ts
@@ -83,21 +83,24 @@ export default (options: Required<ModuleOptions>) => ({
     },
     highlight: {
       true: ''
+    },
+    level: {
+      true: ''
     }
   },
   compoundVariants: [{
-    highlight: true,
     orientation: 'horizontal',
+    highlight: true,
     class: {
       item: '-mb-px',
-      link: 'after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full'
+      link: ['after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full', options.theme.transitions && 'after:transition-colors']
     }
   }, {
-    highlight: true,
     orientation: 'vertical',
+    highlight: true,
+    level: true,
     class: {
-      item: 'px-1.5 -ms-px',
-      link: 'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
+      link: ['after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full', options.theme.transitions && 'after:transition-colors']
     }
   }, {
     disabled: false,
@@ -130,15 +133,15 @@ export default (options: Required<ModuleOptions>) => ({
     active: true,
     class: {
       link: `text-[var(--ui-${color})]`,
-      linkLeadingIcon: `text-[var(--ui-${color})]`
+      linkLeadingIcon: `text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
     }
   })), {
     color: 'neutral',
     variant: 'pill',
     active: true,
     class: {
       link: 'text-[var(--ui-text-highlighted)]',
-      linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
+      linkLeadingIcon: 'text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]'
     }
   }, {
     variant: 'pill',
@@ -168,26 +171,28 @@ export default (options: Required<ModuleOptions>) => ({
     active: true,
     class: {
       link: `text-[var(--ui-${color})]`,
-      linkLeadingIcon: `text-[var(--ui-${color})]`
+      linkLeadingIcon: `text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
     }
   })), {
     color: 'neutral',
     variant: 'link',
     active: true,
     class: {
       link: 'text-[var(--ui-text-highlighted)]',
-      linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
+      linkLeadingIcon: 'text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]'
     }
   }, ...(options.theme.colors || []).map((highlightColor: string) => ({
     highlightColor,
     highlight: true,
+    level: true,
     active: true,
     class: {
       link: `after:bg-[var(--ui-${highlightColor})]`
     }
   })), {
     highlightColor: 'neutral',
     highlight: true,
+    level: true,
     active: true,
     class: {
       link: 'after:bg-[var(--ui-bg-inverted)]'