chore(VerticalNavigation): handle avatar

docs/pages/components/[component].vue

@@ -189,6 +189,10 @@ const defaultProps = {
         icon: 'heroicons-outline:external-link',
         to: 'https://google.fr',
         target: '_blank'
+      },
+      {
+        label: 'Logout',
+        avatar: 'https://github.com/benjamincanac.png'
       }
     ]
   },

src/runtime/components/navigation/VerticalNavigation.vue

@@ -11,6 +11,14 @@
       @click="link.click && link.click()"
       @keyup.enter="$event.target.blur()"
     >
+      <slot name="avatar" :link="link">
+        <Avatar
+          v-if="link.avatar"
+          :src="link.avatar"
+          :size="avatarSize"
+          :class="[avatarBaseClass, link.label && avatarSpacingClass, link.avatarClass]"
+        />
+      </slot>
       <slot name="icon" :link="link">
         <Icon
           v-if="link.icon"
@@ -33,6 +41,7 @@
 <script setup lang="ts">
 import Icon from '../elements/Icon'
 import Link from '../elements/Link'
+import Avatar from '../elements/Avatar'
 import $ui from '#build/ui'
 
 defineProps({
@@ -76,6 +85,18 @@ defineProps({
     type: String,
     default: () => $ui.verticalNavigation.icon.inactive
   },
+  avatarSize: {
+    type: String,
+    default: () => 'xs'
+  },
+  avatarBaseClass: {
+    type: String,
+    default: () => $ui.verticalNavigation.avatar.base
+  },
+  avatarSpacingClass: {
+    type: String,
+    default: () => $ui.verticalNavigation.avatar.spacing
+  },
   badgeBaseClass: {
     type: String,
     default: () => $ui.verticalNavigation.badge.base

src/runtime/presets/default.ts

@@ -275,6 +275,10 @@ const verticalNavigation = {
     active: 'u-text-gray-500',
     inactive: 'u-text-gray-400 group-hover:u-text-gray-500'
   },
+  avatar: {
+    base: 'flex-shrink-0',
+    spacing: '-ml-1 mr-3'
+  },
   badge: {
     base: 'ml-auto inline-block py-0.5 px-3 text-xs rounded-full',
     active: 'u-bg-white',