<div class="wrapper">
  <input type="checkbox" id="menuToggler" class="input-toggler"/>
  <label for="menuToggler" class="menu-toggler">
    <span class="menu-toggler__line"></span>
    <span class="menu-toggler__line"></span>
    <span class="menu-toggler__line"></span>
  </label>
</div>
<a class="sb-link" href="//silvestarbistrovic.from.hr/en/articles/css-sidebar-toggle/">silvestarbistrovic.from.hr</a>

// variables
:root {
  --toggler-size: 30px;
  --toggler-line-number: 3;
  --toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1));
  --toggler-offset-left: 10px;
  --toggler-offset-top: 10px;
  --toggler-color: Tomato;
  --toggler-color-hover: Tomato;
}

// same as var(--toggler-line-number)
$total: 3;

// reset
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

// styling
.menu-toggler {
  display: block;
  width: var(--toggler-size);
  height: var(--toggler-size);
  position: relative;
  position: fixed;
  top: var(--toggler-offset-top);
  left: var(--toggler-offset-left);
  cursor: pointer;
  z-index: 1;
}

.menu-toggler__line {
  height: var(--toggler-line-size);
  background: var(--toggler-color);
  position: absolute;
  border-radius: calc(var(--toggler-line-size) / 2);
  left: 0;
  right: 0;
  transition: all .25s ease-out;
  
  $num: 1;
  
  @while $num <= $total {
    &:nth-child(#{$num}) {
      top: calc(var(--toggler-line-size) * #{$num} + (var(--toggler-line-size) * (#{$num} - 2)));
    }
    
    $num: $num + 1;
  }    
}

.input-toggler {
  position: absolute;
  left: -100%;
  
  &:checked ~ .menu-toggler {   
    .menu-toggler__line:not(:first-child):not(:last-child) {
      opacity: 0;
    }
    
    .menu-toggler__line:first-child,
    .menu-toggler__line:last-child {
      background-color: var(--toggler-color-hover);
    }
    
    .menu-toggler__line:first-child {
      transform: translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg);
    }
    
    .menu-toggler__line:last-child {
      transform: translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg);
    }
  }
}

// sig
.wrapper {
  height: calc(100vh - 50px);
}

.sb-link {
  display: flex;
  height: 50px;
  align-content: center;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #bb5555;
  transition: background .3s;
}

.sb-link:hover,
.sb-link:focus,
.sb-link:active {
  background: #f7f7f7;
}