JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='overlay nav-drawer-closer'></div>



<nav class='drawer'>
  <header>
    <div class='row'>
      <div class='content'>
        <div class='icon x-icon nav-drawer-closer'>
          +
        </div>
      </div>
    </div>
  </header>
  <ul>
    <li>
      <div class='content'>
        <label>
          About
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li>
      <div class='content'>
        <label>
          Our Team
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li>
      <div class='content'>
        <label>
          Contact
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li>
      <div class='content'>
        <label>
          Sign Up
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li>
      <div class='content'>
        <label>
          Log In
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
  </ul>
</nav>



<nav class='std'>
  <ul>
    <li class='left'>
      <div class='content'>
        <label>
          <span class='pw-bright-blue-color'>Patient</span><span class='pw-purple-color'>Wisdom</span>
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li class='left'>
      <div class='content'>
        <label>
          Home
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li class='right hamburger'>
      <div class='content'>
        <div class='hamburger-icon nav-drawer-opener'>
          <div class='bar'></div>
          <div class='bar'></div>
          <div class='bar'></div>
        </div>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li class='right'>
      <div class='content'>
        <label>
          Sign Up
        </label>
      </div><div class='vertical-mid-hack'></div>
    </li>
    <li class='right'>
      <div class='content'>
        <label>
          Log In
        </label>
   ...

SCSS

html, body {
  margin: 0;
  font-family: sans-serif;
}

.pw-bright-blue-color {
  color: #2f89d7;
}
.pw-purple-color {
  color: #97459a;
}
.x-icon {
  font-size: 20px;
  display: inline-block;
  transform: rotate(45deg);
  font-weight: bold;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  z-index: -9999;
  transition: z-index 0.01s linear 0.25s, opacity 0.2s ease;
  
  &.visible {
    z-index: 9990;
    opacity: 0.8;
    transition: z-index 0.01s linear, opacity 0.2s ease 0.05s;
  }
}
.vertical-mid-hack {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.content {
  width: 90%;
  margin: 0 auto;
  vertical-align: middle;
}
.hamburger-icon {
  width: 20px;
  
  .bar {
    width: 100%;
    height: 2px;
    margin: 2px 0;
    background-color: #3D434F;
  }
  
  &:hover {
    cursor: pointer;
    
    .bar {
      background-color: #2f89d7;
    }
  }
}

nav.std {
  height: 40px;
  background-color: white;
  
  ul {
    height: 100%;
    width: 90%;
    max-width: 1000px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    color: #30538d;
    
    li {
      text-align: center;
      height: 100%;
      margin: 0 1px;
      
      &.right {
        float: right;
        text-align: right;
        padding-left: 15px;
      }
      &.left {
        float: left;
        text-align: left;
        padding-right: 15px;
      }
      
      &.hamburger {
        display: none;
      }
      
      .content {
        width: auto;
        display: inline-block;
        
        label {
          
          &:hover {
            cursor: pointer;
            color: #2f89d7;
          }
        }
      }
    }
  }
}

@media all and (max-width: 500px) {
  
  body {
    font-size: 14px;
  }
  
  nav.std {

    ul {

      li {
        
        &.left {
          padding-right: 5px;
        }
        &.right {
          padding-left: 5px;
        }
        
       ...

JavaScript

$(function() {
	$('.nav-drawer-opener').on('click', function() {
  	$('nav.drawer').addClass('visible');
    $('.overlay').addClass('visible');
  });
  $('.nav-drawer-closer').on('click', function() {
  	$('nav.drawer').removeClass('visible');
    $('.overlay').removeClass('visible');
  });
});