# Navbar — Dynamic Menu Integration

## Overview

Navbar component boleh guna data dari `frontend_menu` table secara dynamic. Tak perlu hardcode link dalam component content.

## Variables Available

| Variable | Type | Description |
|----------|------|-------------|
| `$menus` | Collection | Flat list semua menu aktif dari `frontend_menu` |
| `$menuTree` | Array | Menu berstruktur parent-child (nested) |
| `$siteSlug` | String | Slug site semasa (cth: `my-site`) |
| `$siteName` | String | Nama site semasa |

> Kedua-dua `$menus` dan `$menuTree` auto di-pass oleh `PortalHandler::handle()` ke semua component, page layout, header, footer.

## Component Content — Navbar dengan Dynamic Menu

```blade
<nav style="background:#0f172a;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:70px;font-family:sans-serif;position:sticky;top:0;z-index:50;">
    <a href="/{{ $siteSlug }}" style="color:white;font-size:1.25rem;font-weight:700;text-decoration:none;letter-spacing:-0.5px;">{{ $siteName }}</a>
    <div style="display:flex;gap:0.5rem;align-items:center;">
        @foreach($menuTree as $item)
        @php $link = $item['menu_link'] ?? '#'; if(str_starts_with($link, '/') && !str_starts_with($link, '//') && !filter_var($link, FILTER_VALIDATE_URL)) $link = '/' . $siteSlug . $link; @endphp
        <div style="position:relative;" onmouseover="var d=this.querySelector('.dropdown'),c=this.querySelector('.caret');if(d)d.style.display='block';if(c)c.style.transform='rotate(180deg)'" onmouseout="var d=this.querySelector('.dropdown'),c=this.querySelector('.caret');if(d)d.style.display='none';if(c)c.style.transform='rotate(0deg)'">
            <a href="{{ $link }}" style="color:#cbd5e1;text-decoration:none;font-size:0.9rem;padding:0.5rem 1rem;border-radius:0.5rem;transition:0.2s;display:inline-flex;align-items:center;gap:0.25rem;" onmouseover="this.style.background='#1e293b'" onmouseout="this.style.background='transparent'">
                @if($item['menu_icon'])<i class="{{ $item['menu_icon'] }}"></i>@endif
                {{ $item['menu_name'] }}
                @if(!empty($item['children']))
                <svg class="caret" width="12" height="12" viewBox="0 0 12 12" fill="none" style="transition:transform 0.25s"><path d="M3 4.5L6 7.5L9 4.5" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                @endif
            </a>
            @if(!empty($item['children']))
            <div class="dropdown" style="display:none;position:absolute;top:100%;left:0;background:#1e293b;border-radius:0.5rem;padding:0.5rem;min-width:180px;box-shadow:0 10px 25px rgba(0,0,0,0.3);">
                @foreach($item['children'] as $child)
                @php $childLink = $child['menu_link'] ?? '#'; if(str_starts_with($childLink, '/') && !str_starts_with($childLink, '//') && !filter_var($childLink, FILTER_VALIDATE_URL)) $childLink = '/' . $siteSlug . $childLink; @endphp
                <a href="{{ $childLink }}" style="display:block;color:#94a3b8;text-decoration:none;font-size:0.85rem;padding:0.4rem 0.75rem;border-radius:0.375rem;transition:0.2s;" onmouseover="this.style.background='#334155';this.style.color='white'" onmouseout="this.style.background='transparent';this.style.color='#94a3b8'">{{ $child['menu_name'] }}</a>
                @endforeach
            </div>
            @endif
        </div>
        @endforeach
    </div>
</nav>
```

**Key fixes:**
- `onmouseover`/`onmouseout` pada parent `<div>` (bukan dropdown) — dropdown nak muncul
- `querySelector` guard dengan `if(d)`/`if(c)` — tak error kalau item tanpa children
- Caret pusing 180° smooth bila hover guna `transition:transform 0.25s`

## Link Auto-Prefix Logic

Link `/about` akan auto jadi `/my-site/about` tanpa perlu ubah data di database.

```
Condition:
- Starts with `/` (tapi bukan `//`)
- Bukan full URL (http://, https://)

Action:
- Prepend `/{siteSlug}` to link
```

## Footer — Dynamic Menu (Flat)

```blade
<footer style="background:#0f172a;color:#94a3b8;padding:2.5rem 2rem;text-align:center;font-family:sans-serif;">
    <div style="max-width:960px;margin:0 auto;">
        <div style="display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;flex-wrap:wrap;">
            @foreach($menus as $menu)
            @php
                $flink = $menu->menu_link ?? '#';
                if (str_starts_with($flink, '/') && !str_starts_with($flink, '//') && !filter_var($flink, FILTER_VALIDATE_URL))
                    $flink = '/' . $siteSlug . $flink;
            @endphp
            <a href="{{ $flink }}" style="color:#cbd5e1;text-decoration:none;font-size:0.85rem;transition:0.2s;" onmouseover="this.style.color='#60a5fa'" onmouseout="this.style.color='#cbd5e1'">{{ $menu->menu_name }}</a>
            @endforeach
        </div>
        ...
    </div>
</footer>
```

## Seeder

Rujuk `database/seeders/FrontendSiteDemoSeeder.php` — navbar dan footer dah guna `$menuTree` dan `$menus`.

## Cara Tambah Menu Baru

1. Pergi **Frontend Menu** dalam sidebar admin
2. Klik **Create New Frontend Menu**
3. Isi:
   - **Name** — nama display kat navbar
   - **Link** — contoh: `/about` (auto jadi `/my-site/about`)
   - **Parent** — biar kosong untuk root menu, pilih parent untuk submenu
   - **Class/Icon** — optional
4. Save — navbar automatik update

## Important Notes

- `$menuTree` — guna untuk navbar (parent-child dropdown)
- `$menus` — guna untuk footer (flat list)
- Link mesti start dengan `/` untuk internal page
- Submenu dropdown guna CSS `onmouseover`/`onmouseout` (no JS library required)
- Component content adalah **Blade template** — semua variable dari `PortalHandler` boleh guna