Dashboard Layout

How it works?

The accordion uses collapse internally to make it collapsible. To render an accordion that's expanded, add the show prop on the x-accordion.item component.

<x-dashboard title="Dashboard Layout">

    <!-- Page content go here... -->

    <x-slot name="header" id="main" size="fluid" color="primary" sticky dark expand>
        <x-navbar.brand class="d-inline-block py-0 col-md-3 col-lg-2 pe-2 ps-1" src="static/brand/logo.svg" />

        <x-navbar.collapse class="d-md-flex align-items-center w-100">
            <nav class="nav navbar-nav me-auto">
                <x-link to="#" class="nav-link" active="fw-bold active">Home</x-link>
                <x-link to="#" class="nav-link" active="fw-bold active">Link</x-link>
                <x-link to="#" class="nav-link" active="fw-bold active">Another Link</x-link>
            </nav>

          <x-button :color="false"
                    class="navbar-toggler border-0 d-block d-md-none"
                    toggle="collapse"
                    target="sidebar"
                    expanded="false"><span class="navbar-toggler-icon"></span></x-button>
        </x-navbar.collapse>
    </x-slot>

    <x-slot name="sidebar">
        <x-sidebar id="sidebar" light>
            <ul class="list-unstyled px-2">
                <x-sidebar.nav.collapsible title="Section One" id="one" collapsed>
                    <li><x-link to="#" class="link-dark rounded">Link One</x-link></li>
                    <li><x-link to="#" class="link-dark rounded">Link Two</x-link></li>
                </x-sidebar.nav.collapsible>

                <x-sidebar.nav.collapsible title="Section Two" id="two">
                    <li><x-link to="#" class="link-dark rounded">Link Three</x-link></li>
                    <li><x-link to="#" class="link-dark rounded">Link Four</x-link></li>
                </x-sidebar.nav.collapsible>
            </ul>
        </x-sidebar>
    </x-slot>
</x-dashboard>

<!DOCTYPE html>
<html lang="en" data-debug="true" class="min-vh-100" data-controller="app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf_token" content="hfLI3NFNs13njfQrOaVwFzdNs1VV0TNR9T4Spy95">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <title>Dashboard Layout | Laravel</title>
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="/css/app.css">
    <script src="/js/app.js" defer></script>
</head>
<body class="dashboard min-vh-100">
<header class="navbar navbar-expand sticky-top navbar-dark bg-primary dashboard__header flex-shrink-0" role="navigation">
    <div class="container-fluid">
        <a class="navbar-brand d-inline-block py-0 col-md-3 col-lg-2 pe-2 ps-1" href="/">
            <img src="http://laraloop3.test/static/brand/logo.svg" alt="Logo" width="120" height="auto">
        </a>
        <div class="navbar-collapse collapse d-md-flex align-items-center w-100" id="navbar">
            <nav class="nav navbar-nav me-auto">
                <a href="http://laraloop3.test/#" class="nav-link">Home</a>
                <a href="http://laraloop3.test/#" class="nav-link">Link</a>
                <a href="http://laraloop3.test/#" class="nav-link">Another Link</a>
            </nav>
            <button type="button" data-bs-toggle="collapse" class="btn btn-primary border-0 d-block d-md-none" data-bs-target="#collapseSidebar" aria-expanded="false" aria-controls="collapseSidebar" id="sidebar"><span class="navbar-toggler-icon"></span></button>
        </div>
    </div>
</header>
<main class="dashboard__main container-fluid">
    <div class="dashboard__content row">
        <aside id="collapseSidebar" class="sidebar sidebar--sticky col-md-3 col-lg-2 d-md-block collapse bg-light">
            <div class="sidebar__content pt-3">
                <ul class="list-unstyled px-2">
                    <li class="mb-1">
                        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#one-collapse" aria-expanded="true">Section One</button>
                        <div class="collapse show" id="one-collapse">
                            <ul class="sidebar__nav btn-toggle-nav list-unstyled fw-normal pb-1 small">
                                <li><a href="http://laraloop3.test/#" class="link-dark rounded">Link One</a>
                                </li>
                                <li><a href="http://laraloop3.test/#" class="link-dark rounded">Link Two</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="mb-1">
                        <button class="btn btn-toggle align-items-center rounded " data-bs-toggle="collapse" data-bs-target="#two-collapse" aria-expanded="false">Section Two</button>
                        <div class="collapse " id="two-collapse">
                            <ul class="sidebar__nav btn-toggle-nav list-unstyled fw-normal pb-1 small">
                                <li><a href="http://laraloop3.test/#" class="link-dark rounded">Link Three</a>
                                </li>
                                <li><a href="http://laraloop3.test/#" class="link-dark rounded">Link Four</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </aside>
        <div class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-4 border-bottom">
                <h1 class="h2">Dashboard Layout</h1>
            </div>
            <div class="flex-shrink-0">
                <!-- Page content go here... -->
            </div>
        </div>
    </div>
</main>
</body>
</html>