chore(HorizontalNavigation): handle truncate

This commit is contained in:
Benjamin Canac
2024-01-25 18:02:28 +01:00
parent 8c568b1a29
commit 2e1ef557b5
2 changed files with 3 additions and 2 deletions

View File

@@ -1,7 +1,7 @@
<template>
<nav :class="ui.wrapper" v-bind="attrs">
<ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`" :class="ui.container">
<li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`">
<li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`" :class="ui.inner">
<ULink
v-slot="{ isActive }"
v-bind="getULinkProps(link)"

View File

@@ -1,6 +1,7 @@
export default {
wrapper: 'relative w-full flex items-center justify-between',
container: 'flex items-center',
container: 'flex items-center min-w-0',
inner: 'min-w-0',
base: 'group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
before: 'before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
after: 'after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2',