I have developed a custom Angular 4 web application. My goal is to implement an automatic hide feature for the navbar when a user hovers over it. I came across an example that demonstrates what I want to achieve at https://codepen.io/JFarrow/pen/fFrpg. Despite researching documentation and online resources, I am still unable to determine how to accomplish this task. Below is my code from the navmenu.component.html file:
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<a class='navbar-brand' [routerLink]="['/home']">Navbar</a>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span (click)="isCollapsed = !isCollapsed">Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' >
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/login']">
<span class='glyphicon glyphicon-log-in'></span> Log In
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/margin']">
<span class='glyphicon glyphicon-list'></span> Report
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/smart-table']">
<span class='glyphicon glyphicon-list'></span> Smart table
</a>
</li>
</ul>
</div>
</div>
</div>
Moreover, here is my code from the navmenu.component.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'nav-menu',
templateUrl: './navmenu.component.html',
styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
public isCollapsed: boolean = false;
public collapsed(event: any): void {
console.log(event);
}
public expanded(event: any): void {
console.log(event);
}
}
Lastly, I have included styles in my navmenu.component.css file:
li .glyphicon {
margin-right: 10px;
}
/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
/* Keeping the nav menu fixed on top of other elements */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
@media (min-width: 768px) {
/* Sidebar layout for small screens */
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* Truncating text if too long */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
I would appreciate guidance on where to implement the necessary code to achieve the desired functionality. Various solutions involving JavaScript functions or Bootstrap features have not been successful for me so far.
Thank you for your assistance.