Admin Layout

A full-page admin layout with a fixed navbar, collapsible sidebar, and main content area. Includes a user dropdown menu, dark mode support, and responsive mobile sidebar toggle.

Layout Preview

Dashboard
Admin User
  • Dashboard
  • Users
  • Products
  • Settings

Welcome

This is the main content area of the admin layout.

Blade code

<div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg">
    <div class="flex items-center justify-between mb-4 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
        <span class="text-lg font-semibold text-gray-900 dark:text-white">Dashboard</span>
        <div class="flex items-center gap-2">
            <span class="text-sm text-gray-500 dark:text-gray-400">Admin User</span>
        </div>
    </div>
    <div class="flex gap-4">
        <div class="w-48 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li class="font-medium text-gray-900 dark:text-white">Dashboard</li>
                <li>Users</li>
                <li>Products</li>
                <li>Settings</li>
            </ul>
        </div>
        <div class="flex-1 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white">Welcome</h2>
            <p class="mt-2 text-gray-500 dark:text-gray-400">This is the main content area of the admin layout.</p>
        </div>
    </div>
</div>

Usage

Use the admin layout as a full-page wrapper:

<x-fwb.layouts.admin title="Dashboard">
    <div class="p-4">
        <h1>Dashboard content</h1>
    </div>
</x-fwb.layouts.admin>

Properties

Prop Type Default Description
title ?string null Page title for the document <title> tag

Slots

Slot Description
default Main content area
logo Custom logo in the navbar (defaults to app name)
sidebarNav Custom sidebar navigation (defaults to Dashboard link)