PM App Layout

HTML

<script src="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<div class="ui visible left sidebar labeled icon inverted vertical menu" id="mainmenu">

  <div class="header item">
    <h2><i class="world icon" id="collapse"></i>AbovePM</h2>
  </div>

  <a class="item" data-template="projects"><i class="sitemap icon"></i> Projects</a>
  <a class="item" data-template="task"><i class="crosshairs icon"></i> Tasks</a>
  <a class="item"><i class="smile icon"></i> Clients</a>
  <a class="item"><i class="info circle icon"></i> Reports</a>
  <a class="item" data-template="users"><i class="users icon"></i> Users</a>
  <a class="item" data-template="settings"><i class="settings icon"></i> Settings</a>
  <a class="item" data-template="about"><i class="info circle icon"></i> About</a>
</div>


<div id="page">

</div>

<div id="templates">

  <div id="projects">  
 
     <div class="ui menu">
      <div class="header item">
        <h1><i class="sitemap icon"></i> Projects</h1>
      </div>  
      <div class="item">
         <select class="ui search dropdown">
          <option value="">Client</option>
          <option value="1">Alphabet Inc.</option>
          <option value="0">Web Makers</option>
          <option value="0">Live Wires</option>
          <option value="0">Data Systems</option>
        </select>
      </div>
      <div class="item">
      <div class="ui transparent icon input">
        <input type="text" placeholder="Search...">
        <i class="search link icon"></i>
      </div>
    </div>
      <div class="right item">
        <button class="ui primary button">New Project</button>
      </div>
    </div>
 

    
    <table class="ui striped celled selectable table">
      <thead>
      ...

CSS

#page {
  padding: 1em;
  margin-left: 180px;
}

.sidebar {}

#templates {
  display: none;
}

JavaScript

$(function() {

  $('.menu .item').click(function() {
    if ($(this).data("template")) {
      $('#page').html($('#templates #' + $(this).data("template")).html());
      $('.menu .item').removeClass('active');
      $(this).addClass('active');
      
      if($(this).data("template") == 'task'){
        var simplemde = new SimpleMDE({
          element: $("#comment-editor")[0]
        });
      }
      
    }
  });

  $('#widemenu').change(function() {
    $('#mainmenu').toggleClass('icon');
  });

});