Sidebar

by paulcavender

HTML

<div class="docav-sidebar-container"></div>

CSS

:root {
  --docav-size: 32px;
  
}

body {
  font-family: "Segoe UI";
  font-size: 1em;
}

.docav-sidebar-container {
  position: absolute;
  left: 0px;
  top: var(--docav-size);
  bottom: var(--docav-size);
  width: var(--docav-size);
  background-color: #096;
}

.docav-button {
  width: var(--docav-size);
  height: var(--docav-size);
  line-height: var(--docav-size);
  text-align: center;
  user-select: none;
  cursor: pointer;
}

.docav-sidebar-button {
  color: #FFF;
  background-color: #096;
}

.docav-sidebar-button:hover {
  background-color: #222222;
}

.docav-sidebar-button-active {
  background-color: #222222;
}

.docav-sidebar {
  position: absolute;
  left: var(--docav-size);
  top: 0px;
  bottom: 0px;
  width: 200px;
  background-color: #CCCCCC;
  user-select: none;
  display: none;
}

.docav-sidebar-header {
  height: var(--docav-size);
  width: calc(100% - var(--docav-size) - 6px);
  line-height: var(--docav-size);
  background-color: #666;
  color: #FFF;
  padding-left: 6px;
  float: left;
}

.docav-sidebar-header-button {
  background-color: #666;
  color: #FFF;
  float: right;
}

.docav-sidebar-header-button:hover {
  background-color: #111111
}

.docav-sidebar-item {
  clear: both;
  height: var(--docav-size);
  line-height: var(--docav-size);
  background-color: #CCC;
  color: #000;
  padding-left: 6px;
}

.docav-sidebar-item:hover {
  background-color: #EEE;
  color: #000;
  cursor: pointer;
}

JavaScript

var docav = [];
docav.F = {};

docav.F.SideMenu = function(I, C) {
  var Button$ = $("<div>").addClass("docav-button docav-sidebar-button").html(I);
  $(".docav-sidebar-container").append(Button$);

  Button$.on("click", function() {
    $(".docav-sidebar").hide();
    $(".docav-sidebar-container").find("[data-menu=" + I + "]").show();
    $(".docav-sidebar-button").removeClass("docav-sidebar-button-active");
    $(this).addClass("docav-sidebar-button-active");

  })

  var Menu$ = $("<div>").addClass("docav-sidebar").attr("data-menu", I);
  $(".docav-sidebar-container").append(Menu$);

  var MenuHeader$ = $("<div>").addClass("docav-sidebar-header").html(C);
  $(".docav-sidebar-container").find("[data-menu=" + I + "]").append(MenuHeader$);

  var MenuClose$ = $("<div>").addClass("docav-button docav-sidebar-header-button").html("x");
  $(".docav-sidebar-container").find("[data-menu=" + I + "]").append(MenuClose$);

  MenuClose$.on("click", function() {
    $(".docav-sidebar-button").removeClass("docav-sidebar-button-active");
    $(".docav-sidebar").hide();


  })
}

docav.F.MenuItems = function(I, M) {

  for (var i = 0; i < M.length; i++) {

    var MenuItem$ = $("<div>").addClass("docav-sidebar-item").html(M[i].T);
    $(".docav-sidebar-container").find("[data-menu=" + I + "]").append(MenuItem$);

  }
}



var rMenu = [{
    "I": 1,
    "T": "Documents"
  },
  {
    "I": 2,
    "T": "Correspondence"
  },
  {
    "I": 3,
    "T": "MoC"
  }
];
docav.F.SideMenu("P", "Project X");
docav.F.MenuItems("P", rMenu);

var rMenu = [{
    "I": 4,
    "T": "Discipines"
  },
  {
    "I": 5,
    "T": "Document Types"
  },
  {
    "I": 6,
    "T": "Systems"
  }
];

docav.F.SideMenu("R", "Reference Data");
docav.F.MenuItems("R", rMenu);

docav.F.SideMenu("O", "Open Items");
docav.F.MenuItems("O", []);


docav.F.OpenItem = function(I) {
	/*
  Add Item to Menu
  */
  if($(".docav-sidebar-container").find("[data-item="+I.I+"]").length == 0){
  
  var MenuItem$ =...