update layout

public/css/style.css

@@ -1,10 +1,16 @@
 body {
     background: #333333;
+    margin: 0 auto;
+    color: #f3f3f3;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 0;
 }
 
 .container-body {
-    padding-top: 50px;
-    color: #f3f3f3;
+    margin-top: 100px;
+    margin-bottom: 40px;
 }
 
 .menu p {
@@ -22,6 +28,6 @@ footer {
     padding: 10px;
 }
 
-a {
+footer a {
     color: #ffffff;
 }

resources/views/layouts/header.blade.php

@@ -1,14 +1,47 @@
 <header>
 
             @section('sidebar')
-                <nav class="navbar bg-body-tertiary">
-                    <div class="container menu">
-                        <a class="navbar-brand" href="#">
-                        <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
-                        </a>
-                        <p>Menu</p>
+                <nav class="navbar bg-body-tertiary fixed-top">
+                    <div class="container-fluid">
+                        <a class="navbar-brand" href="/">LaraMaps</a>
+                        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+                        <div class="offcanvas-header">
+                            <h5 class="offcanvas-title" id="offcanvasNavbarLabel">LaraMaps</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                        </div>
+                        <div class="offcanvas-body">
+                            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+                            <li class="nav-item">
+                                <a class="nav-link active" aria-current="page" href="/">Home</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/map">Route Simple Map</a>
+                            </li>
+                             <li class="nav-item">
+                                <a class="nav-link" href="/mapbootstrap">Route Bootstrap Map</a>
+                            </li>
+                            <li class="nav-item dropdown">
+                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                Contact me
+                                </a>
+                                <ul class="dropdown-menu">
+                                <li><a class="dropdown-item" href="https://www.linkedin.com/in/claudio-mecenas/">Linkedin</a></li>
+                                <li><a class="dropdown-item" href="https://github.com/claudiomecenas">Github</a></li>
+                                <li><a class="dropdown-item" href="https://www.youtube.com/@devsolto/videos">Youtube</a></li>
+                                <li><a class="dropdown-item" href="https://www.instagram.com/claudiomecenas/">Instagram</a></li>                                <li>
+                                <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="mailto:[email protected]">[email protected]</a></li>
+                                </ul>
+                            </li>
+                            </ul>
+                        </div>
+                        </div>
                     </div>
-                </nav>
+            </nav>
             @show
 
 </header>

resources/views/layouts/layout.blade.php

@@ -22,11 +22,6 @@
 
     @include('layouts.header')   
 
-    <div class="container-body">
-        <h1 class="text-center">Parque Ibirapuera</h1>
-        <div id="map"></div>  
-    </div> 
-
     @yield('content')
 
     @include('layouts.footer')

resources/views/map.blade.php

@@ -12,7 +12,10 @@
     </style>
 </head>
 <body>
+
+    <h1>Parque Ibirapuera</h1>
     <div id="map"></div>
+    <a href="/">Voltar</a>
 
     <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap" async defer></script>
     <script>

resources/views/mapbootstrap.blade.php

@@ -8,5 +8,11 @@
 @endsection
 
 @section('content')
-    <div id="map"></div>
+    <div class="container-body">
+        <h1 class="text-center">Parque Ibirapuera</h1>
+        <div id="map"></div>
+        <div style="padding-top: 10px">
+            <a class="voltar btn btn-light btn-sm" href="/">Voltar</a>
+        </div>
+    </div> 
 @endsection