Andach View Components includes the simple layout you see here as a default, and includes a number of sub-components to create it.
<body>
<x-andach-layout>
<x-andach-sidebar variant="dark">
<x-andach-sidebar-top variant="dark">
<div class="flex h-9 w-9 items-center justify-center rounded-xl">
<span class="text-sm font-bold">AC</span>
</div>
<div class="leading-tight">
<div class="text-sm font-semibold">Company</div>
<div class="text-xs">SaaS Dashboard</div>
</div>
<!-- Close button for the off-canvas sidebar (pushed right by ml-auto) -->
<button
type="button"
class="ml-auto inline-flex h-9 w-9 items-center justify-center rounded-lg lg:hidden"
@click="sidebarOpen = false"
aria-label="Close sidebar"
>
✕
</button>
</x-andach-sidebar-top>
<x-andach-sidebar-menu variant="dark">
<x-andach-menu-group variant="dark" hollow :items="$menu"/>
</x-andach-sidebar-menu>
<x-andach-sidebar-footer variant="dark">
<div class="flex items-center gap-3 min-w-0 h-16 mx-auto">
<div class="h-9 w-9 rounded-full bg-gray-200 dark:bg-gray-800"></div>
<div class="min-w-0">
<div class="truncate text-sm font-medium">Andreas</div>
<div class="truncate text-xs text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</x-andach-sidebar-footer>
</x-andach-sidebar>
<x-andach-main>
<x-andach-header>
<x-andach-header-mobile>
<div class="flex h-8 w-8 items-center justify-center rounded-xl bg-gray-900 text-white dark:bg-white dark:text-gray-900">
<span class="text-xs font-bold">AC</span>
</div>
<span class="text-sm font-semibold">Company</span>
</x-andach-header-mobile>
<x-andach-header-left>
Welcome back — here’s what’s happening today.
</x-andach-header-left>
<x-andach-header-right>
<x-andach-dark-toggle />
<!-- Account dropdown: relative parent, absolutely positioned panel -->
<div class="relative" x-data="{ open: false }">
<button
type="button"
class="inline-flex h-9 items-center gap-2 rounded-lg border border-gray-200 px-3 text-sm hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
@click="open = !open"
@keydown.escape.window="open = false"
:aria-expanded="open ? 'true' : 'false'"
>
<span class="h-6 w-6 rounded-full bg-gray-200 dark:bg-gray-800"></span>
<span class="hidden sm:inline">My account</span>
<span class="text-xs text-gray-500 dark:text-gray-400">▾</span>
</button>
<div
x-show="open"
x-transition.origin.top.right
@click.outside="open = false"
class="absolute right-0 mt-2 w-48 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-800 dark:bg-gray-900"
>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">Settings</a>
<div class="border-t border-gray-200 dark:border-gray-800"></div>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">Logout</a>
</div>
</div>
</x-andach-header-right>
</x-andach-header>
<x-andach-content>
<x-andach-sessions />
<div class="sm:flex sm:justify-between sm:items-center mb-2">
<!-- Left: Title -->
<div class="mb-4 sm:mb-0">
<x-andach-h>@yield('title', 'PAGE TITLE NOT SUPPLIED')</x-andach-h>
</div>
<!-- Right: Actions -->
<div class="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
@yield('title-right')
</div>
</div>
@yield('content')
</x-andach-content>
<x-andach-footer>
Copyright Andach
</x-andach-footer>
</x-andach-main>
</x-andach-layout>
</body>