From 556b2175a00a4f3d12570cd1f7e21bfb41545c51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Wed, 26 Jun 2024 12:15:51 +0200
Subject: [PATCH] menu

---
 resources/sass/club/base/_layout.scss         | 34 +++++++++++++++---
 .../club/utilities/_bootstrap-variables.scss  | 11 ++++++
 resources/views/club/icons/cloche.blade.php   | 11 ++++++
 .../views/club/icons/hamburger.blade.php      |  9 +++++
 .../views/club/icons/magnifier.blade.php      |  8 +++++
 resources/views/club/icons/ticket.blade.php   | 10 ++++++
 resources/views/club/layouts/header.blade.php | 36 +++++++++++++++----
 7 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 resources/views/club/icons/cloche.blade.php
 create mode 100644 resources/views/club/icons/hamburger.blade.php
 create mode 100644 resources/views/club/icons/magnifier.blade.php
 create mode 100644 resources/views/club/icons/ticket.blade.php

diff --git a/resources/sass/club/base/_layout.scss b/resources/sass/club/base/_layout.scss
index d5c89fb7..1e136af1 100644
--- a/resources/sass/club/base/_layout.scss
+++ b/resources/sass/club/base/_layout.scss
@@ -8,12 +8,38 @@ body {
 
     // * HEADER
     > header {
-        top: 0;
-        left: 0;
-        width: 100%;
-        transition: all 0.3s ease;
+        #main-nav {
+            position: fixed;
+            float: left;
+            bottom: .5rem;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 90vw;
+            height: 3.0625rem;
 
+            @include media-breakpoint-up(ssm) {
+                width: 21.875rem;
+            }
 
+            // * Menu Logo Nav item
+            .menu-logo {
+                position: absolute;
+                width: 6.75rem;
+                height: 4.625rem;
+                bottom: .4rem;
+                left: 50%;
+                transform: translateX(-50%);
+
+                @include media-breakpoint-up(ssm) {
+                    width: 8.75rem;
+                }
+
+                img {
+                    width: 100%;
+                    object-fit: contain;
+                }
+            }
+        }
     }
 
     > main {
diff --git a/resources/sass/club/utilities/_bootstrap-variables.scss b/resources/sass/club/utilities/_bootstrap-variables.scss
index 7ca653fe..d4f04402 100644
--- a/resources/sass/club/utilities/_bootstrap-variables.scss
+++ b/resources/sass/club/utilities/_bootstrap-variables.scss
@@ -43,3 +43,14 @@ $font-size-base: $font-default-size-base;
 $line-height-base: $line-default-height-base;
 $line-height-sm: $line-default-height-base * 0.85;
 $line-height-lg: $line-default-height-base * 1.25;
+$grid-breakpoints: map.merge((
+    xs: 0,
+    ssm: 320px,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+), (
+    xxxl: 1700px,
+))
diff --git a/resources/views/club/icons/cloche.blade.php b/resources/views/club/icons/cloche.blade.php
new file mode 100644
index 00000000..30b1874f
--- /dev/null
+++ b/resources/views/club/icons/cloche.blade.php
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="svg2" width="24" height="24" viewBox="0 0 24 24" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <defs id="defs2" />
+    <path id="path1"
+        d="m 11.731871,21.348142 c -2.5454497,0 -5.0908997,-0.4043 -7.5052597,-1.2127 -0.91767,-0.3168 -1.616852,-0.9614 -1.922743,-1.8026 -0.316815,-0.8412 -0.2075687,-1.7698 0.294967,-2.6 l 1.256336,-2.0866 c 0.26219,-0.437 0.50254,-1.311 0.50254,-1.8245 V 8.6645421 c 0,-4.06398 3.31018,-7.37416 7.3741597,-7.37416 4.06399,0 7.37419,3.31018 7.37419,7.37416 v 3.1571999 c 0,0.5026 0.2403,1.3875 0.5025,1.8354 l 1.2454,2.0757 c 0.4698,0.7865 0.5572,1.737 0.2404,2.6 -0.1547,0.4223 -0.4032,0.8039 -0.7268,1.1161 -0.3236,0.3123 -0.7139,0.547 -1.1414,0.6865 -2.4034,0.8084 -4.9488,1.2127 -7.49429,1.2127 z m 0,-18.4190599 c -3.1572297,0 -5.7354597,2.5673 -5.7354597,5.73546 v 3.1571999 c 0,0.7975 -0.32774,1.9774 -0.73195,2.6657 l -1.25634,2.0866 c -0.24035,0.4042 -0.30589,0.8302 -0.16387,1.1908 0.13109,0.3714 0.45883,0.6554 0.90675,0.8084 4.532,1.5294 9.4406597,1.5294 13.9726597,0 0.3933,-0.1311 0.6992,-0.4261 0.8412,-0.8194 0.142,-0.3932 0.1093,-0.8193 -0.1092,-1.1798 l -1.2564,-2.0866 c -0.4151,-0.7101 -0.7319,-1.8791 -0.7319,-2.6766 V 8.6645421 c 0,-3.16816 -2.5673,-5.73546 -5.73549,-5.73546 z"
+        fill="currentColor" />
+    <path id="path2"
+        d="m 13.765961,3.2218721 c -0.0765,0 -0.153,-0.01092 -0.2295,-0.03277 -0.3168,-0.0874 -0.6227,-0.15295 -0.9176,-0.19665 -0.92862,-0.12017 -1.82445,-0.05462 -2.6656497,0.19665 -0.30589,0.09832 -0.63363,0 -0.8412,-0.22942 -0.10342,-0.11306 -0.17269,-0.25312 -0.19976,-0.40393 -0.02707,-0.15082 -0.01084,-0.30623 0.04681,-0.4482 0.21752,-0.56148 0.60024,-1.043778 1.0976297,-1.38317103 0.49738,-0.339392 1.08603,-0.51991426 1.68817,-0.51771922 1.2454,0 2.3379,0.74287922 2.7858,1.90089025 0.1092,0.29497 0.0546,0.62271 -0.153,0.85213 -0.1638,0.17479 -0.3932,0.26219 -0.6117,0.26219 z m -2.03202,20.6137699 c -1.08155,0 -2.1303197,-0.437 -2.8950497,-1.2017 -0.76472,-0.7647 -1.20171,-1.8135 -1.20171,-2.895 h 1.6387 c 0,0.6445 0.26219,1.2782 0.72103,1.737 0.4588397,0.4588 1.0924697,0.721 1.7370297,0.721 1.35462,0 2.45802,-1.1034 2.45802,-2.458 h 1.6387 c 0,2.2614 -1.8353,4.0967 -4.09672,4.0967 z"
+        fill="currentColor" />
+</svg>
diff --git a/resources/views/club/icons/hamburger.blade.php b/resources/views/club/icons/hamburger.blade.php
new file mode 100644
index 00000000..59a324e2
--- /dev/null
+++ b/resources/views/club/icons/hamburger.blade.php
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="svg2" width="24" height="24" viewBox="0 0 24 24" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <defs id="defs2" />
+    <line id="line1" x1="2.4927325" y1="8.3859291" x2="21.992733" y2="8.3859291" stroke="currentColor" stroke-width="2.5"
+        stroke-linecap="round" />
+    <line id="line2" x1="2.4927325" y1="15.719179" x2="13.926033" y2="15.719179" stroke="currentColor" stroke-width="2.5"
+        stroke-linecap="round" />
+</svg>
diff --git a/resources/views/club/icons/magnifier.blade.php b/resources/views/club/icons/magnifier.blade.php
new file mode 100644
index 00000000..c45e1bb0
--- /dev/null
+++ b/resources/views/club/icons/magnifier.blade.php
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="svg1" width="24" height="24" viewBox="0 0 24 24" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <defs id="defs1" />
+    <circle id="circle1" cx="11.011889" cy="11.410412" r="6.2222199" stroke="currentColor" stroke-width="2.5" />
+    <line id="line1" x1="16.334768" y1="15.854892" x2="19.900368" y2="19.420492" stroke="currentColor" stroke-width="2.5"
+        stroke-linecap="round" />
+</svg>
diff --git a/resources/views/club/icons/ticket.blade.php b/resources/views/club/icons/ticket.blade.php
new file mode 100644
index 00000000..4a83d854
--- /dev/null
+++ b/resources/views/club/icons/ticket.blade.php
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="svg2" width="24" height="24" viewBox="0 0 24 24" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <defs id="defs2" />
+    <path id="path1"
+        d="m 20.89289,11.656309 c 2.485062,2.131551 2.625668,3.227907 0.702938,5.481688 l -2.884141,3.380763 c -1.92273,2.253781 -3.024747,2.284408 -5.509809,0.152857 L 3.2209271,12.110611 C 0.7358287,9.9789669 0.59524113,8.8827035 2.5179803,6.6288302 L 2.7583285,6.347154 C 3.6156913,7.082482 4.8498876,7.0482353 5.5132327,6.2706792 6.1765778,5.4931231 6.0191175,4.2652563 5.161764,3.5298355 L 5.4021029,3.2481594 C 7.3248512,0.99428597 8.4268128,0.96375177 10.911902,3.0953024 Z"
+        stroke="currentColor" stroke-width="1.85618" stroke-linecap="round" stroke-linejoin="round" />
+    <path id="path2" d="M 12.96397,4.2173815 5.1147834,13.571722" stroke="currentColor" stroke-width="1.85618"
+        stroke-dasharray="3.9, 3.9" />
+</svg>
diff --git a/resources/views/club/layouts/header.blade.php b/resources/views/club/layouts/header.blade.php
index 978bc515..ed9c2439 100644
--- a/resources/views/club/layouts/header.blade.php
+++ b/resources/views/club/layouts/header.blade.php
@@ -1,11 +1,33 @@
-<nav class="navbar navbar-expand rounded-pill bg-body py-0 shadow" id="main-nav">
-    {{-- MENU PHONE & TABLET --}}
-    <ul class="navbar-nav flex-grow-1 w-100 d-flex d-xl-none">
+<nav class="navbar navbar-expand rounded-1 bg-light z-3 py-0" id="main-nav" data-bs-theme="light">
+    <ul class="navbar-nav flex-grow-1 w-100 d-flex">
         {{-- MENU BTN --}}
-        <li class="nav-item no-wrap ms-3">
-            <button class="btn btn-link bars text-decoration-none text-secondary" data-bs-toggle="offcanvas"
-                data-bs-target="#offcanvas-main-menu" title="{{ __('Ouvrir Le menu') }}"
-                aria-controls="offcanvas-main-menu">&nbsp;&nbsp;</button>
+        <li class="nav-item ms-1">
+            <button class="btn btn-link text-tertiary p-1" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-main-menu"
+                title="{{ __('Ouvrir Le menu') }}" aria-controls="offcanvas-main-menu">@include('club.icons.hamburger')</button>
+        </li>
+        {{-- SEARCH BTN --}}
+        <li class="nav-item">
+            <button class="btn btn-link text-tertiary p-1" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search-menu"
+                title="{{ __('Ouvrir Le menu de recherche') }}" aria-controls="offcanvas-search-menu">@include('club.icons.magnifier')</button>
+        </li>
+
+        <li class="nav-item mx-auto">
+            <a class="btn btn-link menu-logo p-1" href="#FIXME::notifications">
+                <img src="{{ Vite::asset('resources/assets/images/legaulois-logo.png') }}"
+                    title="{{ __(':appname, Volaille 100% Française', ['appname' => config('app.name')]) }}" alt="{{ config('app.name') }}"
+                    role="img">
+            </a>
+        </li>
+
+        <li class="nav-item">
+            <a class="btn btn-link text-tertiary p-1" href="#FIXME::notifications">
+                @include('club.icons.cloche')
+            </a>
+        </li>
+        <li class="nav-item me-1">
+            <a class="btn btn-link text-tertiary p-1" href="#FIXME::br">
+                @include('club.icons.ticket')
+            </a>
         </li>
     </ul>
 </nav>