save

assets/css/partials/_site-header.scss

@@ -1,110 +1,150 @@
-#site-header{
+@keyframes add-border {
+  from {
+    border-bottom-color: transparent;
+  }
+  to {
+    border-bottom: var(--grey-800);
+  }
+}
 
-    position: fixed;
-    left: 0px;
-    top: 0px;
-    z-index: 100000;
+#site-header {
 
-    width: 100vw;
-    height: var(--header-h);
-    padding: 0 var(--padding-body);
+  z-index: 900;
+  --gap: 3ch;
 
-    background-color: transparent;
-    border-bottom: var(--border);
-    border-color: transparent;
+  width: 100vw;
+  height: var(--header-h);
+  background-color: var(--color-bg);
+  padding: 0 var(--padding-body);
 
-    // display: grid;
-    // grid-template-columns: 1fr;
+  .site-header__inner{
+    width: 100%;
+    height: 100%;
 
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: var(--gap);
+  }
 
-    .burger svg{
-        fill: var(--color-txt);
-        width: 40px;
+
+  a{
+    text-decoration: none;
+    &:hover{
+      color: var(--grey-200);
     }
+  }
 
+
+  #site-title {
+    flex-grow: 2;
+    svg{
+      width: 100px;
+      @media #{$small}{
+        width: 80px;
+      }
+    }
+  }
+
+  .title-page{
+    display: none;
+    flex-grow: 2;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    font-size: var(--fs-small);
+    line-height: 2;
+   
+  }
+
+  ul{
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    gap: var(--gap); 
+    text-transform: uppercase;
+  }
+
+
+  #theme-toggle{
+    width: var(--h-block);
+    height: var(--h-block);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg{
+      width: 18px;
+      position: relative;
+      top: -2px;
+    
+    }
+  }
+
+  #lang-toggle{
+    display: flex;
+    gap: 1ch;
+    button:disabled{ color: var(--color-txt-light); }
+  }
+
+  #menu-toggle{
+    cursor: pointer;
+    svg{
+      width: 30px;
+    }
+    .close{ display: none; }
   
+  }
 
-    .site-title{
-        display: flex;
-        width: 120px;
-        overflow: hidden;
-        svg{
-            fill: var(--color-txt);
-            
-        }
+  button{
+    
+    &:hover{
+      svg{ fill: var(--grey-200)!important; }
     }
+  }
+
+}
 
 
+#site-header.is-visible{
+  position: fixed;
+  top: 0;
 
-    nav{
-        height: 0;
-        overflow: hidden;
-        opacity: 0;
+  .site-header__inner{
+    border-bottom: var(--border-light);
+
+    #nav-highlight li:not(.soutenir){
+      display: none;
     }
-    nav ul{
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 2ch;
-        list-style: none;
+    #site-title {
+      @media #{$small-up}{
+      flex-grow: 0;
+      width: calc((100vw - var(--max-w-content))/2 - var(--padding-body)*2);
+      } 
+      @media #{$medium}{
+        width: calc(var(--banner-medium) - var(--padding-body));
+      } 
+    } 
+    
+    .title-page{
+      @media #{$small-up}{
+       display: block;
+      }
+      flex-grow: 2;
     }
+  }
+
+  & ~ main{
+    margin-top: var(--header-h);
+  }
+}
 
 
-    .header-left, .header-right{
-        width: 100px;
-    }
+@media #{$medium}{
+  #nav-highlight{
+    display: none;
+  }
+}
 
 
-    .header-center{
-  
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-     
-    }
-
-
-    #go-to-panier{
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        gap: 1ch;
-        text-decoration: none;
-
-
-        #go-to-panier__nbr{
-        
-            min-width: 2.6ch;
-            height: 2.6ch;
-            border-radius: 1.3ch;
-            border: var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 6px;
-        }
-    }
-
-
-    &.is-shrinked{
-        background-color: var(--color-bg);
-        height: var(--header-h-shrinked);
-        transition: ease-in .3s;
-        border-color: var(--color-txt);
-
-        nav{
-            height: var(--h-block);
-            opacity: 1;
-        }
-
-        .site-title{
-            opacity: 0;
-            height: 0;
-        }
-    }
-}