AppShell

Pemasangan

Pasang satu AppShell di layout, lalu isi kontennya dengan halaman. Satu daftar sections menghasilkan sidebar desktop, drawer di HP, dan navigasi bawah sekaligus, jadi tidak ada dua daftar menu yang harus dijaga tetap sama.

import type { W4cAppShellNavSection } from '@waste4change/ui/components/AppShell.vue'

const sections: W4cAppShellNavSection[] = [
  {
    label: 'Operasional',
    items: [
      { label: 'Dashboard', to: '/', icon: 'lucide:layout-dashboard', exact: true },
      { label: 'Pickup', to: '/pickup', icon: 'lucide:truck', badge: 4 },
      { label: 'Keluhan', to: '/keluhan', icon: 'lucide:circle-alert', badge: 2, badgeColor: 'danger' },
    ],
  },
]

<template>
  <W4cAppShell :sections="sections" app-name="Waste Hub">
    <NuxtPage />
  </W4cAppShell>
</template>

Dasar

Contoh di bawah adalah shell utuh di dalam kotak setinggi 650px (contained), supaya bisa dicoba tanpa meninggalkan halaman docs. Tombol paling kiri di header menciutkan sidebar: 15rem menjadi rail 4rem berisi tile ikon, dan area konten mengikuti. Tombol itu tinggal di header untuk kedua keadaan — tidak ada kontrol yang mengambang di tepi sidebar.

Kerapatannya disetel untuk dashboard yang menunya banyak: baris 36px, ikon 18px, jarak antarbaris 2px. Delapan sampai empat belas menu masih terlihat tanpa menggulir.

Menu aktif

Bawaannya menu aktif ditentukan dari route Nuxt yang sedang terbuka, jadi tidak ada state yang perlu disiapkan. Route anak ikut menandai menu induknya aktif; pakai exact: true untuk menu beranda supaya tidak selalu tampak aktif. Menu aktif ditandai satu cara saja — latar lebih terang dengan ikon teal — dan membawa aria-current="page" di sidebar, drawer, maupun navigasi bawah.

// Menu aktif mengikuti route: /pickup/PU-0042 tetap menandai Pickup,
// karena route anak ikut dihitung kecuali item memakai exact.
{ label: 'Pickup', to: '/pickup', icon: 'lucide:truck' }

// Tanpa route sama sekali (wizard, tab di satu halaman), kendalikan sendiri:
// <W4cAppShell v-model:active="active" :sections="sections">

Navigasi di HP

Di bawah lebar md sidebar diganti dua hal: navigasi bawah untuk maksimal lima menu tersering, dan drawer yang memuat seluruh menu, dibuka dari tombol yang sama di header. Menu dengan mobile: false karena itu tetap terjangkau dari HP — ia hanya tidak ikut memenuhi bilah bawah.

Drawernya memakai <dialog> bawaan browser seperti Modal: lapisan teratas, perangkap fokus, Escape, dan kunci gulir halaman. Memilih menu langsung menutupnya, dan melebarkan jendela ke ukuran desktop juga menutupnya, supaya fokus tidak terkurung di panel yang sudah digantikan sidebar.

<W4cAppShell
  :sections="sections"
  :mobile-items="mobileItems"
  :mobile-limit="4"
>

Merek dan header sendiri

Slot brand, mobile-brand, header-start, dan header-end mengganti bagian-bagian kerangka tanpa menyentuh tata letaknya. Contoh ini memakai merek sendiri, pemilih lokasi di header, dan daftar menu bawah yang berbeda dari sidebar.

API