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

docs(app): improve aside navigation (#2875)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
2024-12-11 11:15:05 +01:00
committed by GitHub
parent d8d56d909b
commit efd104a10f
5 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/app/components/FrameworkSelect.vue
View File

@@ -18,6 +18,7 @@ onMounted(() => {
indicator: 'bg-[var(--ui-bg)]',
trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]'
}"
size="sm"
@update:model-value="(framework = $event as string)"
/>
</template>

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

@@ -76,15 +76,22 @@ defineShortcuts({
<USeparator type="dashed" class="mt-4 mb-6" />
<div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] mb-5.5 -mx-2.5">
<ModuleSelect />
<FrameworkSelect />
<ModuleSelect />
</div>
<UContentNavigation :navigation="navigation" highlight>
<template #link-title="{ link }">
{{ link.title }}
<span class="inline-flex items-center gap-0.5">
{{ link.title }}
<UIcon v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" name="i-lucide-codesandbox" class="size-[14px] ml-0.5 align-middle mb-[3px] text-(--ui-text-dimmed)" />
<sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
</span>
</template>
<template #link-trailing="{ link }">
<UBadge v-if="link.badge" variant="subtle" size="sm" color="neutral" class="rounded-[var(--ui-radius)] text-[9px] font-semibold uppercase">
{{ link.badge }}
</UBadge>
</template>
</UContentNavigation>
</template>

6
docs/app/components/ModuleSelect.vue
View File

@@ -14,7 +14,11 @@ onMounted(() => {
:items="modules"
:content="false"
color="neutral"
:ui="{ indicator: 'bg-[var(--ui-bg)]', trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]' }"
:ui="{
indicator: 'bg-[var(--ui-bg)]',
trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]'
}"
size="sm"
@update:model-value="(module = $event as string)"
/>
</template>

6
docs/app/composables/useSharedData.ts
View File

@@ -15,13 +15,13 @@ export function useSharedData() {
const module = useCookie('nuxt-ui-module', { default: () => 'ui' })
const modules = computed(() => [{
label: 'nuxt/ui',
label: 'UI',
icon: 'i-lucide-box',
value: 'ui',
onSelect: () => module.value = 'ui'
}, {
label: 'nuxt/ui-pro',
icon: 'i-lucide-codesandbox',
label: 'UI Pro',
icon: 'i-lucide-panels-top-left',
value: 'ui-pro',
disabled: framework.value === 'vue',
onSelect: () => module.value = 'ui-pro'

15
docs/app/layouts/docs.vue
View File

@@ -12,18 +12,23 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
<UPageAside>
<template #top>
<div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] -mx-2.5">
<ModuleSelect />
<FrameworkSelect />
<ModuleSelect />
</div>
</template>
<UContentNavigation :navigation="navigation" highlight>
<template #link-title="{ link }">
{{ link.title }}
<span class="inline-flex items-center gap-0.5">
{{ link.title }}
<UTooltip v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" text="Only available in nuxt/ui-pro" :content="{ side: 'right' }">
<UIcon name="i-lucide-codesandbox" class="size-[14px] ml-0.5 align-middle mb-[3px] text-(--ui-text-dimmed) hover:text-(--ui-text-muted) transition-colors" />
</UTooltip>
<sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
</span>
</template>
<template #link-trailing="{ link }">
<UBadge v-if="link.badge" variant="subtle" size="sm" color="neutral" class="rounded-[var(--ui-radius)] text-[9px] font-semibold uppercase">
{{ link.badge }}
</UBadge>
</template>
</UContentNavigation>
</UPageAside>