Hamburger menu for WordPress custom theme

_header.scss

@import "menu/menu";

// Site Header
/************************************/
.site-header {
  font-family: $font-primary;
  // Mobile menu
  .site-header-navigation {
    display: flex;
    @media (min-width: $md) {
      display: none;
    }
  }
  // Desktop menu
  .menu-desktop-menu-container{
    display: none;
    @media (min-width: $sm){
      width: 80%;
    }
    @media (min-width: $md){
      display: flex;
      align-items: center;
    }
    @media (min-width: $lg) {
      margin-right: 30px;
    }
    .desktop-menu{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 0;
      width: 100%;
      .menu-item{
        list-style: none;
        margin: 0 10px;
        a{
          color: black;
          text-decoration: none;
        }
      }
    }
  }
  &-top{
    padding: 10px;
    background: $blue-dark;
    display: none;
      @media (min-width: 1180px) {
        display: block;
      }
    &-wrap{
      padding: 0 35px 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: auto;
      max-width: 1400px;
    }
    &-customer-service {
      color: white;
      &-txt{
        display: none;
        @media (min-width: 1180px) {
          display: inline-block;
        }
      }
      &-link{
        color: white;
      }
    }
    &-nav{
      color: $blue-light;
      display: flex;
      align-items: center;
      &-list{
        margin: 0;
        display: flex;
        justify-content: flex-end;
        gap: 30px;
        .menu-item{
          list-style: none;
          a{
            text-decoration: none;
            color: $blue-light;
            &:visited{
              color: $blue-light;
            }
          }
        }
      }
      &-link{
        color: $blue-light;
        text-decoration: none;
        color: white;
      }
    }
  }
  &-main{
    display: flex;
    justify-content: space-between;
    @include wrap;
    margin: 20px 0;
  }
  &-wrap {
      display: flex;
      justify-content: space-between;
      max-width: 1400px;
      @media (min-width: $md) {
        margin: auto;
      }
  }
  &-branding {
    @media (min-width: $md) {
      width: 20%;
      display: flex;
      align-items: center;
    }
    &-logo{
        width: 230px;
        padding: 0 20px;
        position: relative;
        z-index: 9;
        display: block;
        margin: 10px 0;
    } 
  }
  
  
  #site-navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    max-width: 1400px;
    text-transform: none;
    ul#menu {
      display: flex;
      li.menu-item {
        @media (min-width: $md){
          margin: 0;
        }
        a {
          color: black;
          padding: 20px 15px;
          position: relative;
          transition: all 0.5s;
          font-weight: 600;
          &:after {
            transition: all 0.5s;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 0%;
            content: ".";
            color: transparent;
            background: $blue-dark;
            height: 2px;
          }
          &:hover {
            color: $blue-dark;
          }
          &:hover:after {
            width: 100%;
          }
        }
        ul.sub-menu {
          li {
            margin: 0 10px;
          }
        }
        &.current-menu-item {
          a {
            color: black;
          }
          ul.sub-menu {
            a {
              color: black;
            }
          }
        }
      }
      ul.sub-menu {
        background: $grey-100;
        display: block;
        li {
          position: relative;
          a {
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            color: black;
            padding: 10px 0;
            font-weight: 300;
          }
        }
      }
    }
  }
}

_menu.scss

// Hamburger Menu
/************************************/
$breakpoint: 1400px;
@media (max-width: 1399px) {
  header {
    nav {
      position: relative;
      #toggle {
        padding: 10px;
        transition: 0.8s;
        z-index: 9;

        span {
          position: relative;
          width: 36px;
          height: 4px;
          background: black;
          border-radius: 4px;
          display: block;
          margin-bottom: 8px;
          transition: 0.5s;

          &:nth-child(1) {
            transform-origin: left;
          }
          &:nth-child(2) {
            transform-origin: center;
          }
          &:nth-child(3) {
            transform-origin: left;
            margin-bottom: 0;
          }
        }

        &.active {
          width: 55px;
          transition: 0.5s;
          z-index: 9;
          span {
            background: black;
          }
          span:nth-child(1) {
            transform: rotate(45deg);
            left: 3px;
          }
          span:nth-child(2) {
            transform: rotate(315deg);
            right: 3px;
          }
          span:nth-child(3) {
            opacity: 0;
            transform: scale(0);
          }
        }
      }
      ul#menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: $grey-100;
        z-index: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        display: flex;
        flex-direction: column;

        li {
          list-style: none;
          font-size: 1.2rem;
          line-height: 2;
          text-align: center;
          display: block;
          a {
            color: black;
            text-decoration: none;
            padding: 10px !important;
            &:hover {
              color: tomato;
            }
          }
        }
        ul.sub-menu {
          display: none !important;
        }
      }
      ul#menu.active {
        right: 0;
      }
    }
  }
  #toggle.active ul.menu {
    transform: translateX(-10%);
  }
} /*END*/

/* Small devices (tablets, 1000px and up) */
@media (min-width: $breakpoint) {
  .menu-text{
    display: none;
  }
  header nav #toggle {
    display: none;
  }
  ul#menu {
    display: flex;
    justify-content: space-around;
    li.menu-item {
      margin: 0 20px;
      a {
        color: white;
        font-weight: 300;
        font-size: 1.2rem;
      }
    }
  }
  .site-header .wrap #site-navigation ul#menu {
    justify-content: flex-end;
  }
} /*END*/

components.php

<?php
function mobile_menu(){ require get_theme_file_path('components/core/header/menu/menu-mobile.php'); }
function secondary_menu(){ require get_theme_file_path('components/core/header/menu/menu-secondary.php'); }
function desktop_menu(){ require get_theme_file_path('components/core/header/menu/menu-desktop.php'); }

menu-desktop.php

<?php
    wp_nav_menu(
        array( 
            'theme_location' => 'desktop_menu',
            'menu_class'        => 'desktop-menu',
        )
    );
?>

menu-mobile.php

<div class="site-header-navigation">
    <nav id="site-navigation" class="main-navigation">
        <div id="toggle" onclick="toggle()" aria-controls="primary-menu" aria-expanded="false">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <?php
        wp_nav_menu(
            array( 
                'theme_location' => 'menu-1',
                'menu_id'        => 'menu',
            )
        );
        ?>
    </nav>
</div>

menu-secondary.php

<?php
    wp_nav_menu(
        array( 
            'theme_location' => 'secondary_menu',
            'menu_class'        => 'site-header-top-nav-list',
        )
    );
?>

menu.js

function toggle(){
    var button = document.getElementById('toggle');
    var nav = document. getElementById('menu');
    button.classList.toggle('active');
    nav.classList.toggle('active');
}