JSFiddle - React, Tailwind, and code Playground

side menu slide out

by Christopher O

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topBar">
  <div class="topBarL"><span>[ Logo Words ]</span></div>
  <div class="topBarM"></div>
  <div class="topBarR">
    <div class="alertDropdown">
      <i class="fa fa-bell"></i>
      <div class="alertDropdown-content">
        <a href="#">Profile</a>
        <a href="#">Logout</a>
      </div>
    </div>
    <div class="uaDropdown">
      <i class="fa fa-user-circle"></i>
      <div class="uaDropdown-content">
        <a href="#">Profile</a>
        <a href="#">Logout</a>
      </div>
    </div>
  </div>
</div>
<div class="middleGrid">
  <div class="middleGridL">
  </div>
  <div class="middleGridR">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus faucibus scelerisque eleifend donec. Risus quis varius quam quisque. Mi eget mauris pharetra et ultrices neque ornare. Ullamcorper morbi tincidunt ornare massa eget egestas. Nibh tellus molestie nunc non. Venenatis lectus magna fringilla urna. In tellus integer feugiat scelerisque varius morbi. Sit amet aliquam id diam maecenas. Diam quis enim lobortis scelerisque fermentum dui. Tellus elementum sagittis vitae et leo. Est ultricies integer quis auctor elit sed vulputate. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Malesuada proin libero nunc consequat interdum varius sit amet mattis. A scelerisque purus semper eget duis at tellus. Vivamus at augue eget arcu dictum varius duis at consectetur. Non arcu risus quis varius quam quisque id diam. Sed id semper risus in.

    Nisl condimentum id venenatis a condimentum. Eu feugiat pretium nibh ipsum consequat nisl vel pretium. Eu sem integer vitae justo. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Duis at consectetur lorem donec massa sapien. Donec massa sapien faucibus et molestie. A lacus vestibulum sed arcu...

CSS

body, div {
  margin:0;
  padding:0;
}

.topBar{
  height: 30px;
  background: #1a1d21;
  color:#fff;
  display: grid;
  grid-template-columns: 150px auto 150px;
}
.topBarL span{
  margin:10px !important;
  padding:4px;
  background-color: #fe9700;
}
.topBarR{
  color:#fff;
  font-size: 1.5em;
  text-align: right;
  padding-right: 10px;
}

/*  BEGIN Alert Drop */
.alertDropdown {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

.alertDropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right:0;
}

.alertDropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.alertDropdown-content a:hover {background-color: #ddd;}

.alertDropdown:hover .alertDropdown-content {display: block;}

.alertDropdown:hover .alertDropbtn {background-color: #3e8e41;}
/*  END Alert Drop */

/*  BEGIN UA Drop */
.uaDropdown {
  position: relative;
  display: inline-block;  
}

.uaDropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right:0;
}

.uaDropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.uaDropdown-content a:hover {background-color: #ddd;}

.uaDropdown:hover .uaDropdown-content {display: block;}

.uaDropdown:hover .uaDropbtn {background-color: #3e8e41;}
/*  END UA Drop */

.middleGrid{
  display: grid;
  grid-template-columns: 92px auto;
}
.leftoverMenu {
  position: fixed;
  z-index: 2;
  top: 30px;
  left: 0;
  width: 92px;
  height: 500px;
  text-align: center;
  transition: width 800ms, background-color 500ms linear;
  padding-top: 10px;
}

.leftoverMenu:hover {
  width: 250px;
  background: black;
}

.leftoverMenu i {
  display: block !important;
  margin-bottom: 6px !important;
  text-align: left;
  margin-left:20px;
 ...