index-main/assets/css/partials/_site-header.scss

#site-header {
  z-index: var(--z-header);
  --gap: 3ch;

  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: var(--header-h);
  background-color: var(--color-bg);
  padding: 0 var(--padding-body);

  box-shadow: -1px 4px 10px 0px var(--color-bg);

  .site-header__inner {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--gap) * 0.25);
  }

  a {
    text-decoration: none;
    &:hover {
      color: var(--grey-200);
    }
  }

  #site-title {
    position: relative;
    top: -3px;
    width: 140px;

    svg {
      width: 100px;
    }

    @media #{$small} {
      svg {
        width: 80px;
      }
      top: -4px;
    }
  }

  #nav-highlight,
  #nav-investigation {
    flex-grow: 2;
    ul {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap);
      list-style-type: none;

      li {
        white-space: nowrap;
      }
    }
  }

  #nav-highlight ul {
    font-weight: 500;
    text-transform: uppercase;

    @media #{$medium} {
      font-size: var(--fs-small);
    }
    @media screen and (max-width: 890px) {
      justify-content: flex-end;
      padding-right: 2ch;

      li {
        display: none;
      }
      li.support {
        display: block;
      }
    }
  }

  #nav-investigation {
    position: absolute;
    // transition: top var(--transition-scroll);
    top: 10%;
    left: 0;
    display: flex;
    opacity: 0;
    // transform: translateY(-10px);
    transition: top 0.3s ease;
    pointer-events: none;

    min-width: 0;

    .title {
      text-transform: uppercase;
      font-size: var(--fs-small);
      font-weight: 500;

      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 2ch;
      padding-right: 2ch;
      text-align: center;
      color: var(--color-txt-light);
    }

    @media #{$medium} {
      ul {
        font-size: var(--fs-small);
        padding-left: 6ch;
        padding-right: 6ch;
      }
    }

    li {
      color: var(--color-txt-light);
      transition: color 0.3s ease;
    }

    li.is-selected {
      color: var(--color-txt);
      &:hover {
        color: var(--color-txt);
        pointer-events: none;
        a:hover {
          color: var(--color-txt);
        }
      }
    }
  }

  #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: 0.75ch;
    padding-right: 1.5ch;
    a {
      font-size: var(--fs-small);
      font-weight: 500;
    }
    button:disabled {
      color: var(--color-txt-light);
    }
  }

  #menu-toggle {
    cursor: pointer;
    svg {
      width: 30px;
      fill: var(--color-txt);
    }
    .close {
      display: none;
    }
  }

  button {
    &:hover {
      svg {
        fill: var(--grey-200) !important;
      }
    }
  }
}

// Animation, change header

#site-header.has-nav-investigation {
  #nav-highlight {
    display: none;
  }
  #nav-investigation {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    top: 0px;
    pointer-events: auto;
  }
}

@media #{$small-up} {
  #site-header #nav-investigation .title {
    display: none;
  }
}

@media #{$small} {
  #site-header #nav-highlight ul {
    display: none;
  }

  #site-header #nav-investigation .title {
    display: none;
  }

  #site-header.has-nav-investigation {
    #nav-investigation {
      ul {
        display: none;
      }
      .title {
        display: block;
      }
    }
  }
}

// @media #{$x-small}{
//   #site-header.has-nav-investigation{
//     #nav-investigation{
//       .title{ display: none; }
//     }
//   }

// }

//   @media #{$x-small}{
// [data-template="investigation"] #site-header{

//     #lang-toggle{ display: none; }
//     #theme-toggle{ padding-right: 1ch; }
//     #nav-investigation .title{
//       font-size: var(--fs-xsmall);
//     }
//   }
// }

// Quand le menu est ouvert : on dimme tout sauf le logo
body.menu-open #site-header {
  cursor: pointer;

  #nav-highlight,
  #nav-investigation {
    opacity: 0.15;
    pointer-events: none;
    transition: opacity 0.3s ease-in;
  }
}