Komponen / Navigasi
AppHeader
Header aplikasi BizOps: pengalih perusahaan, pencarian global ⌘K, notifikasi, dan menu pengguna. Tanpa bar latar penuh — kaca hanya di kelompok kontrol.
Import
tsx
import { AppHeader, AppHeaderNotifications, AppHeaderUser } from '@divistant/circca-react';Props · AppHeader
Juga menerima atribut <header>. AppHeader.Notifications = AppHeaderNotifications, AppHeader.User = AppHeaderUser.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| brand | ReactNode | — | Logo/produk paling kiri (mis. ProductMark). Kosongkan bila sidebar sudah menampilkan logo. |
| onMenuClick | () => void | — | Menampilkan tombol sidebar kaca (properti Figma Menu button) — saat sidebar disembunyikan atau di layar sempit. |
| menuLabel | string | 'Tampilkan sidebar' | Label tombol sidebar. |
| companySwitcher | ReactNode | — | <CompanySwitcher>. Menyusut (nama terpotong) bila header sempit. |
| search | Omit<SearchFieldProps, 'size'> & { shortcut?: boolean } | — | Pencarian global kaca 320 px (properti Figma Search). `shortcut` (bawaan true) memasang ⌘K / Ctrl K dan menampilkan petunjuknya. Di header < 576 px melipat jadi tombol. |
| actions | ReactNode | — | IconButton Ghost tambahan di kelompok kaca kanan, sebelum notifikasi. |
| notifications | ReactNode | — | <AppHeader.Notifications unread={n} /> (boleh dibungkus Popover). |
| user | ReactNode | — | <AppHeader.User name="…" /> (boleh dibungkus menu akun). |
| landmark | boolean | true | Render <header role="banner">. Matikan (jadi <div>) bila disarangkan di landmark lain atau halaman sudah punya banner. |
Props · AppHeaderNotifications
IconButton Ghost lonceng. Menerima props IconButton selain icon/label/variant.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| unread | number | 0 | Jumlah belum dibaca (properti Figma Unread notifications). 0 = tanpa penanda. |
| indicator | 'dot' | 'count' | 'dot' | Titik merah 8 px seperti Figma, atau Badge berangka (99+). |
| label | string | 'Notifikasi' | Label dasar; jumlah ditambahkan otomatis: "Notifikasi, 3 belum dibaca". |
Props · AppHeaderUser
Tombol 28 berisi Avatar Circle 24. Juga menerima atribut <button>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| name | string | — | Nama lengkap pengguna — sumber inisial. |
| src | string | — | URL foto. |
| label | string | 'Akun {name}' | Nama aksesibel tombol. |
Sumber
Kode komponen ada di packages/react/src/components/app-header. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.