feat(local-nav): add :avatar and :description (#526) (#527)

close #526
globalbrain · May 7, 2024 · 44be8d3 · 44be8d3
1 parent 0f8cb04
commit 44be8d3
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 4 deletions.
diff --git a/docs/components/local-nav.md b/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' }
+ ]"
+/>
 ```
diff --git a/lib/components/SLocalNav.vue b/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>
diff --git a/lib/components/SLocalNavAvatar.vue b/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>
diff --git a/lib/components/SLocalNavDescription.vue b/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>
diff --git a/stories/components/SLocalNav.02_Avatar.story.vue b/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>