new bootstrap navigation

.idea/workspace.xml

@@ -58,6 +58,8 @@
       <workItem from="1661893105257" duration="2349000" />
       <workItem from="1661946156009" duration="594000" />
       <workItem from="1662027309116" duration="11385000" />
+      <workItem from="1662115692620" duration="1346000" />
+      <workItem from="1662283223529" duration="1969000" />
     </task>
     <servers />
   </component>

content/master.blade.php

@@ -28,30 +28,68 @@
     </nav>
     <nav style="background-color: #79b27f" class="pt-5 pb-5">
         <div class="container">
-            <div class="row">
+
-                <div class="col-3">
+            <nav class="navbar navbar-expand-lg">
+                <div class="container-fluid">
                     <svg  style="fill: beige; width: 50px; margin-top:-60px;margin-right: -10px;"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.fa-secondary{opacity:.4}</style></defs><path d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z" class="fa-secondary"/><path d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z" class="fa-primary"/></svg>
                     <a href="{{url('/')}}" class="fs-2 fw-bold text-decoration-none">Areya Energy</a>
-                </div>
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                @unless(Request::is('checkout'))
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 
-                    <div class="col-2 fs-5 mt-2 text-center ">
+                            <style>
-                        <a href="{{url('/balkonkraftwerke')}}" class="text-decoration-none mt-2 fw-bold">Balkonkraftwerke</a>
+                                .nav-item a{
-                    </div>
+                                    font-weight: bold;
-                    <div class="col-2 fs-5 mt-2 text-center ">
+                                    color: white;
-                        <a href="{{url('/produkte')}}" class="text-decoration-none mt-2 fw-bold">Produkte</a>
+                                    font-size: 20px;
-                    </div>
+                                }
-                    <div class="col-2 fs-5 mt-2 text-center ">
+
-                        <a href="{{url('/service')}}" class="text-decoration-none mt-2 fw-bold">Service</a>
+                                .nav-item a:hover, .nav-item a:active{
-                    </div>
+                                    color: #546c8a;
-                    <div class="col-2 fs-5 mt-2 text-center ">
+                                }
-                        <a href="{{url('/kontakt')}}" class="text-decoration-none mt-2 fw-bold">Kontakt</a>
+
-                    </div>
+                                .dropdown-item a{
-                    <div class="col-1 text-end">
+                                    color: red;
+                                }
+                            </style>
+
+                            <li class="nav-item mt-4 mt-md-0">
+                                <a class="nav-link mx-md-4" href="{{url('/balkonkraftwerke')}}">Balkonkraftwerke</a>
+                            </li>
+
+                            <li class="nav-item">
+                                <a class="nav-link mx-md-4" href="{{url('/produkte')}}">Produkte</a>
+                            </li>
+
+                            <li class="nav-item dropdown mx-md-4">
+                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                    Servicef
+
+
+                            <li class="nav-item mx-md-4">
+                                <a class="nav-link" href="{{url('/kontakt')}}">Kontakt</a>
+                            </li>
+
+                            <li class="nav-item ms-md-5">
                                 <a href="" data-bs-toggle="modal" data-bs-target="#ShoppingCart" class="position-relative">
                                     <svg style="fill: white; width: 30px; margin-top: 6px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                                     <span class="position-absolute top-10 start-90 badge rounded-pill bg-danger" style="display: none; right: -10px;" id="count-products-in-bag">0</span>
                                 </a>
+                            </li>
+
+
+
+                        </ul>
+
+                    </div>
+                </div>
+            </nav>
+
+        </div>
+    </nav>
+
     <div class="modal fade" id="ShoppingCart" tabindex="-1" aria-labelledby="ShoppingCart" aria-hidden="true">
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
@@ -114,12 +152,8 @@
             </div>
         </div>
     </div>
-                    </div>
 
-                @endunless
+
-            </div>
-        </div>
-    </nav>
     <div class="container">
         <div class="alert alert-warning mt-5 mb-2 alert-dismissible" style="display: none;" role="alert">
             <strong>Achtung:</strong>