ugurgaleri/resources/sass/partials/header.scss

@use "../variables.scss";
@use "../mixins.scss";
@use "sass:math";

$toggle-label_l_width_no_unit: 36;
$toggle-label_s_width_no_unit: 28;

$toggle-label_l_width: $toggle-label_l_width_no_unit * 1px;
$toggle-label_l_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_l_width_no_unit, 2))) * 1px;
$toggle-label_l_second_bar: math.div($toggle-label_l_width - 4, 2);
$toggle-label_s_width: $toggle-label_s_width_no_unit * 1px;
$toggle-label_s_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_s_width_no_unit, 2))) * 1px;
$toggle-label_s_second_bar: math.div($toggle-label_s_width - 4, 2);


#header {
  // Height is set in main.scss
  background: variables.$clr_header;
  padding: 0 variables.$px_headerPadding;
  position: sticky;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  @include mixins.header_overflow2 {
    padding: 0 variables.$px_headerPadding2;
  }

  @include mixins.header_overflow3 {
    padding: 0 25px;
  }

  #logo {
    display: flex;
    align-items: center;
    height: 56px;

    @include mixins.header_overflow2 {
      height: 36px;
    }
  }

  .bounce-animation {
    span {
      font: 600 56px 'Oswald', sans-serif;
      display: inline-block;
      color: variables.$clr_brand;
      animation: bounce 2500ms infinite;
      animation-delay: calc(.1s * var(--i));

      @include mixins.header_overflow2 {
        font-size: 36px;
      }
    }
  }

  @keyframes bounce {
    0%,40%,100% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-5px)
    }
  }

  .navbar {
    display: flex;

    .nav-item {
      margin-right: 1vw;
      font: 18px "Montserrat", sans-serif;
      font-weight: 600;
      color: variables.$clr_nav_sleep;
      text-decoration: none;

      &:hover {
        color: variables.$clr_nav_active;
      }

      &:last-of-type {
        margin-right: 0;
      }

      @include mixins.header_overflow {
        display: none;
      }
    }
  }

  #toggle {
    display: none;
  }

  #toggle-label {
    margin: 0;
    width: $toggle-label_l_width;
    height: $toggle-label_l_width;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .bar {
      padding: 0;
      width: $toggle-label_l_width;
      height: 4px;
      background-color: variables.$clr_brand;
      display: block;
      border-radius: 4px;
      transition: all 0.4s ease-in-out;
      position: absolute;
    }

    .bar1 {
      transform-origin: 5%;
    }

    .bar4 {
      transform-origin: 5%;
    }

    @include mixins.header_overflow2 {
      width: $toggle-label_s_width;
      height: $toggle-label_s_width;

      .bar {
        width: $toggle-label_s_width;
      }
    }
  }

  .bar1 {
    top: 0;
  }

  .bar2,
  .bar3 {
    top: $toggle-label_l_second_bar;

    @include mixins.header_overflow2 {
      top: $toggle-label_s_second_bar;
    }
  }

  .bar3 {
    right: 0;
  }

  .bar4 {
    bottom: 0;
  }

  #toggle:checked + #toggle-label > .bar1{
    transform: rotate(45deg);
    height: 3px;
    width: $toggle-label_l_cross_width;

    @include mixins.header_overflow2 {
      width: $toggle-label_s_cross_width;
    }
  }

  #toggle:checked + #toggle-label > .bar3{
    transform: rotate(45deg);
    height: 3px;
    background-color: transparent;
  }

  #toggle:checked + #toggle-label > .bar2{
    transform: rotate(-45deg);
    height: 3px;
    background-color: transparent;
  }

  #toggle:checked + #toggle-label > .bar4{
    transform: rotate(-45deg);
    height: 3px;
    width: $toggle-label_l_cross_width;

    @include mixins.header_overflow2 {
      width: $toggle-label_s_cross_width;
    }
  }

  #toggle-label {
    display: none;

    @include mixins.header_overflow {
      display: block;
    }
  }
}