JSFiddle - React, Tailwind, and code Playground

by Edward

HTML

<div class="sidebar-wrapper" id="sidebar">
  <div class="nav-sidebar">
    <div class="nav-sidebar-toggle">
      <div class="nav-sidebar-content">
        <ul class="sidebar-nav">
          <li>Test 1</li>
          <li>Test 2</li>
        </ul>
        <div class="sidebar-toggle">
          <a href="" class="show_getting_started">show getting started</a>
        </div>
      </div>  
      <div class="nav-sidebar-gettingstarted hidden">
        <ul class="sidebar-nav">
          <li class="getting-started-step-wookie getting-started-completed">Step 1</li>
          <li>Step 2</li>
        </ul>
        <div class="sidebar-toggle">
          <a href="" class="hide_getting_started">hide getting started</a>
        </div>
      </div>
    </div>
    <div class="nav-sidebar-footer">
      <a href="#">Help for this page</a>
      <a href="#">My Account</a>
    </div>
  </div>
</div>

SCSS

.sidebar-wrapper {
  width: 200px;
  border-right: 1px solid green;
  background: lightblue;
  overflow-x:none;
  //min-height: 100%;
  position: relative;

  .nav-sidebar {
    .nav-sidebar-toggle {
       .nav-sidebar-content, .nav-sidebar-gettingstarted {
         height: 350px;
       }
       .hidden {
         display: none;
       }
    }
    .sidebar-nav {
      list-style: none;
      padding-left: 1ex;
      padding-top: 1ex;
      > li {
        padding: 1ex;
      }
    }
    .sidebar-toggle {
      position: absolute;
      bottom: 0px;
      padding: 1em;
      text-align: center;
    }
    .nav-sidebar-content {
      position: relative;
      background: cornsilk;
    }
    .nav-sidebar-gettingstarted {
      position: relative;
      background: yellow;
      .getting-started-completed {
        text-decoration: line-through;
      }
    }
    .nav-sidebar-footer {
      //position: absolute;
      //bottom: 0;
      height: 50px;
      border: 1px solid red;
    }
  }
}

JavaScript

$('#sidebar .show_getting_started').on('click', function(e) {
	e.stopPropagation();
  e.preventDefault();
	$('#sidebar .nav-sidebar-content').addClass('hidden');
  $('#sidebar .nav-sidebar-gettingstarted').removeClass('hidden');
});
$('#sidebar .hide_getting_started').on('click', function(e) {
	e.stopPropagation();
  e.preventDefault();
	$('#sidebar .nav-sidebar-content').removeClass('hidden');
  $('#sidebar .nav-sidebar-gettingstarted').addClass('hidden');
});