new: make the menu visible on mobile

resources/shop/css/site.css

@@ -348,4 +348,31 @@ div.megamenu ul.megamenu li.megamenu.level1
 	.dropdown-menu > li:hover > .submenu{
 		display: block;
 	}
-}
+}
+
+@media (max-width: 991.98px){
+	#navbarContentMobile .navbar-nav {
+		flex-direction: column;
+	}
+	#navbarContentMobile .navbar-nav .col {
+		flex: 0 0 100%;
+		max-width: 100%;
+	}
+	#navbarContentMobile .dropdown-menu {
+		display: block;
+		position: static;
+		float: none;
+		box-shadow: none;
+		background: transparent;
+	}
+	#navbarContentMobile .dropdown-toggle::after {
+		display: none;
+	}
+	#navbarContentMobile .dropdown-menu .container,
+	#navbarContentMobile .dropdown-menu .row {
+		margin: 0;
+	}
+	#navbarContentMobile .dropdown-menu .shadow {
+		box-shadow: none !important;
+	}
+}

resources/shop/js/site.js

@@ -32,12 +32,14 @@ $(document).on('click', '.dropdown-menu', function (e) {
 // make it as accordion for smaller screens
 if ($(window).width() < 992) {
 	$('.dropdown-menu a').click(function(e) {
-		e.preventDefault();
+		var $submenu = $(this).next('.submenu');
-		if ($(this).next('.submenu').length) {
+		if ($submenu.length) {
-			$(this).next('.submenu').toggle();
+			e.preventDefault();
+			$submenu.toggle();
 		}
-		$('.dropdown').on('hide.bs.dropdown', function () {
+	});
-			$(this).find('.submenu').hide();
+
-		});
+	$('.dropdown').on('hide.bs.dropdown', function () {
+		$(this).find('.submenu').hide();
 	});
 }

resources/views/Shop/layout/partials/header-nav.blade.php

@@ -1,18 +1,28 @@
-<div class="row bg-light">
+<div class="row bg-light align-items-center">
 
-    <div class="col-sm-12 col-lg-5">
+    <div class="col-6 col-lg-5 d-flex align-items-center">
         <a href="/"><img src="/img/logo.png" height="52" alt="Jardin'Envie"></a>
-        <span class="green ml-3">Variétés Paysannes de la Semence à l'Assiette</span>
+        <span class="green ml-3 d-none d-md-inline">Variétés Paysannes de la Semence à l'Assiette</span>
     </div>
 
-    <div class="col-sm-12 col-lg-4 pt-2">
+    <div class="col-12 col-lg-4 pt-2 order-3 order-lg-2">
         @include('Shop.layout.partials.search')
     </div>
 
-    <div class="col-sm-12 col-lg-3 pt-2 text-right">
+    <div class="col-6 col-lg-3 pt-2 text-right order-2 order-lg-3 d-flex justify-content-end align-items-center">
         @include('Shop.layout.partials.header-catalog')
         @include('Shop.layout.partials.header-profile')
         @include('Shop.layout.partials.header-basket')
     </div>
 
 </div>
+
+<div class="row d-lg-none bg-green-dark">
+    <div class="col-12 p-0">
+        <div class="collapse" id="navbarContentMobile">
+            <nav class="navbar navbar-dark p-0">
+                @include('Shop.layout.partials.sections-menu-list')
+            </nav>
+        </div>
+    </div>
+</div>

resources/views/Shop/layout/partials/search.blade.php

@@ -10,6 +10,13 @@
         <div class="input-group-append">
             <span class="input-group-text"><i class="btn btn-sm fa fa-search"></i></span>
         </div>
+        <div class="input-group-append d-lg-none">
+            <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse"
+                data-target="#navbarContentMobile" aria-controls="navbarContentMobile" aria-expanded="false"
+                aria-label="Menu catégories">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
     </div>
 </form>
 

resources/views/Shop/layout/partials/sections-menu-list.blade.php

@@ -0,0 +1,19 @@
+<ul class="navbar-nav w-100">
+    @foreach ($categories as $menu)
+        <li class="nav-item dropdown megamenu p-2 col 
+        @if (in_array($menu['id'], [$category['id'] ?? false, $category['parent_id'] ?? false, $category['parent']['parent_id'] ?? false])) active @endif">
+            @if ($menu['children'] ?? false)
+                <a id="megamenu_{{ $menu['id'] }}" href="{{ route('Shop.Categories.show', ['id' => $menu['id']]) }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle text-uppercase">
+                    {{ $menu['name'] }}
+                </a>
+                <div aria-labelledby="megamenu_{{ $menu['id'] }}" class="dropdown-menu border-0 p-0 m-0">
+                    @include('Shop.layout.partials.megamenu')
+                </div>
+            @else
+                <a href="{{ route('Shop.Categories.show', ['id' => $menu['id']]) }}" class="nav-link text-uppercase text-white">
+                    {{ $menu['name'] }}
+                </a>
+            @endif
+        </li>
+    @endforeach
+</ul>

resources/views/Shop/layout/partials/sections.blade.php

@@ -1,27 +1,9 @@
-<div class="row mb-3 bg-green-dark">
+<div class="row mb-3 bg-green-dark d-none d-lg-block">
 	<div class="col-12 pl-0 pr-0">
-		<nav class="navbar navbar-expand-lg p-0">
+		<nav class="navbar navbar-expand-lg navbar-dark p-0">
-			<div class="collapse navbar-collapse" id="navbarContent">
+			<div class="navbar-collapse show" id="navbarContent">
-				<ul class="navbar-nav w-100">
+				@include('Shop.layout.partials.sections-menu-list')
-					@foreach ($categories as $menu)
-						<li class="nav-item dropdown megamenu p-2 col 
-						@if (in_array($menu['id'], [$category['id'] ?? false, $category['parent_id'] ?? false, $category['parent']['parent_id'] ?? false])) active @endif">
-							@if ($menu['children'] ?? false)
-								<a id="megamenu_{{ $menu['id'] }}" href="{{ route('Shop.Categories.show', ['id' => $menu['id']]) }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle text-uppercase">
-									{{ $menu['name'] }}
-								</a>
-								<div aria-labelledby="megamenu_{{ $menu['id'] }}" class="dropdown-menu border-0 p-0 m-0">
-									@include('Shop.layout.partials.megamenu')
-								</div>
-							@else
-								<a href="{{ route('Shop.Categories.show', ['id' => $menu['id']]) }}" class="nav-link text-uppercase text-white">
-									{{ $menu['name'] }}
-								</a>
-							@endif
-						</li>
-					@endforeach
-				</ul>
 			</div>
 		</nav>
 	</div>
-</div>
+</div>