Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add badge to mobile nav

Browse Source
This commit is contained in:
zernonia 2023-12-05 20:57:49 +08:00
parent 77e0e62d4d
commit 738d48466e
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/www/.vitepress/theme/components/MobileNav.vue
View File

@ -5,6 +5,7 @@ import Logo from './Logo.vue'
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet' import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
import { Button } from '@/lib/registry/default/ui/button' import { Button } from '@/lib/registry/default/ui/button'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area' import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import { Badge } from '@/lib/registry/default/ui/badge'
import ViewVerticalIcon from '~icons/radix-icons/view-vertical' import ViewVerticalIcon from '~icons/radix-icons/view-vertical'
const open = ref(false) const open = ref(false)
@ -36,17 +37,26 @@ const open = ref(false)
</div> </div>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<div v-for="(items, index) in docsConfig.sidebarNav" :key="index" class="flex flex-col space-y-3 pt-6"> <div v-for="(items, index) in docsConfig.sidebarNav" :key="index" class="flex flex-col space-y-3 pt-6">
<div class="flex items-center">
<h4 class="font-medium"> <h4 class="font-medium">
{{ items.title }} {{ items.title }}
</h4> </h4>
<Badge v-if="items.label" class="ml-2">
{{ items.label }}
</Badge>
</div>
<a <a
v-for="item in items.items" :key="item.href" v-for="item in items.items" :key="item.href"
:href="item.href" :href="item.href"
class="text-muted-foreground" class="text-muted-foreground inline-flex items-center"
@click="open = false" @click="open = false"
> >
{{ item.title }} {{ item.title }}
<Badge v-if="item.label" class="ml-2">
{{ item.label }}
</Badge>
</a> </a>
</div> </div>
</div> </div>