GrNavbar

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

import { GrAvatar, GrBadge, GrButton, GrNavbar } from '@feugene/granularity'

const notifications = ref(3)
</script>

<template>
  <!--
    GrNavbar — это ГЛОБАЛЬНЫЙ верхний хедер приложения (`<header>`-landmark),
    который тянется на всю ширину над маршрутизируемым контентом. Здесь он показан
    в контексте настоящего app-shell: хедер сверху + контент под ним.
    Не путайте с секционными заголовками страниц и marketing-навигацией.
  -->
  <div class="overflow-hidden rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-bg)] shadow-[var(--gr-shadow-1)]">
    <GrNavbar title="Acme Console">
      <GrButton size="sm" variant="ghost" square aria-label="Search">
        <span class="i-lucide-search block h-4 w-4" aria-hidden="true" />
      </GrButton>

      <GrButton size="sm" variant="ghost" square aria-label="Notifications" @click="notifications = 0">
        <span class="relative inline-flex">
          <span class="i-lucide-bell block h-4 w-4" aria-hidden="true" />
          <GrBadge v-if="notifications" size="xs" tone="danger" dark class="absolute -right-2 -top-2">
            {{ notifications }}
          </GrBadge>
        </span>
      </GrButton>

      <GrAvatar :size="28" alt="Ada Lovelace" />
    </GrNavbar>

    <!-- Условный контент приложения под хедером -->
    <div class="grid gap-3 p-5">
      <div class="h-3 w-40 rounded bg-[var(--gr-muted)]" />
      <div class="grid gap-2 sm:grid-cols-3">
        <div class="h-16 rounded-lg border border-[var(--gr-brd)] bg-[var(--gr-card)]" />
        <div class="h-16 rounded-lg border border-[var(--gr-brd)] bg-[var(--gr-card)]" />
        <div class="h-16 rounded-lg border border-[var(--gr-brd)] bg-[var(--gr-card)]" />
      </div>
    </div>
  </div>

  <p class="mt-3 text-sm text-[var(--gr-muted-fg)]">
    Правый слот — для глобальных действий уровня приложения: поиск, уведомления, аккаунт.
    Для навигации по разделам используйте <code>GrSidebar</code> (десктоп) или
    <code>GrBottomNav</code> (мобайл), а не сам хедер.
  </p>
</template>

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

import { GrNavbar } from '@feugene/granularity'

const isMenuOpen = ref(false)
const navItems = ['Overview', 'Deployments', 'Billing', 'Settings']
</script>

<template>
  <!--
    Граница применения: кнопка-гамбургер (`show-menu-button`) нужна ТОЛЬКО в
    компактном/мобильном режиме, когда постоянный `GrSidebar` скрыт. Событие `menu`
    открывает off-canvas панель навигации. На десктопе кнопку прячут (`sm:hidden`),
    а разделы живут в боковой панели.
  -->
  <div class="relative overflow-hidden rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-bg)] shadow-[var(--gr-shadow-1)]">
    <GrNavbar
      title="Mobile shell"
      show-menu-button
      @menu="isMenuOpen = !isMenuOpen"
    />

    <div class="relative min-h-[160px]">
      <!-- Off-canvas панель навигации, которую открывает кнопка меню -->
      <transition
        enter-active-class="transition-transform duration-200 ease-out"
        enter-from-class="-translate-x-full"
        leave-active-class="transition-transform duration-150 ease-in"
        leave-to-class="-translate-x-full"
      >
        <nav
          v-if="isMenuOpen"
          class="absolute inset-y-0 left-0 z-10 w-52 border-r border-[var(--gr-brd)] bg-[var(--gr-card)] p-3"
        >
          <button
            v-for="item in navItems"
            :key="item"
            type="button"
            class="block w-full rounded-lg px-3 py-2 text-left text-sm text-[var(--gr-fg)] transition-colors hover:bg-[var(--gr-muted)]"
            @click="isMenuOpen = false"
          >
            {{ item }}
          </button>
        </nav>
      </transition>

      <div class="p-5 text-sm text-[var(--gr-muted-fg)]">
        {{ isMenuOpen ? 'Navigation drawer is open — pick a section.' : 'Tap the hamburger to open the navigation drawer.' }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { GrBadge, GrButton, GrInput, GrNavbar } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-3 rounded-xl border border-[var(--gr-brd)] bg-[var(--gr-bg)] p-3">
    <GrNavbar sticky>
      <template #title>
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold">Release dashboard</span>
          <GrBadge size="sm" tone="info">
            Beta
          </GrBadge>
        </div>
      </template>

      <template #center>
        <GrInput placeholder="Search releases" size="sm" aria-label="Search releases" />
      </template>

      <GrButton size="sm">
        Publish
      </GrButton>
    </GrNavbar>

    <div class="px-4 py-3 text-sm text-[var(--gr-muted-fg)]">
      Три зоны хедера: слева <code>#title</code> (брендинг, статус-бейдж) и <code>#left</code>,
      по центру <code>#center</code> — поиск или хлебные крошки, справа слот по умолчанию.
      Проп <code>title</code> не нужен, когда заголовок собран разметкой. С <code>sticky</code>
      панель остаётся сверху при прокрутке, но не перекрывает выпадающие панели.
    </div>
  </div>
</template>