App Shell
Full application shells — collapsible sidebars, org switchers, command search, breadcrumb headers and an inset content area.
Preview
resources/views/pages/admin-shell.blade.php
{{--
Admin Shell — the back-office console frame.
┌──────────────┬────────────────────────────────────────┐
│ scope │ page bar (trail, systems, role, me) │
│ search ⌘K ├────────────────────────────────────────┤
│ navigation │ page content │
│ … │ │
│ mode toggle │ │
│ signed in as │ │
└──────────────┴────────────────────────────────────────┘
The sidebar runs the FULL height of the window and the bar spans only
the main column. That is not cosmetic: the sidebar carries session-level
context (which store you are scoped to, who you are signed in as) and
the bar carries page-level context. A bar across the top of both would
imply the store selector belongs to the page.
The nav is a map, not an inventory: only the section containing the
current route opens on load. A section that is not built yet is present
(so the IA is honest) and inert (so it cannot mislead) — it renders as
text with a title, never as a link to nowhere. Counts on a section are
the sum a person would otherwise add up by opening it.
The mode toggle at the bottom of the sidebar is for a control that
warehouse or support staff flip all day (scanner mode, focus mode); it
belongs where the hand already is.
Differs from `app-shell-bordered` (a SaaS product shell) in exactly those
decisions; pick this one for an operator-facing admin.
Generalised from the Noord-C admin's `app-shell.blade.php` +
`sidebar.blade.php`; the page bar is the `admin/page-bar` block.
--}}
@props([
'title' => 'Orders',
'brand' => 'Noord-C',
'scopes' => null,
'nav' => null,
'user' => null,
'trail' => [],
'record' => [],
'mode' => null,
'commands' => null,
])
@php
// Shapes documented in item.json knowledge.props:
// scopes: [['label', 'href', 'active' => false]] — the stores/teams the admin can be scoped to.
// nav: [['heading' => null, 'key', 'label', 'icon', 'href' => null, 'count' => null, 'tone' => null, 'children' => [['label','href' => null,'count' => null,'tone' => null,'active' => false]], 'active' => false, 'open' => false]]
// user: ['name', 'role', 'initials']
// mode: ['label' => 'Scanner mode', 'key' => 'S', 'on' => false] — the bottom-of-sidebar toggle; null hides it.
$scopes ??= [
['label' => 'Noord-C Amsterdam', 'href' => '#', 'active' => true],
['label' => 'Noord-C Outlet', 'href' => '#'],
['label' => 'Ook Leuk', 'href' => '#'],
];
$activeScope = collect($scopes)->firstWhere('active', true) ?? ($scopes[0] ?? ['label' => __('All stores')]);
$nav ??= [
['heading' => __('Sell'), 'key' => 'orders', 'label' => __('Orders'), 'icon' => 'orders', 'href' => '#', 'count' => 14, 'tone' => 'attention', 'active' => true, 'open' => true, 'children' => [
['label' => __('All orders'), 'href' => '#', 'active' => true],
['label' => __('Abandoned carts'), 'href' => '#', 'count' => 6],
['label' => __('Returns'), 'href' => '#', 'count' => 2, 'tone' => 'attention'],
['label' => __('Invoices'), 'href' => '#'],
]],
['key' => 'customers', 'label' => __('Customers'), 'icon' => 'customers', 'href' => '#', 'children' => [
['label' => __('All customers'), 'href' => '#'],
['label' => __('Companies'), 'href' => '#'],
['label' => __('Segments'), 'href' => null],
]],
['heading' => __('Stock'), 'key' => 'products', 'label' => __('Products'), 'icon' => 'products', 'href' => '#', 'count' => 3, 'tone' => 'negative', 'children' => [
['label' => __('Catalogue'), 'href' => '#'],
['label' => __('Problems'), 'href' => '#', 'count' => 3, 'tone' => 'negative'],
['label' => __('Bundles'), 'href' => '#'],
]],
['key' => 'inventory', 'label' => __('Inventory'), 'icon' => 'inventory', 'href' => '#', 'children' => []],
['heading' => __('Reach'), 'key' => 'discounts', 'label' => __('Discounts'), 'icon' => 'discounts', 'href' => '#', 'children' => []],
['key' => 'content', 'label' => __('Content'), 'icon' => 'content', 'href' => null, 'children' => []],
['heading' => __('Run'), 'key' => 'reports', 'label' => __('Reports'), 'icon' => 'reports', 'href' => '#', 'children' => []],
['key' => 'settings', 'label' => __('Settings'), 'icon' => 'settings', 'href' => '#', 'children' => []],
];
$user ??= ['name' => 'Sanne de Wit', 'role' => __('Administrator'), 'initials' => 'SW'];
$mode ??= ['label' => __('Scanner mode'), 'key' => 'S', 'on' => false];
$commands ??= collect($nav)
->flatMap(fn (array $item) => array_merge(
$item['href'] ? [['value' => $item['key'], 'label' => $item['label'], 'href' => $item['href']]] : [],
collect($item['children'] ?? [])->filter(fn ($child) => ! empty($child['href']))->map(fn ($child) => [
'value' => $item['key'].'-'.str($child['label'])->slug()->value(),
'label' => $item['label'].' › '.$child['label'],
'href' => $child['href'],
])->all(),
))
->values()
->all();
// Trusted, developer-authored icon paths rendered inside nav buttons
// (escaped output would mangle the SVG markup). Never feed user input
// through this map.
$icons = [
'orders' => '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
'customers' => '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
'products' => '<path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
'inventory' => '<path d="M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z"/><path d="M6 18h12"/><path d="M6 14h12"/><rect width="12" height="12" x="6" y="10"/>',
'discounts' => '<path d="M15 5 5 15"/><circle cx="6.5" cy="6.5" r="1.5"/><circle cx="17.5" cy="17.5" r="1.5"/><path d="M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0"/>',
'content' => '<path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5"/><path d="M8 13h8"/><path d="M8 17h8"/>',
'reports' => '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
'settings' => '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/>',
];
@endphp
<x-ui.section
data-surface="admin"
data-slot="admin-shell"
data-visual-contracts="VC-001 VC-002"
space="none" class="min-h-svh" {{ $attributes }}
>
<x-ui.skip-link />
<div class="flex h-svh w-full overflow-hidden">
<x-ui.sidebar class="max-lg:hidden">
{{-- 1. Scope: qualifies every figure in the admin, so it never scrolls away. --}}
<x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
<x-ui.dropdown x-show="expanded" class="min-w-0 flex-1">
<x-ui.dropdown.trigger class="w-full min-w-0 gap-2 rounded-md px-2 py-2 text-start hover:bg-muted" :aria-label="__('Change scope')">
<span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-sm font-semibold text-primary-foreground" aria-hidden="true">{{ str($brand)->substr(0, 1) }}</span>
<span class="flex min-w-0 flex-1 flex-col items-start">
<span class="truncate text-xs text-muted-foreground">{{ __('Scope') }}</span>
<span class="truncate text-sm font-semibold leading-tight">{{ $activeScope['label'] }}</span>
</span>
<svg class="ms-auto size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
</x-ui.dropdown.trigger>
<x-ui.dropdown.content class="w-56">
<x-ui.dropdown.label>{{ __('Stores') }}</x-ui.dropdown.label>
@foreach ($scopes as $scope)
<x-ui.dropdown.item :href="$scope['href'] ?? '#'">
{{ $scope['label'] }}
@if ($scope['active'] ?? false)
<span class="sr-only">{{ __('(current)') }}</span>
<svg class="ms-auto size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
@endif
</x-ui.dropdown.item>
@endforeach
</x-ui.dropdown.content>
</x-ui.dropdown>
<x-ui.sidebar.trigger class="shrink-0" />
</x-ui.sidebar.header>
<x-ui.sidebar.content>
{{-- 2. Search: ⌘K, reachable from any screen. --}}
<x-ui.dialog
@keydown.window.prevent.meta.k="show()"
@keydown.window.prevent.ctrl.k="show()"
@command-select.window="hide()"
>
<x-ui.dialog.trigger class="flex w-full items-center gap-2 rounded-md border border-input bg-surface-2 px-2 text-sm text-muted-foreground transition-colors h-control-h-sm hover:bg-secondary focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring" x-bind:class="expanded || 'justify-center'">
<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<span x-show="expanded" class="flex-1 truncate text-start">{{ __('Search…') }}</span>
<x-ui.kbd x-show="expanded">⌘K</x-ui.kbd>
</x-ui.dialog.trigger>
<x-ui.dialog.content size="md" class="overflow-hidden p-0">
<x-ui.dialog.title class="sr-only">{{ __('Command palette') }}</x-ui.dialog.title>
<x-ui.dialog.description class="sr-only">{{ __('Search for a screen or run a command.') }}</x-ui.dialog.description>
<x-ui.command class="rounded-none border-0">
<x-ui.command.input :placeholder="__('Go to a screen or run a command…')" />
<x-ui.command.list>
<x-ui.command.empty>{{ __('No results found.') }}</x-ui.command.empty>
<x-ui.command.group :heading="__('Go to')" :keys="collect($commands)->pluck('label')->all()">
@foreach ($commands as $command)
<x-ui.command.item :value="$command['value']" :keywords="$command['label']" :href="$command['href']">
{{ $command['label'] }}
</x-ui.command.item>
@endforeach
</x-ui.command.group>
</x-ui.command.list>
</x-ui.command>
</x-ui.dialog.content>
</x-ui.dialog>
{{-- 3. Navigation: the IA under group headings, the current section open. --}}
@foreach ($nav as $item)
@php
$children = collect($item['children'] ?? [])->filter(fn ($entry) => is_array($entry))->values();
$built = ! empty($item['href']);
$active = (bool) ($item['active'] ?? false);
$open = (bool) ($item['open'] ?? $active);
@endphp
@if (! empty($item['heading']))
<x-ui.sidebar.group-label>{{ $item['heading'] }}</x-ui.sidebar.group-label>
@endif
<x-ui.sidebar.menu>
<x-ui.sidebar.menu-item>
@if ($children->isNotEmpty())
<x-ui.collapsible :open="$open">
<x-ui.collapsible.trigger
class="w-full gap-2 px-2 py-2 text-foreground hover:bg-muted data-[active=true]:bg-accent"
:data-active="$active ? 'true' : null"
:title="$item['label']"
>
<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span x-show="expanded" class="flex-1 truncate text-start">{{ $item['label'] }}</span>
@if (($item['count'] ?? null) !== null)
<x-ui.badge x-show="expanded" :tone="$item['tone'] ?? 'neutral'" size="sm" class="tabular-nums">{{ $item['count'] }}</x-ui.badge>
@endif
<svg x-show="expanded" class="size-4 shrink-0 text-muted-foreground transition-transform duration-150 motion-reduce:transition-none rtl:-scale-x-100" :class="open && 'rotate-90'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</x-ui.collapsible.trigger>
<x-ui.collapsible.content x-show="expanded">
<ul class="mt-2 flex flex-col gap-0.5 ps-6" role="list">
@foreach ($children as $child)
<li>
@if (! empty($child['href']))
<a
href="{{ $child['href'] }}"
@if ($child['active'] ?? false) aria-current="page" @endif
@class([
'flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none',
'bg-info-soft font-medium text-info-text' => $child['active'] ?? false,
'text-muted-foreground hover:bg-muted hover:text-foreground' => ! ($child['active'] ?? false),
])
>
<span class="truncate">{{ $child['label'] }}</span>
@if (($child['count'] ?? null) !== null)
<x-ui.badge :tone="$child['tone'] ?? 'neutral'" size="sm" class="ms-auto tabular-nums">{{ $child['count'] }}</x-ui.badge>
@endif
</a>
@else
{{-- Not built yet: present, so the IA is honest; inert, so it cannot mislead. --}}
<span class="flex cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70" title="{{ __('Not available yet') }}">
<span class="truncate">{{ $child['label'] }}</span>
</span>
@endif
</li>
@endforeach
</ul>
</x-ui.collapsible.content>
</x-ui.collapsible>
@elseif ($built)
<x-ui.sidebar.menu-button :href="$item['href']" :active="$active" x-bind:class="expanded || 'justify-center'" :title="$item['label']">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span x-show="expanded" class="flex-1 truncate">{{ $item['label'] }}</span>
@if (($item['count'] ?? null) !== null)
<x-ui.badge x-show="expanded" :tone="$item['tone'] ?? 'neutral'" size="sm" class="tabular-nums">{{ $item['count'] }}</x-ui.badge>
@endif
</x-ui.sidebar.menu-button>
@else
<span class="flex w-full cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70 [&_svg]:size-4 [&_svg]:shrink-0" title="{{ __('Not available yet') }}" x-bind:class="expanded || 'justify-center'">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span x-show="expanded" class="truncate">{{ $item['label'] }}</span>
</span>
@endif
</x-ui.sidebar.menu-item>
</x-ui.sidebar.menu>
@endforeach
</x-ui.sidebar.content>
<x-ui.sidebar.footer class="gap-2">
<x-ui.sidebar.separator />
{{-- 4. Mode: a toggle staff flip all day belongs where the hand already is. --}}
@if ($mode)
<x-ui.toggle variant="outline" size="sm" :pressed="(bool) ($mode['on'] ?? false)" class="w-full justify-start" :title="$mode['label']">
<svg class="shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
<span x-show="expanded" class="min-w-0 flex-1 truncate text-start">{{ $mode['label'] }}</span>
@if (! empty($mode['key']))
<x-ui.kbd x-show="expanded">{{ $mode['key'] }}</x-ui.kbd>
@endif
</x-ui.toggle>
@endif
{{-- 5. Signed in as: who the audit log will name. --}}
<div class="flex items-center gap-2 px-2 py-2" x-bind:class="expanded || 'justify-center'">
<x-ui.avatar size="sm" :fallback="$user['initials'] ?? ''" :alt="$user['name'] ?? ''" />
<span x-show="expanded" class="flex min-w-0 flex-col">
<span class="truncate text-sm font-medium leading-tight">{{ $user['name'] ?? '' }}</span>
<span class="truncate text-xs text-muted-foreground">{{ $user['role'] ?? '' }}</span>
</span>
</div>
</x-ui.sidebar.footer>
</x-ui.sidebar>
<x-ui.sidebar.inset id="main-content" class="min-w-0">
{{-- Mobile navigation: the sidebar is hidden below `lg`, so the page bar's toggle opens the nav in a start-side sheet. --}}
<x-ui.sheet @page-bar:toggle-nav.window="show()">
<x-ui.sheet.content id="admin-shell-mobile-nav" side="start" class="flex flex-col overflow-y-auto">
<x-ui.sheet.header>
<x-ui.sheet.title>{{ $activeScope['label'] }}</x-ui.sheet.title>
<x-ui.sheet.description>{{ __('Signed in as :name', ['name' => $user['name'] ?? '']) }}</x-ui.sheet.description>
</x-ui.sheet.header>
<x-ui.sheet.close />
<nav aria-label="{{ __('Primary') }}" class="mt-4 flex flex-col gap-4">
@foreach ($nav as $item)
@if (! empty($item['heading']))
<p class="px-2 pt-2 text-xs font-medium text-muted-foreground">{{ $item['heading'] }}</p>
@endif
<ul class="flex flex-col gap-0.5" role="list">
<li>
@if (! empty($item['href']))
<a href="{{ $item['href'] }}" @if ($item['active'] ?? false) aria-current="page" @endif @class(['flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium transition-colors hover:bg-muted', 'bg-muted' => $item['active'] ?? false, 'text-muted-foreground' => ! ($item['active'] ?? false)])>
<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span class="truncate">{{ $item['label'] }}</span>
@if (($item['count'] ?? null) !== null)
<x-ui.badge :tone="$item['tone'] ?? 'neutral'" size="sm" class="ms-auto tabular-nums">{{ $item['count'] }}</x-ui.badge>
@endif
</a>
@else
<span class="flex items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70" title="{{ __('Not available yet') }}">{{ $item['label'] }}</span>
@endif
</li>
@foreach (collect($item['children'] ?? [])->filter(fn ($entry) => is_array($entry)) as $child)
<li class="ps-6">
@if (! empty($child['href']))
<a href="{{ $child['href'] }}" @if ($child['active'] ?? false) aria-current="page" @endif @class(['flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors hover:bg-muted', 'bg-info-soft font-medium text-info-text' => $child['active'] ?? false, 'text-muted-foreground' => ! ($child['active'] ?? false)])>
<span class="truncate">{{ $child['label'] }}</span>
@if (($child['count'] ?? null) !== null)
<x-ui.badge :tone="$child['tone'] ?? 'neutral'" size="sm" class="ms-auto tabular-nums">{{ $child['count'] }}</x-ui.badge>
@endif
</a>
@else
<span class="flex items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70" title="{{ __('Not available yet') }}">{{ $child['label'] }}</span>
@endif
</li>
@endforeach
</ul>
@endforeach
</nav>
</x-ui.sheet.content>
</x-ui.sheet>
<x-ui.admin.page-bar :title="$title" :trail="$trail" :record="$record" :role="$user['role'] ?? null" />
<div data-slot="admin-shell-content" class="min-w-0 flex-1 overflow-auto px-4 py-6 lg:px-8">
@if (trim($slot) !== '')
{{ $slot }}
@else
<div class="mx-auto flex max-w-screen-2xl flex-col gap-6">
<x-ui.admin.page-header :title="$title" :scope="__('34 orders in this store, 14 of them waiting on a payment.')">
<x-slot:actions>
<x-ui.button variant="outline" size="sm" href="#">{{ __('Export') }}</x-ui.button>
<x-ui.button size="sm" href="#">{{ __('New order') }}</x-ui.button>
</x-slot:actions>
</x-ui.admin.page-header>
<x-ui.admin.kpi-strip />
<div class="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
{{ __('Drop the page here: a list, a record, or a form.') }}
</div>
</div>
@endif
</div>
</x-ui.sidebar.inset>
</div>
{{-- One toast stack for the whole admin. Push to it from anywhere with window.toast(). --}}
<x-ui.toaster position="bottom-end" />
</x-ui.section>Installation
terminal
php artisan ui:add pages/admin-shellRegistry contract
Install confidence
php artisan ui:add pages/admin-shell
writes only the generated targets below. The CLI validates each file hash before writing and
prompts before replacing local changes unless --force is used.
- Version
- 1.0.5
- License
- open
- Stability
- stable
- Contract
- v4
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/pages/admin-shell.blade.php |
Registry dependencies
avatar
badge
admin-kpi-strip
admin-page-bar
admin-page-header
button
collapsible
command
dialog
dropdown
kbd
section
sheet
sidebar
toast
toggle
skip-link
Package dependencies
composer: jml/brok:^0.2
Use with AI
A brief for your coding agent: what the page is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this page in an assistant.
admin-shell.md
# Brok UI page: Admin Shell (`admin-shell`)
The back-office console frame — a full-height sidebar carrying session scope (store switcher, ⌘K, grouped nav with counts and not-built entries, a mode toggle, signed-in-as) beside a page bar carrying page context.
Brok UI is a Laravel Blade registry. `ui:add` copies this page into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.
## Install
```bash
php artisan ui:add pages/admin-shell
```
## Render it
```blade
<x-pages.admin-shell />
```
## Props
- `title` (string, default `Orders`) — Page bar title.
- `brand` (string, default `Noord-C`) — One-letter mark source for the scope tile.
- `scopes` (array|null, default `null`) — [['label','href','active' => false]] stores or teams.
- `nav` (array|null, default `null`) — [['heading' => null,'key','label','icon','href' => null,'count' => null,'tone' => null,'children' => [...],'active' => false,'open' => false]].
- `user` (array|null, default `null`) — ['name','role','initials'].
- `trail` (array, default `[]`) — Page bar trail.
- `record` (array|null, default `[]`) — Page bar previous/next stepping.
- `mode` (array|false|null, default `null`) — ['label','key','on'] bottom-of-sidebar toggle; `false` hides it.
- `commands` (array|null, default `null`) — Command palette entries; derived from `nav` when omitted.
## Use when
- An operator-facing admin where every figure is qualified by a store or team scope.
- The nav must stay honest about screens not built yet.
## Avoid when
- A SaaS product with workspaces and account menus — use `app-shell-bordered`.
## Rules
- Render the installed page with `<x-pages.admin-shell />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.
## Links
- Docs: https://brokui.dev/pages/admin-shell
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/admin-shell.json
Ask about Admin Shell in
Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.
Guidance
Use when
- An operator-facing admin where every figure is qualified by a store or team scope.
- The nav must stay honest about screens not built yet.
Avoid when
- A SaaS product with workspaces and account menus — use `app-shell-bordered`.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
- Theming hooks
Usage
Render the page as a component, or wire it to a route. Pass data where useful:
resources/views/welcome.blade.php
<x-pages.admin-shell />Built from blocks & primitives
This page composes installed <brok:*> primitives and semantic design
tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by
editing CSS variables; flip the preview to RTL to confirm it mirrors.
Source
The exact, editable file ui:add writes
into your app. The preview above renders this same source — there are no preview-only pages.
resources/views/pages/admin-shell.blade.php
{{--
Admin Shell — the back-office console frame.
┌──────────────┬────────────────────────────────────────┐
│ scope │ page bar (trail, systems, role, me) │
│ search ⌘K ├────────────────────────────────────────┤
│ navigation │ page content │
│ … │ │
│ mode toggle │ │
│ signed in as │ │
└──────────────┴────────────────────────────────────────┘
The sidebar runs the FULL height of the window and the bar spans only
the main column. That is not cosmetic: the sidebar carries session-level
context (which store you are scoped to, who you are signed in as) and
the bar carries page-level context. A bar across the top of both would
imply the store selector belongs to the page.
The nav is a map, not an inventory: only the section containing the
current route opens on load. A section that is not built yet is present
(so the IA is honest) and inert (so it cannot mislead) — it renders as
text with a title, never as a link to nowhere. Counts on a section are
the sum a person would otherwise add up by opening it.
The mode toggle at the bottom of the sidebar is for a control that
warehouse or support staff flip all day (scanner mode, focus mode); it
belongs where the hand already is.
Differs from `app-shell-bordered` (a SaaS product shell) in exactly those
decisions; pick this one for an operator-facing admin.
Generalised from the Noord-C admin's `app-shell.blade.php` +
`sidebar.blade.php`; the page bar is the `admin/page-bar` block.
--}}
@props([
'title' => 'Orders',
'brand' => 'Noord-C',
'scopes' => null,
'nav' => null,
'user' => null,
'trail' => [],
'record' => [],
'mode' => null,
'commands' => null,
])
@php
// Shapes documented in item.json knowledge.props:
// scopes: [['label', 'href', 'active' => false]] — the stores/teams the admin can be scoped to.
// nav: [['heading' => null, 'key', 'label', 'icon', 'href' => null, 'count' => null, 'tone' => null, 'children' => [['label','href' => null,'count' => null,'tone' => null,'active' => false]], 'active' => false, 'open' => false]]
// user: ['name', 'role', 'initials']
// mode: ['label' => 'Scanner mode', 'key' => 'S', 'on' => false] — the bottom-of-sidebar toggle; null hides it.
$scopes ??= [
['label' => 'Noord-C Amsterdam', 'href' => '#', 'active' => true],
['label' => 'Noord-C Outlet', 'href' => '#'],
['label' => 'Ook Leuk', 'href' => '#'],
];
$activeScope = collect($scopes)->firstWhere('active', true) ?? ($scopes[0] ?? ['label' => __('All stores')]);
$nav ??= [
['heading' => __('Sell'), 'key' => 'orders', 'label' => __('Orders'), 'icon' => 'orders', 'href' => '#', 'count' => 14, 'tone' => 'attention', 'active' => true, 'open' => true, 'children' => [
['label' => __('All orders'), 'href' => '#', 'active' => true],
['label' => __('Abandoned carts'), 'href' => '#', 'count' => 6],
['label' => __('Returns'), 'href' => '#', 'count' => 2, 'tone' => 'attention'],
['label' => __('Invoices'), 'href' => '#'],
]],
['key' => 'customers', 'label' => __('Customers'), 'icon' => 'customers', 'href' => '#', 'children' => [
['label' => __('All customers'), 'href' => '#'],
['label' => __('Companies'), 'href' => '#'],
['label' => __('Segments'), 'href' => null],
]],
['heading' => __('Stock'), 'key' => 'products', 'label' => __('Products'), 'icon' => 'products', 'href' => '#', 'count' => 3, 'tone' => 'negative', 'children' => [
['label' => __('Catalogue'), 'href' => '#'],
['label' => __('Problems'), 'href' => '#', 'count' => 3, 'tone' => 'negative'],
['label' => __('Bundles'), 'href' => '#'],
]],
['key' => 'inventory', 'label' => __('Inventory'), 'icon' => 'inventory', 'href' => '#', 'children' => []],
['heading' => __('Reach'), 'key' => 'discounts', 'label' => __('Discounts'), 'icon' => 'discounts', 'href' => '#', 'children' => []],
['key' => 'content', 'label' => __('Content'), 'icon' => 'content', 'href' => null, 'children' => []],
['heading' => __('Run'), 'key' => 'reports', 'label' => __('Reports'), 'icon' => 'reports', 'href' => '#', 'children' => []],
['key' => 'settings', 'label' => __('Settings'), 'icon' => 'settings', 'href' => '#', 'children' => []],
];
$user ??= ['name' => 'Sanne de Wit', 'role' => __('Administrator'), 'initials' => 'SW'];
$mode ??= ['label' => __('Scanner mode'), 'key' => 'S', 'on' => false];
$commands ??= collect($nav)
->flatMap(fn (array $item) => array_merge(
$item['href'] ? [['value' => $item['key'], 'label' => $item['label'], 'href' => $item['href']]] : [],
collect($item['children'] ?? [])->filter(fn ($child) => ! empty($child['href']))->map(fn ($child) => [
'value' => $item['key'].'-'.str($child['label'])->slug()->value(),
'label' => $item['label'].' › '.$child['label'],
'href' => $child['href'],
])->all(),
))
->values()
->all();
// Trusted, developer-authored icon paths rendered inside nav buttons
// (escaped output would mangle the SVG markup). Never feed user input
// through this map.
$icons = [
'orders' => '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
'customers' => '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
'products' => '<path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
'inventory' => '<path d="M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z"/><path d="M6 18h12"/><path d="M6 14h12"/><rect width="12" height="12" x="6" y="10"/>',
'discounts' => '<path d="M15 5 5 15"/><circle cx="6.5" cy="6.5" r="1.5"/><circle cx="17.5" cy="17.5" r="1.5"/><path d="M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0"/>',
'content' => '<path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5"/><path d="M8 13h8"/><path d="M8 17h8"/>',
'reports' => '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
'settings' => '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/>',
];
@endphp
<x-ui.section
data-surface="admin"
data-slot="admin-shell"
data-visual-contracts="VC-001 VC-002"
space="none" class="min-h-svh" {{ $attributes }}
>
<x-ui.skip-link />
<div class="flex h-svh w-full overflow-hidden">
<x-ui.sidebar class="max-lg:hidden">
{{-- 1. Scope: qualifies every figure in the admin, so it never scrolls away. --}}
<x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
<x-ui.dropdown x-show="expanded" class="min-w-0 flex-1">
<x-ui.dropdown.trigger class="w-full min-w-0 gap-2 rounded-md px-2 py-2 text-start hover:bg-muted" :aria-label="__('Change scope')">
<span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-sm font-semibold text-primary-foreground" aria-hidden="true">{{ str($brand)->substr(0, 1) }}</span>
<span class="flex min-w-0 flex-1 flex-col items-start">
<span class="truncate text-xs text-muted-foreground">{{ __('Scope') }}</span>
<span class="truncate text-sm font-semibold leading-tight">{{ $activeScope['label'] }}</span>
</span>
<svg class="ms-auto size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
</x-ui.dropdown.trigger>
<x-ui.dropdown.content class="w-56">
<x-ui.dropdown.label>{{ __('Stores') }}</x-ui.dropdown.label>
@foreach ($scopes as $scope)
<x-ui.dropdown.item :href="$scope['href'] ?? '#'">
{{ $scope['label'] }}
@if ($scope['active'] ?? false)
<span class="sr-only">{{ __('(current)') }}</span>
<svg class="ms-auto size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
@endif
</x-ui.dropdown.item>
@endforeach
</x-ui.dropdown.content>
</x-ui.dropdown>
<x-ui.sidebar.trigger class="shrink-0" />
</x-ui.sidebar.header>
<x-ui.sidebar.content>
{{-- 2. Search: ⌘K, reachable from any screen. --}}
<x-ui.dialog
@keydown.window.prevent.meta.k="show()"
@keydown.window.prevent.ctrl.k="show()"
@command-select.window="hide()"
>
<x-ui.dialog.trigger class="flex w-full items-center gap-2 rounded-md border border-input bg-surface-2 px-2 text-sm text-muted-foreground transition-colors h-control-h-sm hover:bg-secondary focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring" x-bind:class="expanded || 'justify-center'">
<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<span x-show="expanded" class="flex-1 truncate text-start">{{ __('Search…') }}</span>
<x-ui.kbd x-show="expanded">⌘K</x-ui.kbd>
</x-ui.dialog.trigger>
<x-ui.dialog.content size="md" class="overflow-hidden p-0">
<x-ui.dialog.title class="sr-only">{{ __('Command palette') }}</x-ui.dialog.title>
<x-ui.dialog.description class="sr-only">{{ __('Search for a screen or run a command.') }}</x-ui.dialog.description>
<x-ui.command class="rounded-none border-0">
<x-ui.command.input :placeholder="__('Go to a screen or run a command…')" />
<x-ui.command.list>
<x-ui.command.empty>{{ __('No results found.') }}</x-ui.command.empty>
<x-ui.command.group :heading="__('Go to')" :keys="collect($commands)->pluck('label')->all()">
@foreach ($commands as $command)
<x-ui.command.item :value="$command['value']" :keywords="$command['label']" :href="$command['href']">
{{ $command['label'] }}
</x-ui.command.item>
@endforeach
</x-ui.command.group>
</x-ui.command.list>
</x-ui.command>
</x-ui.dialog.content>
</x-ui.dialog>
{{-- 3. Navigation: the IA under group headings, the current section open. --}}
@foreach ($nav as $item)
@php
$children = collect($item['children'] ?? [])->filter(fn ($entry) => is_array($entry))->values();
$built = ! empty($item['href']);
$active = (bool) ($item['active'] ?? false);
$open = (bool) ($item['open'] ?? $active);
@endphp
@if (! empty($item['heading']))
<x-ui.sidebar.group-label>{{ $item['heading'] }}</x-ui.sidebar.group-label>
@endif
<x-ui.sidebar.menu>
<x-ui.sidebar.menu-item>
@if ($children->isNotEmpty())
<x-ui.collapsible :open="$open">
<x-ui.collapsible.trigger
class="w-full gap-2 px-2 py-2 text-foreground hover:bg-muted data-[active=true]:bg-accent"
:data-active="$active ? 'true' : null"
:title="$item['label']"
>
<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span x-show="expanded" class="flex-1 truncate text-start">{{ $item['label'] }}</span>
@if (($item['count'] ?? null) !== null)
<x-ui.badge x-show="expanded" :tone="$item['tone'] ?? 'neutral'" size="sm" class="tabular-nums">{{ $item['count'] }}</x-ui.badge>
@endif
<svg x-show="expanded" class="size-4 shrink-0 text-muted-foreground transition-transform duration-150 motion-reduce:transition-none rtl:-scale-x-100" :class="open && 'rotate-90'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</x-ui.collapsible.trigger>
<x-ui.collapsible.content x-show="expanded">
<ul class="mt-2 flex flex-col gap-0.5 ps-6" role="list">
@foreach ($children as $child)
<li>
@if (! empty($child['href']))
<a
href="{{ $child['href'] }}"
@if ($child['active'] ?? false) aria-current="page" @endif
@class([
'flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none',
'bg-info-soft font-medium text-info-text' => $child['active'] ?? false,
'text-muted-foreground hover:bg-muted hover:text-foreground' => ! ($child['active'] ?? false),
])
>
<span class="truncate">{{ $child['label'] }}</span>
@if (($child['count'] ?? null) !== null)
<x-ui.badge :tone="$child['tone'] ?? 'neutral'" size="sm" class="ms-auto tabular-nums">{{ $child['count'] }}</x-ui.badge>
@endif
</a>
@else
{{-- Not built yet: present, so the IA is honest; inert, so it cannot mislead. --}}
<span class="flex cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70" title="{{ __('Not available yet') }}">
<span class="truncate">{{ $child['label'] }}</span>
</span>
@endif
</li>
@endforeach
</ul>
</x-ui.collapsible.content>
</x-ui.collapsible>
@elseif ($built)
<x-ui.sidebar.menu-button :href="$item['href']" :active="$active" x-bind:class="expanded || 'justify-center'" :title="$item['label']">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span x-show="expanded" class="flex-1 truncate">{{ $item['label'] }}</span>
@if (($item['count'] ?? null) !== null)
<x-ui.badge x-show="expanded" :tone="$item['tone'] ?? 'neutral'" size="sm" class="tabular-nums">{{ $item['count'] }}</x-ui.badge>
@endif
</x-ui.sidebar.menu-button>
@else
<span class="flex w-full cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70 [&_svg]:size-4 [&_svg]:shrink-0" title="{{ __('Not available yet') }}" x-bind:class="expanded || 'justify-center'">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span x-show="expanded" class="truncate">{{ $item['label'] }}</span>
</span>
@endif
</x-ui.sidebar.menu-item>
</x-ui.sidebar.menu>
@endforeach
</x-ui.sidebar.content>
<x-ui.sidebar.footer class="gap-2">
<x-ui.sidebar.separator />
{{-- 4. Mode: a toggle staff flip all day belongs where the hand already is. --}}
@if ($mode)
<x-ui.toggle variant="outline" size="sm" :pressed="(bool) ($mode['on'] ?? false)" class="w-full justify-start" :title="$mode['label']">
<svg class="shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
<span x-show="expanded" class="min-w-0 flex-1 truncate text-start">{{ $mode['label'] }}</span>
@if (! empty($mode['key']))
<x-ui.kbd x-show="expanded">{{ $mode['key'] }}</x-ui.kbd>
@endif
</x-ui.toggle>
@endif
{{-- 5. Signed in as: who the audit log will name. --}}
<div class="flex items-center gap-2 px-2 py-2" x-bind:class="expanded || 'justify-center'">
<x-ui.avatar size="sm" :fallback="$user['initials'] ?? ''" :alt="$user['name'] ?? ''" />
<span x-show="expanded" class="flex min-w-0 flex-col">
<span class="truncate text-sm font-medium leading-tight">{{ $user['name'] ?? '' }}</span>
<span class="truncate text-xs text-muted-foreground">{{ $user['role'] ?? '' }}</span>
</span>
</div>
</x-ui.sidebar.footer>
</x-ui.sidebar>
<x-ui.sidebar.inset id="main-content" class="min-w-0">
{{-- Mobile navigation: the sidebar is hidden below `lg`, so the page bar's toggle opens the nav in a start-side sheet. --}}
<x-ui.sheet @page-bar:toggle-nav.window="show()">
<x-ui.sheet.content id="admin-shell-mobile-nav" side="start" class="flex flex-col overflow-y-auto">
<x-ui.sheet.header>
<x-ui.sheet.title>{{ $activeScope['label'] }}</x-ui.sheet.title>
<x-ui.sheet.description>{{ __('Signed in as :name', ['name' => $user['name'] ?? '']) }}</x-ui.sheet.description>
</x-ui.sheet.header>
<x-ui.sheet.close />
<nav aria-label="{{ __('Primary') }}" class="mt-4 flex flex-col gap-4">
@foreach ($nav as $item)
@if (! empty($item['heading']))
<p class="px-2 pt-2 text-xs font-medium text-muted-foreground">{{ $item['heading'] }}</p>
@endif
<ul class="flex flex-col gap-0.5" role="list">
<li>
@if (! empty($item['href']))
<a href="{{ $item['href'] }}" @if ($item['active'] ?? false) aria-current="page" @endif @class(['flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium transition-colors hover:bg-muted', 'bg-muted' => $item['active'] ?? false, 'text-muted-foreground' => ! ($item['active'] ?? false)])>
<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
<span class="truncate">{{ $item['label'] }}</span>
@if (($item['count'] ?? null) !== null)
<x-ui.badge :tone="$item['tone'] ?? 'neutral'" size="sm" class="ms-auto tabular-nums">{{ $item['count'] }}</x-ui.badge>
@endif
</a>
@else
<span class="flex items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70" title="{{ __('Not available yet') }}">{{ $item['label'] }}</span>
@endif
</li>
@foreach (collect($item['children'] ?? [])->filter(fn ($entry) => is_array($entry)) as $child)
<li class="ps-6">
@if (! empty($child['href']))
<a href="{{ $child['href'] }}" @if ($child['active'] ?? false) aria-current="page" @endif @class(['flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors hover:bg-muted', 'bg-info-soft font-medium text-info-text' => $child['active'] ?? false, 'text-muted-foreground' => ! ($child['active'] ?? false)])>
<span class="truncate">{{ $child['label'] }}</span>
@if (($child['count'] ?? null) !== null)
<x-ui.badge :tone="$child['tone'] ?? 'neutral'" size="sm" class="ms-auto tabular-nums">{{ $child['count'] }}</x-ui.badge>
@endif
</a>
@else
<span class="flex items-center gap-2 rounded-md px-2 py-2 text-sm text-muted-foreground/70" title="{{ __('Not available yet') }}">{{ $child['label'] }}</span>
@endif
</li>
@endforeach
</ul>
@endforeach
</nav>
</x-ui.sheet.content>
</x-ui.sheet>
<x-ui.admin.page-bar :title="$title" :trail="$trail" :record="$record" :role="$user['role'] ?? null" />
<div data-slot="admin-shell-content" class="min-w-0 flex-1 overflow-auto px-4 py-6 lg:px-8">
@if (trim($slot) !== '')
{{ $slot }}
@else
<div class="mx-auto flex max-w-screen-2xl flex-col gap-6">
<x-ui.admin.page-header :title="$title" :scope="__('34 orders in this store, 14 of them waiting on a payment.')">
<x-slot:actions>
<x-ui.button variant="outline" size="sm" href="#">{{ __('Export') }}</x-ui.button>
<x-ui.button size="sm" href="#">{{ __('New order') }}</x-ui.button>
</x-slot:actions>
</x-ui.admin.page-header>
<x-ui.admin.kpi-strip />
<div class="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
{{ __('Drop the page here: a list, a record, or a form.') }}
</div>
</div>
@endif
</div>
</x-ui.sidebar.inset>
</div>
{{-- One toast stack for the whole admin. Push to it from anywhere with window.toast(). --}}
<x-ui.toaster position="bottom-end" />
</x-ui.section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.0.5 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v4 - Foundation
-
≥ 1.0.0