arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 12:17:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(Header): responsive

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-24 23:10:24 +02:00
parent a61e7656c2
commit 5b3cda741c
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/app/components/Header.vue
View File

@@ -2,7 +2,7 @@
import type { NavItem } from '@nuxt/content' import type { NavItem } from '@nuxt/content'
import type { NavigationMenuItem } from '@nuxt/ui' import type { NavigationMenuItem } from '@nuxt/ui'
const props = defineProps<{ defineProps<{
links: NavigationMenuItem[] links: NavigationMenuItem[]
}>() }>()
@@ -10,16 +10,16 @@ const config = useRuntimeConfig().public
const navigation = inject<Ref<NavItem[]>>('navigation') const navigation = inject<Ref<NavItem[]>>('navigation')
const items = computed(() => props.links.map(({ icon, ...link }) => link)) // const items = computed(() => props.links.map(({ icon, ...link }) => link))
</script> </script>
<template> <template>
<UHeader> <UHeader :ui="{ left: 'min-w-0' }">
<template #left> <template #left>
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI"> <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white min-w-0" aria-label="Nuxt UI">
<Logo class="w-auto h-6" /> <Logo class="w-auto h-6 shrink-0" />
<UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded font-semibold" /> <UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded font-semibold truncate" />
</NuxtLink> </NuxtLink>
</template> </template>
@@ -45,9 +45,9 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
</template> </template>
<template #content> <template #content>
<UNavigationMenu orientation="vertical" :items="items" class="-ml-2.5" /> <!-- <UNavigationMenu orientation="vertical" :items="items" class="-ml-2.5" />
<USeparator type="dashed" class="my-4" /> <USeparator type="dashed" class="my-4" /> -->
<UContentNavigation :navigation="navigation" /> <UContentNavigation :navigation="navigation" />
</template> </template>