dockergprompt/resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'GPrompt') }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Roboto', sans-serif; background-color: #f8f9fc; }
        #wrapper { display: flex; width: 100%; align-items: stretch; }
        #sidebar { min-width: 250px; max-width: 250px; min-height: 100vh; transition: all 0.3s; background: #2c3e50; color: #fff; }
        #sidebar.active { margin-left: -250px; }
        #sidebar .sidebar-brand { padding: 1.5rem 1rem; font-size: 1.25rem; font-weight: 700; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
        #sidebar ul.components { padding: 1rem 0; }
        #sidebar ul li a { padding: 0.75rem 1.5rem; font-size: 0.95rem; display: block; color: rgba(255,255,255,0.8); text-decoration: none; transition: 0.2s; }
        #sidebar ul li a:hover, #sidebar ul li a.active { color: #fff; background: rgba(255,255,255,0.05); }
        #sidebar ul li a i { margin-right: 0.75rem; }
        #content { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
        .navbar { box-shadow: 0 0.15rem 1.75rem 0 rgba(58,59,69,0.15); }
        .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 0; }
        .card { box-shadow: 0 0.15rem 1.75rem 0 rgba(58,59,69,0.15); border: none; }
        .card-header { background-color: #f8f9fc; border-bottom: 1px solid #e3e6f0; }
        .btn-primary { background-color: #4e73df; border-color: #4e73df; }
        .btn-primary:hover { background-color: #2e59d9; border-color: #2653d3; }
        .sidebar-toggle { cursor: pointer; border: none; background: transparent; font-size: 1.2rem; color: #5a5c69; }
        @media (max-width: 768px) {
            #sidebar { margin-left: -250px; position: fixed; z-index: 1050; }
            #sidebar.active { margin-left: 0; }
            #sidebarCollapse span { display: none; }
        }
    </style>
</head>
<body>
<div id="wrapper">
    @include('layouts.sidebar')

    <div id="content">
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top">
            <div class="container-fluid">
                <button id="sidebarToggle" class="btn btn-link sidebar-toggle me-2" type="button" aria-label="Toggle sidebar">
                    <i class="bi bi-list fs-4"></i>
                </button>
                <ul class="navbar-nav ms-auto">
                    @auth
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                                <span class="me-2 d-none d-lg-inline text-gray-600 small">{{ Auth::user()->name }}</span>
                                <i class="bi bi-person-circle fs-5"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                                <li><a class="dropdown-item" href="{{ route('dashboard') }}"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a></li>
                                <li><a class="dropdown-item" href="{{ route('profile.index') }}"><i class="bi bi-person me-2"></i>Perfil</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <form method="POST" action="{{ route('logout') }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item"><i class="bi bi-box-arrow-right me-2"></i>Sair</button>
                                    </form>
                                </li>
                            </ul>
                        </li>
                    @endauth
                </ul>
            </div>
        </nav>

            <div class="container-fluid">
                @isset($breadcrumbs)
                    <nav aria-label="breadcrumb" class="mb-3">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('welcome') }}"><i class="bi bi-house-door"></i> Início</a></li>
                            @foreach($breadcrumbs as $label => $url)
                                <li class="breadcrumb-item"><a href="{{ $url }}">{{ $label }}</a></li>
                            @endforeach
                            @isset($title)
                                <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
                            @endisset
                        </ol>
                    </nav>
                @endisset

                @hasSection('header')
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">@yield('header')</h1>
                    </div>
                @endif

            <main>
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
                    </div>
                @endif
                @yield('content')
            </main>
        </div>

        @include('components.app-footer')
    </div>
</div>

@include('components.cookie-consent-banner')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    @yield('scripts')
    <script>
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                initSidebar();
            });
        } else {
            initSidebar();
        }

        function initSidebar() {
            const sidebar = document.getElementById('sidebar');
            const sidebarCollapse = document.getElementById('sidebarCollapse');
            const sidebarToggle = document.getElementById('sidebarToggle');
            const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');

            function toggleSidebar() {
                sidebar.classList.toggle('active');

                if (sidebar.classList.contains('active')) {
                    if (sidebarToggleIcon) {
                        sidebarToggleIcon.classList.remove('bi-chevron-left');
                        sidebarToggleIcon.classList.add('bi-chevron-right');
                    }
                } else {
                    if (sidebarToggleIcon) {
                        sidebarToggleIcon.classList.remove('bi-chevron-right');
                        sidebarToggleIcon.classList.add('bi-chevron-left');
                    }
                }
            }

            if (sidebar && sidebarCollapse) {
                sidebarCollapse.addEventListener('click', toggleSidebar);
            }

            if (sidebar && sidebarToggle) {
                sidebarToggle.addEventListener('click', toggleSidebar);
            }
        }
    </script>
</body>
</html>