In order to create a side nav, I would build the sidenav out and then use a bootstrap 9 | 3 container on your page. The 3 is where your sidebar will live, the 9 is where the rest of the content lives. With a fixed position, and the correct styling, you can get the nav to go up to the edge of the screen, and extend it to the top of it. That is how I built mine. The 9|3 is a guess, but it looks like it is a decent guess based on the way the page looks.
This is a left side nav that is collapsible, but you can use it as somewhat of a framework to build your own:
https://sc.service-now.com/snds?state=widget-detail&sys_id=c2636430db7bef40b4d974921f9619a2
This also helped me:
https://community.servicenow.com/community?id=community_question&sys_id=ac252144dbbd1380032a7a9e0f96...
I would also read up on fluid vs. fixed positioning for container and page elements. Also, here is some code from when I last messed around and built a simple side nav for practice, take the styling with a grain of salt I was messing around and all the links are placeholders, etc. You could change things based on your needs:
html:
<div class="wrapper">
<div>
<widget id="typeahead-search"></widget>
<hr>
</div>
<div>
<div class="logo">
<img src=""/>
<hr>
</div>
<div class="project-sidebar">
<a class="filter-links" href="javascript:void(0)"
ng-class="{'active': c.selectedFilter == 'all'}"
ng-click="c.applyFilter('all')">All Articles</a>
<a class="filter-links" href=""
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">Category 1</a>
<a class="filter-links" href="javascript:void(0)"
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">Category 2</a>
<a class="filter-links" href="javascript:void(0)"
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">Category 3</a>
<a class="filter-links" href="javascript:void(0)"
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">Category 4</a>
<a class="filter-links" href="javascript:void(0)"
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">Link</a>
</div>
</div>
css
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
.wrapper{
position:fixed;
width:15%;
background-color:black;
height:100vh;
top:-3;
left:0; /*This would be right:0; for you, if you want it to be on the right side of the page. */
border-right:solid gray .1px;
}
.logo{
text-align:center;
padding-bottom:10px;
}
.project-sidebar {
padding: 5px 0px;
background-color: black;
width:100%;
left:0;
.new-idea {
padding: 15px 20px;
width: 50%;
margin-bottom: 20px;
background-color:#d9534f;
color: white;
display: block;
margin-left: auto;
font-size: 18px;
text-transform: uppercase;
}
.filter-links {
font-family: 'Oswald', sans-serif;
color: white;
display: block;
border-bottom:1px solid gray;
height: 100%;
font-size: 17px;
font-weight: 80px;
padding-top: 10px;
padding-left: 50px;
position: relative;
width: 100%;
padding-bottom: 5px;
}
.filter-links:hover {
background-color: white;
color:black;
font-weight: normal;
}
}
