Collapsable sidebar with fixed navbar - css

Question

I am trying to create a collapsable sidebar and found an example here.
I would like to change it in order to have:
the "collapsed" sidebar to remain partially visible (in order to have
menu links reduced to buttons);
the "Collapse" button on the sidebar itself;
a fixed navbar on the main page on the right.
I can't find an example on the net, but I am trying to copy the interface in the "Windows 10 Preview" applications (take a look at the Mail or Calendar applications).
Thanks in advance for any help.

Answer 1

i've found this for you
Sidebar icon
You can mix with navbar top fixed

Answer 2

This HTML Part
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Jquery part
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Please see this DEMO

Answer 3

This may help others. It has a fixed top nav, swappable mini/full side nav.
https://codepen.io/RobertoCannella/pen/poyBJGr
HTML
<div id="grid-container">
<div id="header">Header</div>
<div id="nav-button" onclick="menu()">
Navigation Button
</div>
<div id="empty-containerOne">Empty Container
</div>
<div id="navigation-menu" id="navigation-menu">Navigation Menu
</div>
<div id="mini-menu">
Mini
</div>
<div id="content">Content Window
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusamus voluptates earum delectus. Cum, illum accusantium! Laudantium enim ullam id veniam nemo, modi alias non eos, debitis beatae maxime nisi.Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus laborum tenetur similique eligendi! Porro sunt molestias unde fugiat, delectus, tenetur aperiam itaque dolores aspernatur veritatis recusandae, ut officiis aut consequatur.<p/>
</div>
<div id="footer">Footer
</div>
</div>
CSS:
#grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: minmax(75px, auto);
border: solid 1px red;
position: relative;
}
#grid-container > div {
position: relative;
background: #ddd;
border: dotted 1px blue;
}
#header {
grid-column: 1/5;
grid-row: 1;
}
#nav-button {
grid-column: 1;
grid-row: 2;
cursor: pointer;
}
#empty-containerOne {
grid-column: 2/5;
grid-row: 2;
}
#navigation-menu {
position: absolute;
grid-column: 1;
grid-row: 3;
left: 0px;
width: 150px;
min-height: 150px;
z-index: 1;
opacity: 90%;
transition: 300ms;
display: block;
}
#mini-menu {
position: absolute;
grid-column: 1;
grid-row: 3;
left: -30px;
width: 30px;
min-height: 150px;
z-index: 1;
opacity: 90%;
transition: 450ms;
}
#content {
grid-column: 1/5;
grid-row: 3;
padding-left: 2Rem;
}
#footer {
grid-column: 1/5;
grid-row: 4;
}
JavaScript (please ignore the poor state management.)
var i=1;
function menu() {
if(i==0){
document.getElementById("navigation-menu").style.left = '0px';
document.getElementById("mini-menu").style.left = '-30px';
i=1;
document.getElementById("toggle").src = "../images/menu.svg";
// document.getElementById("icons").style.display = 'Block';
// console.log("Colapsing menu.");
}
else {
document.getElementById("navigation-menu").style.left = '-150px';
document.getElementById("mini-menu").style.left = '0px'
i=0;
document.getElementById("toggle").src = "../images/menu_open.svg";
// document.getElementById("icons").style.display = 'none';
// console.log("Expanding menu.");
}
}