feat(local-nav): add :avatar and :description

docs/components/local-nav.md

@@ -72,6 +72,17 @@ const menu = [
 
 ## Types
 
+### `Avatar`
+
+The type of the `:avatar` prop.
+
+```ts
+interface Avatar {
+  image?: string | null
+  name?: string | null
+}
+```
+
 ### `Title`
 
 The type of the `:title` prop.
@@ -102,11 +113,27 @@ interface MenuItem {
 
 ```ts
 interface Props {
+  avatar?: Avatar
   title: Title[]
+  description?: string
   menu?: MenuItem[][]
 }
 ```
 
+### `:avatar`
+
+Add avatar image to the local nav.
+
+```ts
+interface Props {
+  avatar?: Avatar
+}
+```
+
+```vue-html
+<SLocalNav :title="[{ text: 'Page title' }]" />
+```
+
 ### `:title`
 
 The title of the page.
@@ -118,7 +145,27 @@ interface Props {
 ```
 
 ```vue-html
-<SLocalNav :title="[{ text: 'Page title' }]" />
+<SLocalNav
+  :avatar="{ image: 'path/to/image.jpg', name: 'John Doe' }"
+  :title="[{ text: 'Page title' }]"
+/>
+```
+
+### `description`
+
+Add description text under the title.
+
+```ts
+interface Props {
+  description?: string
+}
+```
+
+```vue-html
+<SLocalNav
+  :title="[{ text: 'Page title' }]"
+  description="Lorem ipsum..."
+/>
 ```
 
 ### `:menu`
@@ -132,5 +179,11 @@ interface Props {
 ```
 
 ```vue-html
-<SLocalNav :title="[{ text: 'Page title' }]" />
+<SLocalNav
+  :title="[{ text: 'Page title' }]"
+  :menu="[
+    { text: 'Menu item 1', link: '/menu1' },
+    { text: 'Menu item 2', link: '/menu2' }
+  ]"
+/>
 ```

lib/components/SLocalNav.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SLocalNavAvatar from './SLocalNavAvatar.vue'
+import SLocalNavDescription from './SLocalNavDescription.vue'
 import SLocalNavMenu, { type MenuItem } from './SLocalNavMenu.vue'
 import SLocalNavTitle, { type Title } from './SLocalNavTitle.vue'
 
 export type { Title, MenuItem }
 
+export interface Avatar {
+  image?: string | null
+  name?: string | null
+}
+
 const props = defineProps<{
+  avatar?: Avatar
   title: Title[]
+  description?: string
   menu?: MenuItem[][]
 }>()
 
@@ -20,7 +29,18 @@ const normalizedMenu = computed(() => {
 
 <template>
   <div class="SLocalNav" :class="{ 'has-menu': normalizedMenu }">
-    <SLocalNavTitle :title="title" />
+    <div class="title-bar">
+      <div v-if="avatar" class="title-bar-avatar">
+        <SLocalNavAvatar
+          :image="avatar.image"
+          :name="avatar.name"
+        />
+      </div>
+      <div class="title-bar-body">
+        <SLocalNavTitle :title="title" />
+        <SLocalNavDescription v-if="description" :text="description" />
+      </div>
+    </div>
     <SLocalNavMenu v-if="normalizedMenu" :menu="normalizedMenu" />
   </div>
 </template>
@@ -29,7 +49,7 @@ const normalizedMenu = computed(() => {
 .SLocalNav {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
   padding: 16px 24px;
   background-color: var(--c-bg-elv-2);
 
@@ -45,4 +65,10 @@ const normalizedMenu = computed(() => {
     padding-bottom: 0;
   }
 }
+
+.title-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
 </style>

lib/components/SLocalNavAvatar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import SAvatar from './SAvatar.vue'
+
+defineProps<{
+  image?: string | null
+  name?: string | null
+}>()
+</script>
+
+<template>
+  <div class="SLocalNavAvatar">
+    <SAvatar
+      size="fill"
+      :avatar="image"
+      :name="name"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SLocalNavAvatar {
+  width: 64px;
+  height: 64px;
+}
+</style>

lib/components/SLocalNavDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <div class="SLocalNavDescription">
+    {{ text }}
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SLocalNavDescription {
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-2);
+}
+</style>

stories/components/SLocalNav.02_Avatar.story.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import IconActivity from '@iconify-icons/ph/activity-bold'
+import IconCurrencyCircleDollar from '@iconify-icons/ph/currency-circle-dollar-bold'
+import IconGear from '@iconify-icons/ph/gear-bold'
+import SLocalNav from 'sefirot/components/SLocalNav.vue'
+
+const title = 'Components / SLocalNav / 02. Avatar'
+const docs = '/components/local-nav'
+
+const navAvatar = {
+  image: 'https://i.pravatar.cc/128?img=1',
+  name: 'Jane Doe'
+}
+
+const navTitle = [
+  { text: 'ABC Company', link: '#' },
+  { text: 'Series A' }
+]
+
+const navDescription = '@jane.doe'
+
+const navMenu = [
+  [
+    { icon: IconActivity, text: 'Overview', link: '#', active: true },
+    { icon: IconCurrencyCircleDollar, text: 'Payments', link: '#' }
+  ],
+  [
+    { icon: IconGear, text: 'Settings', link: '#' }
+  ]
+]
+</script>
+
+<template>
+  <Story :title="title" source="Not available" auto-props-disabled>
+    <Board :title="title" :docs="docs">
+      <SLocalNav
+        :avatar="navAvatar"
+        :title="navTitle"
+        :description="navDescription"
+        :menu="navMenu"
+      />
+    </Board>
+  </Story>
+</template>