Vertical layout
A panel layout with a left-hand menu. It includes a sidebar that collapses on desktop, a drawer that opens from the left on mobile, and a floating top bar that carries the page title, search, actions, the theme toggle and the user menu. As the application's main layout, it renders the entire HTML document.
Basic usage
The layout renders the whole document, from the <html> tag to the </body> tag; use it on its own in the application's main Blade layout. Put your assets (@vite, favicon) in the head slot, the menu in the nav slot and the page content in the default slot. @livewireScripts, notifications (acun:toast-container) and the form guard dialog are already included in the layout.
<acun:layout.sidebar
:title="$title ?? null"
brand-name="Acun Panel"
brand-tagline="Store Management"
:home-url="route('dashboard')"
>
<acun:slot:head>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:logo><img src="/logo.svg" alt="" class="size-7"></acun:slot:logo>
<acun:slot:nav>
<acun:menu menu="main" />
</acun:slot:nav>
{{ $slot }}
</acun:layout.sidebar>| Prop | Values |
|---|---|
title | Tab title; defaults to the application name |
brand-name | Name above the menu; defaults to config('app.name') |
brand-tagline | Small line below the name |
home-url | Link of the logo; defaults to url('/') |
Logo and wordmark
If your logo consists of a mark and a wordmark, pass the mark to the logo slot and the wordmark (e.g. as an SVG) to the wordmark slot: the wordmark is drawn next to the mark in place of brand-name and brand-tagline. When the menu is collapsed, the wordmark is hidden and only the mark remains. brand-name is still used as the title of the mobile drawer.
<acun:layout.sidebar brand-name="Acun Panel" :home-url="route('dashboard')">
<acun:slot:logo><img src="/logo-icon.svg" alt="" class="size-[1.875rem]"></acun:slot:logo>
<acun:slot:wordmark><img src="/logo-text.svg" alt="Acun Panel" class="h-[1.875rem] w-auto"></acun:slot:wordmark>
{{-- … --}}
</acun:layout.sidebar>Top bar
The left of the top bar holds the page-title text, or the heading slot for richer content; without a title, the search aligns to the left. search is shown in the middle (md and up), actions before the theme toggle, and userMenu at the far right. To remove the theme toggle, pass :theme-toggle="false".
<acun:layout.sidebar page-title="Sales report">
<acun:slot:search>
<acun:command-palette :items="$searchItems" />
</acun:slot:search>
<acun:slot:actions>
<acun:button variant="ghost" size="icon" aria-label="Notifications" title="Notifications">
<acun:icon name="bell" />
</acun:button>
</acun:slot:actions>
<acun:slot:userMenu>
<acun:user-menu :name="auth()->user()->name">
<acun:dropdown.item :href="route('profile.edit')" wire:navigate>Settings</acun:dropdown.item>
</acun:user-menu>
</acun:slot:userMenu>
{{ $slot }}
</acun:layout.sidebar>| Prop | Values |
|---|---|
page-title | Page title on the left of the top bar |
theme-toggle | true | false |
User preferences
If you pass the user's saved preferences, the page opens with that look from the very first frame; a value passed to the layout always takes precedence over the choice stored in the browser. null means "not saved": for that preference the choice in the browser is used, or the default if there is none. So do not pass a separate default for users without a saved value. When preference-url is given, the new value is POSTed to this URL whenever the user changes the look (details on the Head page). navbar-mode: fixed keeps the top bar in place, static scrolls it with the content, hidden hides it; if nothing is saved anywhere, fixed is used.
<acun:layout.sidebar
brand-name="Acun Panel"
:theme="auth()->user()?->theme_preference"
:brand-color="auth()->user()?->brand_color"
:sidebar-mode="auth()->user()?->sidebar_mode"
:navbar-mode="auth()->user()?->navbar_mode"
:semi-dark="auth()->user()?->semi_dark"
:preference-url="route('ui-preference.update')"
>
{{ $slot }}
</acun:layout.sidebar>| Prop | Values |
|---|---|
theme | light | dark | system |
brand-color | default | green | red | yellow | blue | gray | dark | #rrggbb |
sidebar-mode | expanded | collapsed |
navbar-mode | fixed | static | hidden | null |
semi-dark | true | false | null |
preference-url | POST URL where the preferences are saved |
Appearance customizer
With customizer on, a gear button appears on the right edge and the acun:theme-customizer panel is added: theme, primary color, bordered look, and menu and top bar options. Choices apply right away, are stored in the browser and, when preference-url is set, are saved to the account. In this example the panel is used on its own; the menu and top bar options have no effect here. The primary color choice is stored in this browser and is undone with "Reset to defaults".
<acun:drawer.trigger name="theme-customizer"><acun:button variant="white">
<acun:icon name="cog-6-tooth" size="4" /> Open the appearance panel
</acun:button></acun:drawer.trigger>
<acun:theme-customizer />
{{-- In the layout: <acun:layout.sidebar customizer …> --}}| Prop | Values |
|---|---|
customizer | true | false |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
title | null | Tab title; defaults to the application name |
brand-name | config('app.name') | Brand name above the menu (when there is no wordmark slot) |
brand-tagline | null | Small line below the brand name |
home-url | url('/') | Link of the logo |
drawer-title | null | Title of the mobile drawer; defaults to brand-name |
page-title | null | Page title on the left of the top bar (when no heading slot is given) |
theme-toggle | true | Theme toggle in the top bar |
theme | null | light · dark · system; when null, the preference in the browser |
brand-color | null | default · green · red · yellow · blue · gray · dark · #rrggbb |
sidebar-mode | null | expanded · collapsed; when null, the preference in the browser |
navbar-mode | null | fixed · static · hidden; when null, the preference in the browser, or fixed if there is none |
preference-url | null | URL that the appearance preferences are POSTed to |
skin | null | default · bordered (no shadows, 1px borders) |
semi-dark | null | Dark sidebar in the light theme; false turns it off, when null the preference in the browser |
customizer | false | Appearance customizer on the right edge |