improve nav design

assets/css/src/generic.css

@@ -2,6 +2,10 @@
   display: none;
 }
 
+.no-scroll {
+  overflow: hidden !important;
+}
+
 body {
   background-size: var(--unit--horizontal) var(--unit--vertical);
   background-image: linear-gradient(

assets/css/src/header.css

@@ -36,58 +36,6 @@
   transform: translateX(-2px) translateY(-2px);
 }
 
-/* #main-header {
-  position: fixed;
-  z-index: 3;
-  top: 0;
-  left: 0;
-  width: calc(100vw - (2 * var(--unit--horizontal)));
-  height: calc(var(--unit--vertical) * 11.5);
-  padding: 0 var(--unit--horizontal);
-  padding-bottom: 0;
-  transition: height 0.2s ease-in-out;
-}
-#logo {
-  position: relative;
-  height: 100%;
-}
-
-#logo__link {
-  position: relative;
-  transform: translateY(-3rem);
-  display: block;
-  height: 100%;
-}
-
-#main-header.open #actuel {
-  color: var(--color-background);
-}
-
-#logo #actuel,
-#logo #inactuel {
-  position: absolute;
-  mix-blend-mode: difference;
-}
-#logo #actuel {
-  top: 0;
-  right: 0;
-}
-#logo #inactuel {
-  top: 15vw;
-  transition: all 0.3s ease-in-out;
-}
-
-#main-header.minimized #logo #inactuel {
-  top: 0.1vw;
-} */
-
-body {
-  --entry-btns-height: 10svh;
-}
-body[data-template="home"] {
-  --entry-btns-height: 15svh;
-}
-
 .page-cover {
   position: relative;
   height: calc(100svh - var(--entry-btns-height));
@@ -129,19 +77,6 @@ button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
   content: "+";
 }
-button.open-nav::after {
-  margin-left: var(--unit--horizontal);
-}
-
-button.open-nav::after {
-  content: "";
-  position: absolute;
-  background-color: transparent;
-  height: var(--unit--vertical);
-  width: var(--unit--horizontal);
-  z-index: -1;
-  transition: all 0.5s var(--curve-sine);
-}
 
 #entry-btns.minimized {
   color: #000;

assets/css/src/nav.css

@@ -1,7 +1,16 @@
 /* ================= PANELS ================= */
-#desktop-nav {
+#nav-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: #000;
+  opacity: 0.7;
+  z-index: 2;
+  cursor: w-resize;
+}
+#nav-overlay:not(.nav-overlay--visible) {
   display: none;
 }
+
 .panel {
   display: none;
   position: fixed;
@@ -136,7 +145,11 @@ button.search__icon {
   overflow: hidden;
 }
 
-.panel-item-content__texts {
+button.see-more {
+  margin-bottom: var(--unit--vertical);
+}
+
+.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) {
   padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
@@ -146,21 +159,9 @@ button.search__icon {
 }
 
 @media screen and (min-width: 640px) {
-  #desktop-nav {
+  nav.panel {
-    display: block;
+    width: 40rem;
-    position: fixed;
-    box-sizing: border-box;
-    z-index: 3;
-    bottom: 0;
-    left: 0;
-    width: var(--padding-body);
-    height: 29vh;
-    padding: var(--unit--vertical) var(--unit--horizontal);
   }
-  #desktop-nav .empty {
-    height: calc(3 * var(--unit--vertical));
-  }
-
   #subscribe-btn-wrapper {
     height: 2.5rem;
     margin-bottom: 0.2rem;
@@ -194,7 +195,6 @@ button.search__icon {
   .panel {
     z-index: 4;
     width: var(--padding-body);
-    padding-top: var(--unit--vertical);
   }
 
   .panel-close {

assets/js/script.js

@@ -232,14 +232,24 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   const panelNav = document.querySelector(".panel");
+  const navOverlay = document.querySelector("#nav-overlay");
 
   const openNavBtn = document.querySelector("button.open-nav");
   openNavBtn.addEventListener("click", () => {
     panelNav.classList.add("panel--visible");
+    navOverlay.classList.add("nav-overlay--visible");
+    document.body.classList.add("no-scroll");
   });
 
   const closeNavBtn = document.querySelector(".panel-close");
   closeNavBtn.addEventListener("click", () => {
     panelNav.classList.remove("panel--visible");
+    navOverlay.classList.remove("nav-overlay--visible");
+    document.body.classList.remove("no-scroll");
+  });
+  navOverlay.addEventListener("click", () => {
+    panelNav.classList.remove("panel--visible");
+    navOverlay.classList.remove("nav-overlay--visible");
+    document.body.classList.remove("no-scroll");
   });
 });

site/snippets/cover.php

@@ -13,8 +13,4 @@ $isOpen = isset($isOpen) ? $isOpen : false;
       <?= $slots->text() ?>
     </div>
   <?php endif ?>
-</header>
+</header>
-
-<button
-  class="open-nav"
->textes</button>

site/snippets/nav.php

@@ -1,3 +1,4 @@
+
 <nav 
   class="panel"
   x-data="{search: ''}"
@@ -34,4 +35,5 @@
   <?php snippet('nav__texts--collection', ["collection" => "categories"]) ?>
   <?php snippet('nav__texts--collection', ["collection" => "years"]) ?>
   <button class="panel-close">fermer</button>
-</nav>
+</nav>
+<div id="nav-overlay"></div>

site/templates/home.php

@@ -7,12 +7,14 @@
       <a 
         href="#main-edito" 
         class="no-line" 
+        title="lire l'éditorial"
       >
         <h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle()->inline() ?></h2>
         <p 
           class="main-edito-btn | toggle-btn toggle-btn--left"
         >éditorial</p>
       </a>
+      <button class="plus-btn open-nav">textes</button>
       <?php endslot() ?>
     <?php endsnippet() ?>
     <div id="main-edito" class="content">