ODOO4projetcs/ODOO4projects/themes/editor-hugo/assets/scss/templates/_navigation.scss

// start header style
header.sidenav {
  position: fixed;
  width: 110px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: $white;
  transition: .25s ease;
  padding-top: 15px;
  padding-bottom: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @include tablet {
    width: 100%;
    height: 80px;
    background-color: lighten(desaturate(adjust-hue($primary-color, 4), 2.87), 36.67);
    padding: 0;
    flex-direction: row;

    .is-top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding-left: 25px;
      > div {
        order: 1;
        display: flex;
        align-items: center;
      }
      .navbar-brand {
        order: 0;
      }
    }
  }

  .sidenav-toggler {
    background-color: transparent;
    border: 0;
    margin-bottom: 55px;

    &.logo-plain {
      margin-bottom: 25px;
    }

    @include tablet {
        margin-bottom: 0;
    }
    .toggler-icon {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 400ms;
      user-select: none;
      .line {
        fill:none;
        transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke: $dark;
        stroke-width:3;
        stroke-linecap:round;
      }
      .top {
        stroke-dasharray: 40 139;
      }
      .bottom {
        stroke-dasharray: 40 180;
      }
      &.active {
        transform: rotate(45deg);
        .top {
            stroke-dashoffset: -98px;
        }
        .bottom {
            stroke-dashoffset: -138px;
        }
      }
    }
  }

  .navbar-brand {
    transform: rotate(-90deg);
    display: inline-flex;
    padding: 0;
    &.plain {
      transform: rotate(0);
    }

    @include tablet {
      transform: rotate(0);
    }
  }
}

.sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($primary-color, 0.2);
  z-index: 15;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  &.show {
    opacity: 1;
    visibility: visible;
  }
}


// sidenav-menu
nav.sidenav-menu {
  position: fixed;
  top: 0;
  left: 110px;
  z-index: 99;
  background: darken($white, 1);
  height: 100%;
  width: 280px;
  display: flex;
  overflow-y: auto;
  padding: 15px 30px 44px 30px;
  transform: translate3d(-100%, 0, 0);
  transition: .2s ease;

  &.show {
    transform: translate3d(0, 0, 0);
    transition: .3s ease;
  }
  
  @include tablet {
    top: 0;
    left: 0;
    z-index: 99992;
  }

  .nav-item {
    display: block;

    &.active .nav-link {
      color: $primary-color !important;
    }

    &:first-child {
      margin-top: 8px;
    }
    &:last-child {
      margin-bottom: 8px;
    }

    .nav-link {
      font-weight: 500;
      color: $dark;
      position: relative;
      padding: 10px;

      &:hover {
        color: $primary-color;
      }
      
      &[data-toggle="collapse"]::after {
        content: "+";
        float: right;
        font-size: 24px;
        line-height: 1;
      }
      &[aria-expanded="true"]::after {
        content: "_";
        line-height: 0.3;
        font-size: 22px;
      }
    }
  }
  .nav-item ul li {
    a {
      font-size: 15px;
      padding: 7px 18px;
      display: inline-block;
      font-weight: 500;
    }
  }
}


// search block style
.search-toggle {
  background-color: transparent;
  border: 0;
  transition: .3s ease;
  padding: 10px;
  font-size: 22px;
  &:hover {
    color: $primary-color;
  }
}
.search-block {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: $white;
  z-index: 9999988999889;
  padding: 0 50px;
  display: none;
  form {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  input {
    border: 0;
    border-bottom: 1px solid #ddd;
    font-size: 22px;
    width: 500px;
    max-width: 100%;
    padding: 15px 0;
    margin: auto;
    letter-spacing: -1px;
    transition: .3s ease;
  }
  &.is-visible {
    input {
        border-bottom-color: $primary-color;
    }
  }
  [data-toggle="search-close"] {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 40px;
  }
}

// end header style