jev/opensem
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new: make the menu visible on mobile

Browse Source
This commit is contained in:
Valentin Lab
2025-12-13 20:10:42 +01:00
parent ebdf0c0d8e
commit 1db3725fb2
6 changed files with 82 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/shop/css/site.css
View File

@@ -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;
}
}

14
resources/shop/js/site.js
View File

@@ -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();
if ($(this).next('.submenu').length) {
$(this).next('.submenu').toggle();
var $submenu = $(this).next('.submenu');
if ($submenu.length) {
e.preventDefault();
$submenu.toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
});
});
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
});
}

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

@@ -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>

7
resources/views/Shop/layout/partials/search.blade.php
View File

@@ -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>

19
resources/views/Shop/layout/partials/sections-menu-list.blade.php Normal file
View File

@@ -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>

28
resources/views/Shop/layout/partials/sections.blade.php
View File

@@ -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">
<div class="collapse navbar-collapse" id="navbarContent">
<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>
<nav class="navbar navbar-expand-lg navbar-dark p-0">
<div class="navbar-collapse show" id="navbarContent">
@include('Shop.layout.partials.sections-menu-list')
</div>
</nav>
</div>
</div>
</div>