Add badge support to navigation and sidebar (#110)

.gitignore

@@ -4,3 +4,4 @@ dist
 TODOs.md
 .DS_Store
 demo/.vitepress/cache
+.idea

src/core/components/VTFlyout.vue

@@ -1,15 +1,17 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { MenuItem, MenuItemChild } from '../types/menu'
+import { MenuBadgeItem, MenuItem, MenuItemChild } from '../types/menu'
 import { useFocusContainer } from '../composables/FocusContainer'
 import VTIconChevronDown from './icons/VTIconChevronDown.vue'
 import VTIconMoreHorizontal from './icons/VTIconMoreHorizontal.vue'
 import VTMenu from './VTMenu.vue'
+import VTMenuBadge from './VTMenuBadge.vue'
 
 const props = defineProps<{
   button?: string
   items?: (MenuItem | MenuItemChild)[]
   label?: string
+  badge?: MenuBadgeItem
 }>()
 
 const open = ref(false)
@@ -40,6 +42,7 @@ useFocusContainer({
       <slot name="btn-slot">
         <span v-if="props.button" class="vt-flyout-button-text">
           {{ props.button }}
+          <VTMenuBadge v-if="badge" :item="badge" />
           <VTIconChevronDown class="vt-flyout-button-text-icon" />
         </span>
 

src/core/components/VTLink.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { MenuBadgeItem } from '../types/menu'
 import VTIconExternalLink from './icons/VTIconExternalLink.vue'
+import VTMenuBadge from './VTMenuBadge.vue'
 
 const props = defineProps<{
   href?: string
   noIcon?: boolean
+  badge?: MenuBadgeItem
 }>()
-
 const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
 </script>
 
@@ -20,6 +22,7 @@ const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
     :rel="isExternal ? 'noopener noreferrer' : undefined"
   >
     <slot />
+    <VTMenuBadge v-if="badge" :item="badge" />
     <VTIconExternalLink v-if="isExternal && !noIcon" class="vt-link-icon" />
   </component>
 </template>

src/core/components/VTMenuBadge.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { MenuBadgeItem } from '../../core'
+
+defineProps<{ item: MenuBadgeItem }>()
+</script>
+
+<template>
+  <span class="vt-menu-badge" :class="item.type">{{ item.text }}</span>
+</template>

src/core/components/VTMenuLink.vue

@@ -6,7 +6,7 @@ defineProps<{ item: MenuItemWithLink }>()
 </script>
 
 <template>
-  <VTLink class="vt-menu-link" :href="item.link">
+  <VTLink class="vt-menu-link" :href="item.link" :badge="item.badge">
     {{ item.text }}
   </VTLink>
 </template>

src/core/styles/index.css

@@ -10,6 +10,7 @@
 @import './vt-hamburger.css';
 @import './vt-link.css';
 @import './vt-menu.css';
+@import './vt-menu-badge.css';
 @import './vt-menu-group.css';
 @import './vt-menu-link.css';
 @import './vt-locales.css';

src/core/styles/vt-menu-badge.css

@@ -0,0 +1,35 @@
+.vt-menu-badge {
+  display: inline-block;
+  padding: 3.5px 4px;
+  margin-left: 6px;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: .2px;
+  border-radius: 6px;
+  background: var(--vt-c-blue);
+  color: var(--vt-c-white-soft);
+}
+
+.vt-menu-badge.secondary {
+  background: var(--vt-c-gray-light-5);
+  color: var(--vt-c-blue-dark);
+}
+
+.vt-menu-badge.success {
+  background: var(--vt-c-green);
+}
+
+.vt-menu-badge.info {
+  background: var(--vt-c-indigo-soft);
+}
+
+.vt-menu-badge.warning {
+  background: var(--vt-c-yellow-light);
+  color: var(--vt-c-black-soft);
+}
+
+.vt-menu-badge.danger {
+  background: var(--vt-c-red);
+}

src/core/types/menu.ts

@@ -3,6 +3,7 @@ export type MenuItem = MenuItemWithLink | MenuItemWithChildren
 export interface MenuItemWithLink {
   text: string
   link: string
+  badge?: MenuBadgeItem
 }
 
 export interface MenuItemWithChildren {
@@ -17,6 +18,11 @@ export interface MenuItemChildWithChildren {
   items: MenuItemWithLink[]
 }
 
+export interface MenuBadgeItem {
+  text: string
+  type?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger'
+}
+
 export type LocaleLinkItem = MenuItemWithLink & {
   repo?: string
   isTranslationsDesc?: boolean

src/vitepress/components/VPNavBarMenuGroup.vue

@@ -18,6 +18,7 @@ const { page } = useData()
       active: isActive(page.relativePath, item.activeMatch, true)
     }"
     :button="item.text"
+    :badge="item.badge"
     :items="item.items"
   />
 </template>

src/vitepress/components/VPNavBarMenuLink.vue

@@ -22,6 +22,7 @@ const { page } = useData()
       )
     }"
     :href="item.link"
+    :badge="item.badge"
     :noIcon="true"
   >
     {{ item.text }}

src/vitepress/components/VPNavScreenMenu.vue

@@ -12,11 +12,13 @@ const { config } = useConfig()
       <VPNavScreenMenuLink
         v-if="'link' in item"
         :text="item.text"
+        :badge="item.badge"
         :link="item.link"
       />
       <VPNavScreenMenuGroup
         v-else
         :text="item.text || ''"
+        :badge="item.badge"
         :items="item.items"
       />
     </template>

src/vitepress/components/VPNavScreenMenuGroup.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { VTIconPlus, MenuItemChild } from '../../core'
+import { VTIconPlus, MenuItemChild, MenuBadgeItem } from '../../core'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
+import VTMenuBadge from '../../core/components/VTMenuBadge.vue'
 
 const props = defineProps<{
   text: string
+  badge?: MenuBadgeItem
   items: MenuItemChild[]
 }>()
 
@@ -28,7 +30,10 @@ function toggle() {
       :aria-expanded="isOpen"
       @click="toggle"
     >
-      <span class="button-text">{{ text }}</span>
+      <div>
+        <span class="button-text">{{ text }}</span>
+        <VTMenuBadge v-if="badge" :item="badge" />
+      </div>
       <VTIconPlus class="button-icon" />
     </button>
 
@@ -38,6 +43,7 @@ function toggle() {
           <VPNavScreenMenuGroupLink
             :text="item.text"
             :link="item.link"
+            :badge="item.badge"
           />
         </div>
 

src/vitepress/components/VPNavScreenMenuGroupLink.vue

@@ -1,17 +1,18 @@
 <script lang="ts" setup>
-import { VTLink } from '../../core'
+import { VTLink, MenuBadgeItem } from '../../core'
 import { inject } from 'vue'
 
 defineProps<{
   text: string
   link: string
+  badge?: MenuBadgeItem
 }>()
 
 const closeScreen = inject('close-screen') as () => void
 </script>
 
 <template>
-  <VTLink class="VPNavScreenMenuGroupLink" :href="link" @click="closeScreen">
+  <VTLink class="VPNavScreenMenuGroupLink" :href="link" :badge="badge" @click="closeScreen">
     {{ text }}
   </VTLink>
 </template>

src/vitepress/components/VPNavScreenMenuGroupSection.vue

@@ -16,6 +16,7 @@ defineProps<{
       :key="item.text"
       :text="item.text"
       :link="item.link"
+      :badge="item.badge"
     />
   </div>
 </template>

src/vitepress/components/VPNavScreenMenuLink.vue

@@ -1,17 +1,18 @@
 <script lang="ts" setup>
-import { VTLink } from '../../core'
+import { MenuBadgeItem, VTLink } from '../../core'
 import { inject } from 'vue'
 
 defineProps<{
   text: string
   link: string
+  badge?: MenuBadgeItem
 }>()
 
 const closeScreen = inject('close-screen') as () => void
 </script>
 
 <template>
-  <VTLink class="VPNavScreenMenuLink" :href="link" @click="closeScreen">
+  <VTLink class="VPNavScreenMenuLink" :href="link" :badge="badge" @click="closeScreen">
     {{ text }}
   </VTLink>
 </template>

src/vitepress/components/VPSidebar.vue

@@ -35,7 +35,7 @@ watchPostEffect(async () => {
         config.i18n?.ariaSidebarNav ?? 'Sidebar Navigation'
       }}</span>
       <div v-for="group in sidebar" :key="group.text" class="group">
-        <VPSidebarGroup :text="group.text" :items="group.items" />
+        <VPSidebarGroup :text="group.text" :badge="group.badge" :items="group.items"/>
       </div>
       <slot name="bottom" />
     </nav>

src/vitepress/components/VPSidebarGroup.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { MenuItemWithLink } from '../../core'
+import { MenuItemWithLink, MenuBadgeItem } from '../../core'
 import VPSidebarLink from './VPSidebarLink.vue'
+import VTMenuBadge from '../../core/components/VTMenuBadge.vue'
 import { isActive } from '../support/utils'
 import { useData } from 'vitepress'
 
 const props = defineProps<{
   text: string
+  badge?: MenuBadgeItem
   items: MenuItemWithLink[]
 }>()
 
@@ -20,7 +22,7 @@ function hasActiveLink() {
   <section class="VPSidebarGroup">
     <div class="title">
       <h2 class="title-text" :class="{ active: hasActiveLink() }">
-        {{ text }}
+        {{ text }}<VTMenuBadge v-if="badge" :item="badge" />
       </h2>
     </div>
 

src/vitepress/components/VPSidebarLink.vue

@@ -2,6 +2,7 @@
 import { useData } from 'vitepress'
 import { ref, inject, onMounted, watchPostEffect } from 'vue'
 import { MenuItemWithLink } from '../../core'
+import VTMenuBadge from '../../core/components/VTMenuBadge.vue'
 import { isActive } from '../support/utils'
 
 const props = defineProps<{
@@ -26,7 +27,9 @@ watchPostEffect(updateActive)
     :href="item.link"
     @click="closeSideBar"
   >
-    <p class="link-text">{{ item.text }}</p>
+    <p class="link-text">
+      {{ item.text }}<VTMenuBadge v-if="item.badge" :item="item.badge" />
+    </p>
   </a>
 </template>
 

src/vitepress/config.ts

@@ -2,6 +2,7 @@ import {
   LocaleLinkItem,
   MenuItemChildWithChildren,
   MenuItemWithLink,
+  MenuBadgeItem,
   SocialLink
 } from '../core'
 
@@ -157,6 +158,7 @@ export type NavItemWithLink = MenuItemWithLink & {
 export interface NavItemWithChildren {
   text?: string
   activeMatch?: string
+  badge?: MenuBadgeItem
   items: (NavItemWithLink | MenuItemChildWithChildren)[]
 }
 
@@ -168,6 +170,7 @@ export interface MultiSidebarConfig {
 
 export interface SidebarGroup {
   text: string
+  badge?: MenuBadgeItem
   items: MenuItemWithLink[]
 }