Sidebar

Config-driven layout chrome: pin/unpin on desktop, slide-in drawer on mobile, nested submenus, a choice of top- or bottom-positioned mobile navbar, and a full custom-event surface. Everything below is driven by a single PHP $sidebar array.

Config shape

The sidebar partial expects one scoped $sidebar array. Every consumer-level option — nav structure, brand, footer actions, current page, mobile toggle position — lives here.

$sidebar = [
    'brand' => [
        'icon' => 'rocket_launch',
        'text' => 'Launchpad',
        'url'  => '/',
    ],
    'navigation' => [
        [
            'title' => 'Overview',
            'items' => [
                ['label' => 'Dashboard', 'icon' => 'dashboard', 'url' => '/', 'key' => 'dashboard'],
                [
                    'label' => 'Components', 'icon' => 'widgets', 'key' => 'components',
                    'children' => [
                        ['label' => 'Buttons', 'url' => '/components/buttons', 'key' => 'buttons'],
                        ['label' => 'Sidebar', 'url' => '/components/sidebar', 'key' => 'sidebar'],
                    ],
                ],
            ],
        ],
    ],
    'footerActions' => [
        ['type' => 'theme', 'icon' => 'palette', 'title' => 'Theme'],
    ],
    'currentPage'  => 'sidebar',
    'mobileToggle' => 'bottom', // 'top' | 'bottom' — default is 'top'
    'pinned'       => true,
];

// Then in the layout:
include __DIR__ . '/../partials/layout/sidebar.php';

Navigation items

Each navigation section has a title and an items array. An item is either a leaf (has url) or a parent (has children). Parents nest to any depth and render recursively.

// Leaf item — renders as an <a href>
['label' => 'Buttons', 'icon' => 'smart_button', 'url' => '/components/buttons', 'key' => 'buttons']

// Parent item — renders as a <button> that opens a nested submenu
[
    'label' => 'Forms', 'icon' => 'edit_note', 'key' => 'forms',
    'children' => [
        ['label' => 'Inputs', 'url' => '/forms/inputs', 'key' => 'forms-inputs'],
        ['label' => 'Selects', 'url' => '/forms/selects', 'key' => 'forms-selects'],
    ],
]

Mobile navbar position

Resize the browser below 992px to see the current variant in action. This page is configured with mobileToggle: 'bottom', so the entire navbar — including the hamburger — moves to the bottom edge of the viewport. Dropdowns inside the navbar flip upward.

// Default — navbar hamburger at top of mobile viewport.
$sidebar['mobileToggle'] = 'top';

// Bottom variant — floating hamburger at bottom-center.
// Automatically hides the navbar toggle on mobile.
$sidebar['mobileToggle'] = 'bottom';

Event surface

Every sidebar interaction bubbles a CustomEvent up to document. The table below lists each event and its detail payload.

Event	When	Detail
`lp:sidebar:init`	After constructor (base Component)	—
`lp:sidebar:ready`	After active path expanded & scrolled into view	—
`lp:sidebar:toggle`	Before open/close branch (mobile only)	`{ willOpen: bool }`
`lp:sidebar:open`	Start of mobile drawer open	—
`lp:sidebar:opened`	End of open transition	—
`lp:sidebar:close`	Start of mobile drawer close	—
`lp:sidebar:closed`	End of close transition	—
`lp:sidebar:pin`	Pin state toggled (desktop, Ctrl+B)	`{ pinned: bool }`
`lp:sidebar:item:expand`	Submenu opened	`{ element, key, depth }`
`lp:sidebar:item:collapse`	Submenu closed	`{ element, key, depth }`
`lp:sidebar:item:click`	Leaf link clicked (observability only)	`{ element, key, url }`

Programmatic toggle: dispatch lp:sidebar:toggle-request on document. The same event is fired by the bottom hamburger button and the legacy lp:navbar:toggle-sidebar event is still honoured for back-compat.

// Listen for any sidebar event on the document
document.addEventListener('lp:sidebar:item:click', (e) => {
    console.log('Clicked:', e.detail.key, '→', e.detail.url);
});

document.addEventListener('lp:sidebar:pin', (e) => {
    console.log(e.detail.pinned ? 'Pinned' : 'Unpinned');
});

document.addEventListener('lp:sidebar:opened', () => {
    // Mobile drawer finished opening — safe to focus first item
});

// Programmatic toggle (mobile): dispatch a request event on document.
// This is the same event the bottom hamburger button fires.
document.dispatchEvent(new CustomEvent('lp:sidebar:toggle-request'));

Live event log

Interact with the real sidebar on the left — click any item, open/close a submenu, press Ctrl+B to toggle pin, or tap the bottom hamburger on a narrow viewport. Every event appears here in real time.