JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  <nav class="setting-sidebar-nav">
    <div class="setting-sidebar-content">
      <h2>Eddy
        <!--
        <span style="display: inline;" class="separator"> • </span>
        <i id="breadcrumb-name" style="display: inline;" class="subtitle">
        </i>
        -->
      </h2>
      <ul class="settings-menu-list">
        <li class="active">
          <a href="#">  
            Account
            <i class="disclosure"></i>
          </a>
        </li>
        <li>
          <a href="#">
            Security
            <i class="disclosure"></i>
          </a>
        </li>
        <li>
          <a href="#">
            Blocked
            <i class="disclosure"></i>
          </a>
        </li>
        <li>
          <a href="#">
            Notifications
            <i class="disclosure"></i>
          </a>
        </li>
        <li>
          <a href="#">
            Email Preferences
            <i class="disclosure"></i>
          </a>
        </li>
        <li>
          <span><a href="#">Log Out</a></span>
        </li>
      </ul>
    </div>
  </nav>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: "Varela Round", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background-color: #fff;
}

.setting-sidebar-nav {
  width: 35%;
}

.setting-sidebar-content {
  width: 100%;
}

.setting-sidebar-nav,
.setting-sidebar-content {
  /* width: 256px; */
  height: 100%;
  padding-right: 0;
  background-color: #f7f7f7;
  border-left: 1px solid #c3cfd9;
  border-right: 1px solid #c3cfd9;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
}

.setting-sidebar-nav {
  float: left;
  height: 100%;
  /* margin: 0 0 0 -17px; */
  background: #eef2f5 url("//instagramstatic-a.akamaihd.net/h1/images/bg/blue-noisy.jpg/c8d5bcc4ef0d.jpg") repeat 50% 50%;
}

.setting-sidebar-nav .setting-sidebar-content {
  margin: -1px 0 0 -1px;
}

.setting-sidebar-nav h2,
.setting-sidebar-content h2 {
  padding: 20px 0px 10px 15px;
  margin: 0;
}

.setting-sidebar-nav h2 {
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #a4baca;
}

.setting-sidebar-content > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #c3cfd9;
}

.setting-sidebar-content > ul > li {
  position: relative;
  margin: 0;
  background: #f9f9f9 url("//instagramstatic-a.akamaihd.net/h1/images/bg/white-gradient-light-context-50px.png/42778b73b89b.png") repeat-x 0 0;
}

.setting-sidebar-nav li {
  font-weight: bold;
}

.setting-sidebar-content > ul > li.active > a,
.setting-sidebar-content > ul > li.active > a:hover {
  box-shadow: none;
}

.setting-sidebar-content > ul > li.active > a {
  background-color: #f1f2f4;
  border-bottom-color: #c3cfd9;
  border-radius: 0;
}

.setting-sidebar-nav li .active,
.setting-sidebar-nav .active > a,
.setting-sidebar-nav a:active {
  color: #06365f;
}

.setting-sidebar-content > ul > li a,
.setting-sidebar-content > ul > li a:visited,
.setting-sidebar-content > ul > li a:hover {
  text-decoration: none;
}

.setting-sidebar-content > ul > li a {
  position: relative;
  display: block;
  padding: 9px 5px...

JavaScript

/*
$('a').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});
*/

$('.settings-menu-list li').on('click', function(e) {
  $('.settings-menu-list li').removeClass('active');
  $(this).addClass('active');
  $(this).parent().prev().find('#breadcrumb-name').text($(this).text());
});