Research on horizontally collapsing sidebar

By default, Bootstrap only does vertical collapsing, but horizontal collapsing can be added with some CSS:

.collapse.show {
  visibility: visible;
  display: block;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

Source: https://www.codeply.com/go/UiteY92ke8/bootstrap-4-horizontal-collapse

To create the sidebar, create a div and inside it add a list group of menu items:

<div id="sidebar" class="collapse width">
  <div class="list-group">
    <a class="list-group-item">Menu Item #1</a>
    <a class="list-group-item">Menu Item #2</a>
    <a class="list-group-item">Menu Item #3</a>
    …
  </div>
</div>

Then add a collapse toggle, anywhere else on the page:

<a href="#" data-target="#sidebar" data-toggle="collapse">Toggle Sidebar</a>

Resources:

Full demo: https://www.codeply.com/go/8ESO56VMns
Stackoverflow answer where I found this demo code: https://stackoverflow.com/questions/12498476/twitter-bootstrap-collapse-plugin-direction-horizontal-instead-of-vertical/44070096#44070096

ehb54 / genapp

Use Bootstrap to toggle left side menu items #1

Research on horizontally collapsing sidebar