# SIDEBAR STRUCTURE — GOVERNMENT SERVICE PORTAL
# Satu Mimpi City Administration
Version 2.0

---

# OVERVIEW

Type: Collapsible Sidebar (Left)
Width Expanded: 280px
Width Collapsed: 80px (icon only, tooltip on hover)
Position: sticky top-[72px], full height
Animation: width transition 400ms ease-decelerate
Theme: Light Green Government (with dark mode support)

State persistence: localStorage key 'sidebar' = 'expanded' | 'collapsed'

---

# BEHAVIOR

## Expanded State (280px)
- Group labels: visible (uppercase, 10px, text-secondary, letter-spacing-widest)
- Menu item: icon (left) + label text (right) + badge (far right)
- Submenu: indented list, animated slide-down
- User card: avatar + nama + jabatan (bottom)

## Collapsed State (80px)
- Group labels: hidden (overflow hidden, opacity 0)
- Menu item: icon only (centered), no text
- Tooltip on hover: label muncul di sebelah kanan (absolute, z-50)
- Submenu: tidak ditampilkan (klik item langsung navigasi ke halaman utama)
- User card: avatar only (centered)

## Mobile / Tablet (< 1024px)
- Sidebar hidden by default (translateX -280px)
- Toggle → slide in as overlay drawer (280px wide)
- Overlay background: bg-black/50 fadeIn, klik overlay = tutup sidebar
- Close button: XIcon di pojok kanan atas drawer

---

# PENDING BADGE

Setiap service item menampilkan badge jumlah pengajuan pending.
Badge design: rounded-full, min-w-[20px] h-5, text-xs font-bold
Color: bg-warning text-white (jika > 0) / hidden (jika 0)

Badge tampil:
- Expanded: di sebelah kanan label
- Collapsed: pojok kanan atas icon (8px × 8px, merah dot jika ada)

Data source: DashboardController pass $pendingCounts ke layout via View::share()

---

# ACTIVE STATE DETECTION

Use Laravel route()->is() atau request()->routeIs() untuk highlight active item.
Active item: bg-gov-primary text-white rounded-lg font-medium
Active group label: text-gov-primary font-semibold
Parent item active (submenu active): item parent mendapat highlight subtle (bg-gov-50)

---

# NAVIGATION STRUCTURE

---

## [UMUM]

### 📊 Dashboard
Icon: Squares2x2 (LayoutDashboard)
Route: /admin/dashboard
Badge: -
Access: Admin + Operator
Sub items: none (single link)

---

## [PELAYANAN PUBLIK]
Group label color: text-gov-primary/70

### 🪪 KTP — Kartu Tanda Penduduk
Icon: IdentificationCard
Route: /admin/services/ktp
Badge: pending KTP count
Access: Admin + Operator

Sub items (hanya visible saat expanded):
  ├── Semua Pengajuan        /admin/services/ktp
  ├── Pending                /admin/services/ktp?status=pending
  ├── Disetujui              /admin/services/ktp?status=approved
  └── Ditolak                /admin/services/ktp?status=rejected

Hover tooltip (collapsed): "KTP — [N] Pending"

---

### 👶 KIA — Kartu Identitas Anak
Icon: DocumentCheck
Route: /admin/services/kia
Badge: pending KIA count
Access: Admin + Operator

Sub items:
  ├── Semua Pengajuan        /admin/services/kia
  ├── Pending                /admin/services/kia?status=pending
  ├── Disetujui              /admin/services/kia?status=approved
  └── Ditolak                /admin/services/kia?status=rejected

---

### 💍 Pernikahan
Icon: Heart (HeartIcon)
Route: /admin/services/marriage
Badge: pending Marriage count
Access: Admin + Operator

Sub items:
  ├── Semua Pengajuan        /admin/services/marriage
  ├── Pending                /admin/services/marriage?status=pending
  ├── Disetujui              /admin/services/marriage?status=approved
  └── Ditolak                /admin/services/marriage?status=rejected

---

### ✏️ Pergantian Nama
Icon: PencilSquare
Route: /admin/services/name-change
Badge: pending Name Change count
Access: Admin + Operator

Sub items:
  ├── Semua Pengajuan        /admin/services/name-change
  ├── Verifikasi DOJ         /admin/services/name-change?filter=doj-required
  ├── Pending                /admin/services/name-change?status=pending
  ├── Disetujui              /admin/services/name-change?status=approved
  └── Ditolak                /admin/services/name-change?status=rejected

---

### 👨‍👩‍👧‍👦 Kartu Keluarga
Icon: UserGroup
Route: /admin/services/family-card
Badge: pending Family Card count
Access: Admin + Operator

Sub items:
  ├── Semua Pengajuan        /admin/services/family-card
  ├── Pending                /admin/services/family-card?status=pending
  ├── Disetujui              /admin/services/family-card?status=approved
  └── Ditolak                /admin/services/family-card?status=rejected

---

### 📋 Surat Izin Kegiatan
Icon: ClipboardDocumentCheck
Route: /admin/services/event-permit
Badge: pending Event Permit count
Access: Admin + Operator

Sub items:
  ├── Semua Pengajuan        /admin/services/event-permit
  ├── Menunggu Verifikasi    /admin/services/event-permit?status=pending
  ├── Disetujui              /admin/services/event-permit?status=approved
  └── Ditolak                /admin/services/event-permit?status=rejected

---

### 🏠 Surat Tanah
Icon: HomeModern
Route: /admin/services/land-certificate
Badge: pending Land Cert count
Access: Admin + Operator

Sub items:
  ├── Semua Pengajuan        /admin/services/land-certificate
  ├── Pemeriksaan Dokumen    /admin/services/land-certificate?stage=verification
  ├── Pending                /admin/services/land-certificate?status=pending
  ├── Disetujui              /admin/services/land-certificate?status=approved
  └── Ditolak                /admin/services/land-certificate?status=rejected

---

### 🏗️ Administrasi Rumah
Icon: BuildingOffice2
Route: /admin/services/house-purchase
Badge: pending House count
Access: Admin + Operator

Sub items:
  ├── Semua Pengajuan        /admin/services/house-purchase
  ├── LOW END HOUSE          /admin/services/house-purchase?type=low
  ├── MID END HOUSE          /admin/services/house-purchase?type=mid
  ├── HIGH END HOUSE         /admin/services/house-purchase?type=high
  ├── Pending                /admin/services/house-purchase?status=pending
  └── Disetujui              /admin/services/house-purchase?status=approved

---

## [DATA KEPENDUDUKAN]
Access: Admin only (Operator tidak melihat section ini)

### 👥 Data Penduduk
Icon: Users
Route: /admin/citizens
Badge: -
Access: Admin only

Sub items:
  ├── Semua Penduduk         /admin/citizens
  ├── Penduduk Aktif         /admin/citizens?status=active
  ├── Tidak Aktif            /admin/citizens?status=inactive
  └── Pencarian NIK          /admin/citizens?search=nik

---

### 🗂️ Kartu Keluarga Data
Icon: FolderOpen
Route: /admin/family
Badge: -
Access: Admin only

Sub items:
  ├── Semua KK               /admin/family
  └── Riwayat Dokumen        /admin/document-history

---

## [REGULASI]
Access: Admin only

### ⚖️ Regulasi Layanan
Icon: Scale
Route: /admin/regulations
Badge: -

Sub items:
  ├── Regulasi KTP           /admin/regulations/ktp
  ├── Regulasi KIA           /admin/regulations/kia
  ├── Regulasi Pernikahan    /admin/regulations/marriage
  ├── Regulasi Pergantian Nama /admin/regulations/name-change
  ├── Regulasi Kartu Keluarga  /admin/regulations/family-card
  ├── Regulasi Surat Tanah   /admin/regulations/land-certificate
  ├── Regulasi Rumah         /admin/regulations/house-purchase
  └── Regulasi Izin Kegiatan /admin/regulations/event-permit

---

## [WEBSITE CMS]
Access: Admin only

### 🌐 Kelola Website
Icon: GlobeAlt
Route: /admin/cms
Badge: -

Sub items:
  ├── Homepage               /admin/cms/home
  ├── Profil Pemerintahan    /admin/cms/profile
  ├── Berita                 /admin/cms/news
  ├── Kategori Berita        /admin/cms/news/categories
  ├── FAQ                    /admin/cms/faq
  └── Media Library          /admin/cms/media

---

## [LAPORAN]
Access: Admin only

### 📊 Pelaporan
Icon: ChartBarSquare
Route: /admin/reports
Badge: -

Sub items:
  ├── Statistik Pelayanan    /admin/reports/services
  ├── Statistik Penduduk     /admin/reports/citizens
  └── Export Data            /admin/reports/export

---

## [MANAJEMEN PEGAWAI]
Access: Admin only

### 👤 Pegawai Gov
Icon: UserCog (Cog6Tooth + UserCircle)
Route: /admin/staff
Badge: badge merah jika ada staff dengan status 'pending' (menunggu aktivasi)

Sub items:
  ├── Daftar Pegawai         /admin/staff
  ├── Tambah Pegawai         /admin/staff/create
  └── Hak Akses (Roles)      /admin/roles

---

## [NOTIFIKASI]
Access: Admin + Operator

### 🔔 Notifikasi
Icon: Bell
Route: /admin/notifications
Badge: unread notification count (merah)

Sub items:
  ├── Semua Notifikasi       /admin/notifications
  └── Antrian Discord        /admin/notifications/discord

---

## [KEAMANAN]
Access: Admin only

### 🛡️ Audit & Log
Icon: ShieldCheck
Route: /admin/audit
Badge: -

Sub items:
  ├── Audit Log              /admin/audit/log
  ├── Login History          /admin/audit/login
  └── Riwayat Persetujuan    /admin/audit/approvals

---

## [PENGATURAN]
Access: Admin only

### ⚙️ Pengaturan
Icon: Cog6Tooth (Settings)
Route: /admin/settings
Badge: -

Sub items:
  ├── Umum                   /admin/settings/general
  ├── Tema                   /admin/settings/theme
  ├── SMTP                   /admin/settings/smtp
  ├── Discord                /admin/settings/discord
  ├── Tanda Tangan           /admin/settings/signature
  └── Watermark              /admin/settings/watermark

---

# BOTTOM SECTION (User Card)

Position: sticky bottom-0, border-t, bg-white dark:bg-dark-sidebar

## Expanded State (280px)
```
┌─────────────────────────────────────┐
│ [Avatar 40px] Budi Santoso          │ ← nama pegawai
│               Kepala Dinas          │ ← jabatan / ranks
│                               [···] │ ← 3-dot menu button
└─────────────────────────────────────┘
```

3-dot menu dropdown (above, AnimateSlideUp):
  - 👤 Profil Saya              → /admin/profile
  - 🔑 Ubah Password            → /admin/profile#password
  - ─────────────
  - 🚪 Keluar                   → POST /admin/logout (text-danger)

## Collapsed State (80px)
```
┌──────┐
│ [Av] │ ← avatar centered, click → mini dropdown
└──────┘
```

Mini dropdown (to the right of sidebar):
  - Nama + jabatan (header, non-clickable)
  - ─────────────
  - Profil Saya
  - Ubah Password
  - ─────────────
  - Keluar (red)

---

# ROLE-BASED SIDEBAR VISIBILITY

## Admin → Melihat semua menu

## Operator → Hanya melihat:
  - Dashboard
  - [PELAYANAN PUBLIK] — semua 8 layanan
  - [NOTIFIKASI]
  - Bottom user card

Sections hidden for Operator (via Blade @admin directive):
  - Data Kependudukan
  - Regulasi
  - Website CMS
  - Laporan
  - Manajemen Pegawai
  - Keamanan
  - Pengaturan

---

# SIDEBAR STYLING SPEC

## Light Mode
```css
sidebar bg: #FFFFFF
sidebar border: #E5E7EB (1px right)
group label: #9CA3AF (text-muted)
item default: text-#6B7280, hover:bg-#F1F8F1 hover:text-#4CAF50
item active: bg-#4CAF50 text-#FFFFFF rounded-lg
submenu item: text-#6B7280, hover:text-#4CAF50, pl-10
pending badge: bg-#F59E0B text-white
```

## Dark Mode
```css
sidebar bg: #111F18
sidebar border: #2D3B35 (1px right)
group label: #4A6355 (muted green-dark)
item default: text-#8FA898, hover:bg-#1A3028 hover:text-#4CAF50
item active: bg-#4CAF50 text-#FFFFFF rounded-lg
submenu item: text-#8FA898, hover:text-#4CAF50
pending badge: bg-#F59E0B text-white
```

---

# SIDEBAR ICON REFERENCE (Heroicons v2)

| Menu | Icon Name |
|---|---|
| Dashboard | Squares2x2 |
| KTP | IdentificationCard |
| KIA | DocumentCheck |
| Pernikahan | Heart |
| Pergantian Nama | PencilSquare |
| Kartu Keluarga | UserGroup |
| Surat Izin | ClipboardDocumentCheck |
| Surat Tanah | HomeModern |
| Administrasi Rumah | BuildingOffice2 |
| Data Penduduk | Users |
| Kartu Keluarga Data | FolderOpen |
| Regulasi | Scale |
| Website CMS | GlobeAlt |
| Laporan | ChartBarSquare |
| Manajemen Pegawai | UserCog |
| Notifikasi | Bell |
| Audit | ShieldCheck |
| Pengaturan | Cog6Tooth |

All icons: Heroicons v2 Outline (default) / Solid (active state)

---

# FUTURE MODULES (v2)

Akan ditambahkan sebagai group baru:

## [LAYANAN DIGITAL v2]
  - 🗳️ E-Voting              /admin/e-voting
  - 📋 E-Musrenbang          /admin/musrenbang
  - 📢 E-Lapor Warga         /admin/lapor-warga
  - 💰 E-Pajak               /admin/pajak
  - 📊 E-Retribusi           /admin/retribusi
  - 🕐 E-Absensi Pegawai     /admin/absensi
  - 🗄️ E-Arsip Digital       /admin/arsip
  - 🔍 QR Validation         /admin/qr-validation