greyscaled

<div class="navigation">
  <input class="navigation__cbox" id="DrawerToggle" type="checkbox"/>
  <label class="navigation__hamburger-box" for="DrawerToggle">
    <span class="navigation__hamburger">&nbsp;</span>
  </label>
</div>

greyscaled

.navigation {
  &__cbox { display: none; }
  &__hamburger-box {
    width: 4rem;
    height: 4rem;
    
    position: absolute;
    top: 3rem;
    left: 3rem;
    

greyscaled

<ul>
  <li>sassy</li>
  <li>sassy</li>
  <li>boi</li>
</ul>

<style>
ul { list-style:none; }
li::before { content: "💅 "; }
li::after { content: "✨"; }

greyscaled

.navigation {
  // ...
  
  &__hamburger {
    margin-top: 2rem;
    position: relative;
  }
}

greyscaled

.navigation {
  // ...
  &__hamburger {
    margin-top: 2rem; // middle line 'meat' of burger
    position: relative;
    
    // this sets the style for all 3 lines
    &,
    &::before,
    &::after {

greyscaled

.navigation {
  // ...
  &__hamburger {
    margin-top: 2rem; // middle line 'meat' of burger
    position: relative;
    
    // this sets the style for all 3 lines
    &,
    &::before,
    &::after {

greyscaled

$hamburger-height: 4rem;

.navigation {
  &__cbox { display: none; }
  &__hamburger-box {
    width: $hamburger-height;
    height: $hamburger-height;
    
    position: absolute;
    top: 3rem;

greyscaled

<div class="navigation">
  <input class="navigation__cbox"/>
  ...
  
  <nav class="navigation_nav">
  </nav>
</div>

greyscaled

$drawer-width: 80vw;
.navigation {
  &__nav {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;

  // this hides the navigation drawer

greyscaled

// R defined elsewhere

function Node (value = null) {
  this.value = value
  this.next = new Array(R)
}