menu

assets/css/base/_var.scss

@@ -45,6 +45,7 @@
   --color-accent: #00ff00;
   --color-accent-50: #e9ffe9;
   --color-accent-100: #d8fdd8;
+  --dark: black;
 
 
 

assets/css/components/_buttons.scss

@@ -19,6 +19,24 @@ button:disabled{
 
 }
 
+.soutenir{
+    a{
+        color: var(--color-accent);
+        &:hover{
+            color: var(--color-accent)!important;
+            text-decoration: underline!important;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+// DELETE ?
 
 .btn__default{
 

assets/css/partials/_site-footer.scss

@@ -1,6 +1,6 @@
 #site-footer{
 
-   background-color: black;
+   background-color: var(--dark);
    padding: calc(var(--padding-body)*2) var(--padding-body);
 
 

assets/css/partials/_site-header.scss

@@ -17,7 +17,7 @@
   width: calc(100vw - var(--padding-body)*2);
   height: var(--header-h);
   background-color: var(--color-bg);
-  border-bottom: var(--border-light);
+  // border-bottom: var(--border-light);
 
   display: flex;
   align-items: center;
@@ -44,17 +44,6 @@
     display: flex;
     align-items: center;
     gap: var(--gap); 
-  }
-
-  #btn--soutenir{
-    color: var(--color-accent);
-    a:hover{
-      color: var(--color-accent);
-      text-decoration: underline;
-    }
-  }
-
-  ul,  #btn--soutenir{
     text-transform: uppercase;
   }
 

assets/css/partials/_site-menu.scss

@@ -0,0 +1,86 @@
+#site-menu{
+    position: fixed;
+    width: 420px;
+    height: calc(100dvh - var(--header-h));
+    height: calc(100vh - var(--header-h));
+    top: var(--header-h);
+    right: 0;
+    background-color: var(--color-bg);
+    border-left: var(--border-light);
+    padding: var(--padding-body);
+    // background-color: red;
+
+    display: flex;
+    flex-direction: column;
+
+    .baseline{
+        font-size: var(--fs-medium);
+    }
+
+    form{
+        margin-top: calc(var(--spacing)*1);
+        margin-bottom: calc(var(--spacing)*1);
+        --icon: 40px;
+        display: grid;
+        grid-template-columns: var(--icon) 1fr;
+        input{
+            grid-column: 1/3;
+            grid-row: 1;
+            height: calc(var(--h-block) * 1.5);
+            width: 100%;
+            background: var(--color-bg);
+            border: 1px solid var(--color-txt);
+            padding-left: var(--icon);
+            font-family: var(--font);
+            font-size: var(--fs-normal);
+            color: var(--color-txt);
+            padding-top: 3px;
+            &::placeholder{
+                font-family: var(--font);
+                font-size: var(--fs-normal);
+                color: var(--color-txt);
+            }
+            &:focus{
+                border-color: var(--color-accent);
+                outline: none;
+            }
+        }
+
+        .icon{
+            grid-column: 1;
+            grid-row: 1;
+            z-index: 10;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            svg{
+                width: 20px;
+            }
+        }
+    }
+
+
+    nav{
+        flex-grow: 1;
+        ul{ 
+            list-style-type: none;
+            text-transform: uppercase;
+            li{
+                font-size: var(--fs-medium);
+                a{
+                    display: block;
+                    text-decoration: none;
+                    padding: 0.5em 0;
+                    &:hover{
+                        color: var(--grey-200);
+                    }
+                }
+            }
+
+            .highlight{
+                text-transform: uppercase;
+            }
+        }
+    }
+}

assets/css/style.scss

@@ -14,6 +14,7 @@
 
 
 @import 'partials/site-header';
+@import 'partials/site-menu';
 @import 'partials/site-footer';
 @import 'partials/main-layout';
 

assets/icons/search.svg

@@ -0,0 +1 @@
+<svg style="fill: var(--color-txt)" width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero"></path></svg>

components/site-footer.html

@@ -46,13 +46,7 @@
 
     <div class="footer__socials">
       <p>Suivez Index sur les réseaux sociaux</p>
-      <div class="container" w3-include-html="/components/socials.html">
+      <div class="container" w3-include-html="/components/socials.html"></div>
-
-      </div>
-
-
-
-  
     </div>
 
     <div class="footer__mentions">

components/site-header.html

@@ -13,13 +13,10 @@
     <ul>
         <li><a href="#">Enquêtes</a></li>
         <li><a href="#">Impact</a></li>
+        <li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
     </ul>
 </nav>
 
-<button id="btn--soutenir">
-    <a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a>
-</button>
-
 
 
   

components/site-menu.html

@@ -0,0 +1,24 @@
+<p class="baseline">Index est une ONG d’investigation numérique au service du public,
+de la vérité et de la justice.</p>
+
+<form aria-label="Formulaire de recherche">
+    <span class="icon" w3-include-html="/assets/icons/search.svg"></span>
+    <input type="text" id="search" class="input" placeholder="Rechercher" w3-include-html="/icons/search.svg">
+</form>
+
+
+<nav>
+    <ul>
+        <li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
+        <li class="highlight"><a href="#">Enquêtes</a></li>
+        <li class="highlight"><a href="#">Impact</a></li>
+        <li><a href="#">Contact</a></li>
+        <li><a href="#">À propos</a></li>
+        <li><a href="#">Ressources</a></li>
+        <li><a href="#">Newsletter</a></li>
+        <li><a href="#">Mentions légales</a></li>
+
+    </ul>
+</nav>
+
+<div class="socials" w3-include-html="/components/socials.html"></div>

index.html

@@ -12,7 +12,8 @@
 </head>
 <body>
 
-    <header id="site-header" w3-include-html="components/site-header.html"></header>
+    <header id="site-header" w3-include-html="/components/site-header.html"></header>
+    <div id="site-menu" w3-include-html="/components/site-menu.html"></div>
 
 
     <main>
@@ -24,7 +25,7 @@
     </main>
 
 
-    <footer id="site-footer" w3-include-html="components/site-footer.html"></footer>
+    <footer id="site-footer" w3-include-html="/components/site-footer.html"></footer>
     
 </body>
 </html>