JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<script src="https://use.fontawesome.com/7bf72dcdd2.js"></script>
<div class='container'>
  <div class='body'>
      <nav class='vertical'>
        <ul>
          <li class='title'>
            <div class='content'>
              <label class='title'>
                PatientWisdom
              </label>
            </div>
          </li>
          <li class='selected'>
            <!-- <div class='indicator'></div> -->
            <div class='content'>
              <div class='icon'>
               <i class="fa fa-comments-o fa-lg" aria-hidden="true"></i>
               <!-- <i class="fa fa-comments" aria-hidden="true"></i> -->
              </div>
              <label>
                Stories
              </label>
            </div>
          </li>
          <li>
            <!-- <div class='indicator'></div> -->
            <div class='content'>
              <div class='icon'>
                <i class="fa fa-street-view fa-lg" aria-hidden="true"></i>
              </div>
              <label class='insight'>
                inSIGHT
              </label>
            </div>
          </li>
          <li>
            <!-- <div class='indicator'></div> -->
            <div class='content'>
              <div class='icon'>
                <i class="fa fa-cogs fa-lg" aria-hidden="true"></i>
                <!-- <i class="fa fa-cog fa-lg" aria-hidden="true"></i> -->
              </div>
              <label>
                Settings
              </label>
            </div>
          </li>
        </ul>
      </nav>
      <div class='body-content'>
        <nav class='generic static'>
          <ul>
            <li>
              <div class='content'>
                Page
              </div>
            </li>
          </ul>
        </nav>
      </div>
  </div>

</div>

SCSS

html, body {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
  color: #3B3B3B;
  height: 100%;
  overflow: hidden;
}

.content {
  width: 95%;
  margin: 0 auto;
  height: 100%;
}
.body-content {
  flex-grow: 1;
}
nav {
  width: 100%;
  border-bottom: 1px solid #ddd;
  background-color: white;
  

  
  ul {
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
    width: 95%;
    list-style: none;
    display: flex;

    li {
      flex-grow: 0;
      padding: 10px 10px 9px 10px;
      text-align: center;
      
      &:first-of-type {
        padding-left: 0;
      }

      &:selected {

      }
    }
  }
}
.container {
  height: 100%;
}
.body {
  display: flex;
  height: 100%;
}
nav {
  
  border-bottom: none;
        
  &.vertical {
    flex-shrink: 0;
    position: relative;
    width: auto;
    height: 100%;
    background-color: #334057;
    color: #eee;
      
    ul {
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      width: 250px;

      li {
        
        position: relative;
        padding: 8px 15px 7px 15px;
        flex-grow: 1;
        flex-shrink: 0;
        text-align: left;
        transition: all 0.2s ease;
        
        .title {
          padding: 12px 15px 11px 15px;
        }
        
        &:hover {
          cursor: pointer;
          color: white;
          background-color: #1D252E;
          transition: all 0.2s ease;
        }
        
        & *:hover {
          cursor: pointer;
        }
        
        &:first-of-type {
          border-left: 1px solid #1D252E;
        }
        
        &.selected {
          background-color: #1D252E;
          color: #C67AFF;
          color: white;
          transition: all 0.2s ease;
          
          .content {
            .icon {
              i {
                color: #C67AFF;
                transition: all 0.2s ease;
              }
            }
          }
          
          .indicator {
            opacity:...

JavaScript

// https://d30y9cdsu7xlg0.cloudfront.net/png/25718-200.png

$(function() {
	$('li').on('click', function() {
  	$('.selected').removeClass('selected');
    $(this).addClass('selected');
  });
});