ugurgaleri/resources/css/partials/header.scss

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

$dropdown-toggle_l_width_no_unit: 36;
$dropdown-toggle_s_width_no_unit: 28;

$dropdown-toggle_l_width: $dropdown-toggle_l_width_no_unit * 1px;
$dropdown-toggle_l_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_l_width_no_unit, 2))) * 1px;
$dropdown-toggle_l_second_bar: math.div($dropdown-toggle_l_width - 4, 2);
$dropdown-toggle_s_width: $dropdown-toggle_s_width_no_unit * 1px;
$dropdown-toggle_s_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_s_width_no_unit, 2))) * 1px;
$dropdown-toggle_s_second_bar: math.div($dropdown-toggle_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;
  }

  #logo {
    height: 56px;

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

  .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;
  }

  .dropdown-toggle {
    margin: 0 auto 0;
    width: $dropdown-toggle_l_width;
    height: $dropdown-toggle_l_width;
    position: relative;
    cursor: pointer;

    .bar {
      padding: 0;
      width: $dropdown-toggle_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: $dropdown-toggle_s_width;
      height: $dropdown-toggle_s_width;

      .bar {
        width: $dropdown-toggle_s_width;
      }
    }
  }

  .bar1 {
    top: 0;
  }

  .bar2,
  .bar3 {
    top: $dropdown-toggle_l_second_bar;

    @include mixins.header_overflow2 {
      top: $dropdown-toggle_s_second_bar;
    }
  }

  .bar3 {
    right: 0;
  }

  .bar4 {
    bottom: 0;
  }

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

    @include mixins.header_overflow2 {
      width: $dropdown-toggle_s_cross_width;
    }
  }

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

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

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

    @include mixins.header_overflow2 {
      width: $dropdown-toggle_s_cross_width;
    }
  }

  #toggle-label {
    display: none;

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