JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div class="menu">
  <nav class="menu__nav">
    <ul class="menu__list r-list">
      <li class="menu__group">
        <a href="https://catholicmeditation.com/" class="menu__link r-link">USCCB Readings</a>
      </li>
      <li class="menu__group">
        <a href="https://catholicmeditation.com/living-faith" class="menu__link r-link">Living Faith</a>
      </li>
      <li class="menu__group">
        <a href="https://catholicmeditation.com/word-among-us/" class="menu__link r-link">Word Among Us</a>
      </li>
      <li class="menu__group">
        <a href="https://catholicmeditation.com/regnum-christi/" class="menu__link r-link">Regnum Christi</a>
      </li>
      <li class="menu__group">
        <a href="https://catholicmeditation.com/presentation-ministries/" class="menu__link r-link">Presentation Media</a>
      </li>
      <li class="menu__group">
        <a href="https://catholicmeditation.com/food-for-journey/" class="menu__link r-link">Food for The Journey</a>
      </li>
       <li class="menu__group">
        <a href="https://catholicmeditation.com/evangeli/" class="menu__link r-link">Evangeli</a>
      </li>
       <li class="menu__group">
        <a href="https://catholicmeditation.com/random-post/" class="menu__link r-link">Random Thought</a>
      </li>
    </ul>
  </nav>
  <button class="menu__toggle r-button" type="button" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">

        
        <svg width="100" height="100" viewBox="0 0 100 100" id="test">
        <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
        <path class="line line2" d="M 20,50 H 80" />
        <path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954...

CSS

.r-button {
  background-color: transparent;
  padding: 0;
  border-width: 0;
  border-style: unset;
  border-color: var(--uirButtonBorderColor);
  cursor: pointer;
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {

  /* Remove the inner border and padding in Firefox. */

  border-style: none;
  padding: 0;
}

/* The component will reset browser's styles of link */

.r-link {
  display: inline-flex !important;
  color: #efefef !important;
  text-decoration: none !important;
}

/* The component will reset browser's styles of list */

.r-list {
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}

/* Basic styles of the hamburger component */




/*
=====
MENU STYLES
=====
*/

.menu {

  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

.menu__nav {
  box-sizing: border-box;
  width: 100%;
  height: 0;

  transition: opacity .2s ease-out;
  opacity: 0;

  display: flex;
  align-items: flex-end;
  z-index: 2;
}

.menu__list {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  top: -50px;
  left: 5vw;
}

.menu__toggle {
  box-sizing: border-box;
  width: 55px;
  height: 55px;
  flex: none;
  position: absolute;
  top: -100vh;
  left: 0vw;
}

.menu__toggle::before {
/* define circle behind hamburger */
  content: "";
  width: 1em;
  height: 1em;
  font-size: 6rem;

  background-color: #004400;
  border-radius: 10%;

  position: absolute;
  bottom: -.1em;

  left: calc(50% - .55em);
  z-index: -1;

  will-change: width, height;
  transition: transform 1s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    width 1s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    height 1s cubic-bezier(0.04, -0.1, 0.29, 0.98);
}

/* styles of hamburger's animation...

JavaScript

(function(){
  'use strict';

  class Menu {
    constructor(settings) {
      this.menuRootNode = settings.menuRootNode;
      this.isOpened = false;
    }
 
    changeMenuState(menuState) {
      return this.isOpened = !menuState;
    }

  }

  const menuClassesNames = {
    rootClass: 'menu',
    activeClass: 'menu_activated',
    toggleClass: 'menu__toggle',
  }
  
  const jsMenuNode = document.querySelector(`.${menuClassesNames.rootClass}`);
  const demoMenu = new Menu ({
    menuRootNode: jsMenuNode
  });
  

  
  function toggleMenu(event) {
    
      
      demoMenu.menuRootNode.classList.toggle(`${menuClassesNames.activeClass}`);
      
 
  }
  
  jsMenuNode.querySelector(`.${menuClassesNames.toggleClass}`).addEventListener('click', toggleMenu);
})();