How to create a left navbar with bootstrap? - html

Question

How to create a left navbar with bootstrap ?
I did it
<nav class="btn-group-vertical float-left navbar">
<button routerLink="product/home" routerLinkActive="is-active" class="btn btn-outline-dark">Home</button>
<button routerLink="product/favorite" routerLinkActive="is-active" class="btn btn-outline-dark">Favorite</button>
</nav>
But the problem that i see it as unexpected
I want that all hoe work be with good position
but use bootstrap 4 well
Thank for help :-)

Answer 1

As I understood,you're trying to create side navbar and want to show component on the right side.In this case when you call a component by routerLink,a specific css should be applied to each called component in order to see them on the right.
<style>
router-outlet + * {
float:right;
position:absolute;
}
</style>
This css code will be applied for each component brought by router-outlet.If you want you can add some margin.
Here you can see what I've done for you :
https://stackblitz.com/edit/angular-router-basic-example-pgr1tv?file=index.html

Answer 2

Here it is a nice, modern and responsive approach that I used in one of my projects. I hope it helps.
Note: The javascript part would be replaced by a shared service in your angular application's core module where you should use BehaviourSubject to communicate the state of the sidenav from another component.
Quick example:
export class SidenavService {
private sidenavState$ = new BehaviorSubject<boolean>(false);
...
const sidenav = document.querySelector('#sidenav');
const toggleSidenav = state => {
sidenav.className = state ?
sidenav.className.replace('closed', 'opened') :
sidenav.className.replace('opened', 'closed');
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 60px 1fr 60px;
grid-template-areas: 'header''main''footer';
height: 100vh;
}
#media only screen and (min-width: 768px) {
.grid-container {
grid-template-columns: 260px 1fr;
grid-template-areas: "sidenav header""sidenav main""sidenav footer";
}
}
.sidenav {
grid-area: sidenav;
display: flex;
flex-direction: column;
height: 100%;
width: 260px;
padding: 0 .8rem;
position: fixed;
overflow-y: auto;
z-index: 4;
transform: translateX(-300px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5);
transition: all .1s linear;
background-color: #fff;
}
.sidenav.opened {
transform: translateX(0);
}
.sidenav__open-icon:hover {
background-color: #ececec;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 5px;
right: 5px;
cursor: pointer;
font-size: 20px;
width: 20px;
height: 20px;
color: #e0e0e0;
display: grid;
place-items: center;
border: solid 1px transparent;
border-radius: 50%;
background-color: transparent;
}
#media only screen and (min-width: 768px) {
.sidenav {
transform: translateX(0);
}
.sidenav__close-icon {
visibility: hidden;
}
}
ul.sidenav__list {
padding: 0;
margin-top: 1rem;
list-style-type: none;
max-width: 340px;
overflow-y: auto;
}
li.sidenav__list-item {
margin-bottom: 4px;
background-color: #ddd;
border: solid 1px transparent;
border-radius: 6px;
border-bottom: solid 4px #d2d2d2;
}
li.sidenav__list-item>a {
width: 100%;
padding: .7rem 1rem;
display: block;
position: relative;
color: #333;
text-decoration: none;
}
li.sidenav__list-item>a:hover,
li.sidenav__sublist-item>a:hover {
background-color: #d2d2d2;
cursor: pointer;
}
.sidenav__icon {
width: 40px;
padding: 0 2px;
display: inline-block;
margin-right: .4rem;
}
li.sidenav__list-item>a .caret {
position: absolute;
right: 16px;
top: auto;
}
li.sidenav__list-item>a .caret>i {
font-size: 12px;
}
ul.sidenav__sublist {
padding: 0;
list-style-type: none;
}
li.sidenav__sublist-item:first-child {
margin: .5rem 0 0;
}
li.sidenav__sublist-item>a {
width: 100%;
padding: .5rem 1rem;
font-size: 80%;
display: block;
position: relative;
color: #333;
border: solid 1px transparent;
border-radius: 4px;
}
[role="nav-menu"],
[role="nav-dropdown-item"] {
cursor: pointer !important;
}
[role="nav-dropdown"] {
cursor: default !important;
}
.header {
grid-area: header;
background-color: #ddd;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="grid-container">
<div id="sidenav" class="sidenav closed">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<!-- Menú con navegación -->
<a role="nav-menu">
<span class="sidenav__icon">
<i class="{{m.iconoMenu}}"></i>
</span>
<span class="sidenav__title">Home</span>
</a>
</li>
<!-- Menú sin navegación -->
<li class="sidenav__list-item">
<a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-1" role="nav-dropdown">
<span class="sidenav__icon">
<i class="fas fa-home"></i>
</span>
<span class="sidenav__title">
Configuration
</span>
<b class="caret">
<i class="fas fa-caret-down"></i>
</b>
</a>
<ul id="submenu-1" class="sidenav__sublist panel-collapse collapse panel-switch" role="menu">
<li class="sidenav__sublist-item" role="nav-dropdown-item">
<a href="#">
<span class="sidenav__icon"><i class="fas fa-cog"></i></span>
<span class="sidenav__title">Option 1</span>
</a>
</li>
<li class="sidenav__sublist-item" role="nav-dropdown-item">
<a href="#">
<span class="sidenav__icon"><i class="fas fa-cog"></i></span>
<span class="sidenav__title">Option 2</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="header">
<div class="container-fluid">
header
</div>
</div>
<main>
<div class="container-fluid">
body
</div>
</main>
<footer>
<div class="container-fluid">
footer
</div>
</footer>
</div>
<div style="position: absolute; right: 40px; top: 80px">
<button onclick="toggleSidenav(true)">open</button>
<button onclick="toggleSidenav(false)">close</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>