GrBottomNav

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrAvatar, GrBottomNav, GrSegmented } from '@feugene/granularity'
import type { GrComponentSize } from '@feugene/granularity'

const section = ref('chats')
const size = ref<GrComponentSize>('md')

const sizes = [
  { value: 'xs', label: 'XS' },
  { value: 'sm', label: 'SM' },
  { value: 'md', label: 'MD' },
  { value: 'lg', label: 'LG' },
]

const items = [
  { label: 'Chats', value: 'chats', icon: 'i-lucide-message-circle', badge: 5 },
  { label: 'Calls', value: 'calls', icon: 'i-lucide-phone' },
  { label: 'Ann Lee', value: 'me' },
]

// Забрав разметку пункта, размер глифа компонент за вас уже не считает.
const glyphClass = computed(() => ({ xs: 'h-4 w-4', sm: 'h-5 w-5', md: 'h-5 w-5', lg: 'h-6 w-6' })[size.value])
const avatarSize = computed(() => ({ xs: 20, sm: 24, md: 24, lg: 28 })[size.value])
</script>

<template>
  <div class="grid gap-4">
    <GrSegmented
      :model-value="size"
      :options="sizes"
      size="sm"
      class="justify-self-start"
      @update:model-value="size = $event as GrComponentSize"
    />

    <GrBottomNav
      v-model="section"
      :items="items"
      :size="size"
      position="static"
      hide-above="none"
    >
      <template #item="{ item, badgeLabel }">
        <GrAvatar
          v-if="item.value === 'me'"
          :size="avatarSize"
          alt="Ann Lee"
        >
          AL
        </GrAvatar>
        <span
          v-else-if="item.icon"
          :class="[item.icon, glyphClass]"
          class="block shrink-0"
          aria-hidden="true"
        />

        <span class="max-w-full truncate leading-none">{{ item.label }}</span>

        <template v-if="item.badge">
          <span
            class="absolute right-1 top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-[var(--gr-radius-full)] bg-[var(--gr-danger)] px-1 text-[length:var(--gr-text-2xs)] font-700 text-[var(--gr-danger-fg)]"
            aria-hidden="true"
          >{{ item.badge }}</span>
          <span class="sr-only">{{ badgeLabel }}</span>
        </template>
      </template>
    </GrBottomNav>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrBottomNav, GrCard } from '@feugene/granularity'

const currentSection = ref('overview')
const items = [
  { label: 'Overview', value: 'overview', icon: 'i-lucide-layout-dashboard' },
  { label: 'Invoices', value: 'invoices', icon: 'i-lucide-receipt', badge: 3 },
  { label: 'Team', value: 'team', icon: 'i-lucide-users' },
]

const activeLabel = computed(() => {
  return items.find(item => item.value === currentSection.value)?.label ?? 'Overview'
})
</script>

<template>
  <div class="grid gap-4">
    <GrCard class="p-4">
      <div class="text-sm text-[var(--gr-muted-fg)]">
        Active section
      </div>
      <div class="text-base font-semibold">
        {{ activeLabel }}
      </div>
    </GrCard>

    <GrBottomNav
      v-model="currentSection"
      :items="items"
      position="static"
      hide-above="none"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrBottomNav, GrButton, GrCard } from '@feugene/granularity'

const currentSection = ref('feed')
const items = [
  { label: 'Feed', value: 'feed', icon: 'i-lucide-newspaper' },
  { label: 'Tasks', value: 'tasks', icon: 'i-lucide-check-square', badge: 12 },
  { label: 'Billing', value: 'billing', icon: 'i-lucide-credit-card', disabled: true },
  { label: 'Profile', value: 'profile', icon: 'i-lucide-user' },
]
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap gap-2">
      <GrButton size="sm" variant="outline" @click="currentSection = 'feed'">
        Open feed
      </GrButton>
      <GrButton size="sm" variant="outline" @click="currentSection = 'tasks'">
        Jump to tasks
      </GrButton>
      <GrButton size="sm" variant="outline" @click="currentSection = 'profile'">
        Focus profile
      </GrButton>
    </div>

    <GrCard class="p-4">
      <div class="text-sm text-[var(--gr-muted-fg)]">
        `v-model` keeps the bottom navigation in sync with external actions, and a disabled
        destination stays visible without being reachable.
      </div>
      <div class="mt-2 text-base font-semibold capitalize">
        Current section: {{ currentSection }}
      </div>
    </GrCard>

    <GrBottomNav
      v-model="currentSection"
      :items="items"
      position="static"
      hide-above="none"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrBottomNav, GrCard } from '@feugene/granularity'

const currentSection = ref('approvals')
const items = [
  { label: 'Approvals', value: 'approvals', icon: 'i-lucide-check-check', href: '#approvals' },
  { label: 'Calendar', value: 'calendar', icon: 'i-lucide-calendar', href: '#calendar' },
  { label: 'Settings', value: 'settings', icon: 'i-lucide-settings', href: '#settings' },
]

const sectionDescriptions: Record<string, string> = {
  approvals: 'Items become real links, so a right click or “open in new tab” works as anywhere else.',
  calendar: 'The bar keeps the current destination announced as the current page, not just coloured.',
  settings: 'In a real app the bar is fixed to the bottom edge and hidden on wide screens by default.',
}

const sectionDescription = computed(() => {
  return sectionDescriptions[currentSection.value] ?? sectionDescriptions.approvals
})
</script>

<template>
  <div class="mx-auto grid max-w-80 gap-0 overflow-hidden rounded-3xl border border-[var(--gr-brd)]">
    <GrCard class="rounded-none border-0 p-4">
      <div class="text-base font-semibold capitalize">
        {{ currentSection }}
      </div>
      <div class="mt-1 text-sm text-[var(--gr-muted-fg)]">
        {{ sectionDescription }}
      </div>
    </GrCard>

    <GrBottomNav
      v-model="currentSection"
      :items="items"
      position="static"
      hide-above="none"
      aria-label="Mobile shell sections"
    />
  </div>
</template>