We Keep Coding

Angular 5 sidenav

I'm trying to use a bootstrap side navbar.
<nav id="sidebar" [(class.slide-in)]="slideIn" >
<div class="sidebar-header">
<img alt="Home" height="65" src="/assets/images/angular-logo.png" title="Home" width="150" class="ng-star-inserted">
</div>
<ul class="list-unstyled components">
<p>Content</p>
<li id="sidebar-list" style="border:2px;">
<a [routerLink]="['/HistoryOfAngular']">History of Angular</a>
</li>
<li id="sidebar-list">
Hello World
</li>
<li id="sidebar-list">
Data Binding
</li>
</ul>-->
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<button (click)="toggleSidebar()" style="margin:0px;border-radius: 0px; height: 50px;" type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>MENU</span>
</button>
</div>
</nav>
I am toggling the side nav with some js code in tag but the script tag doesnt run in angular 5. How could I toggle it. I thought have some code in my .ts file like
toggleSidebar():void{
}
Im not sure of what to put in it to toggle it. The code to toggle in the script tag is
<script >
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
console.log("HII");
});
});
console.log("HII");
</script>

<nav class="navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<b>
<a class="navbar-brand" href="#">
Title
</a>
</b>
<button type ="button"
class ="navbar-toggle collapsed"
data-toggle ="collapse"
data-target ="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="route1">Route1</a></li>
<li routerLinkActive="active"><a routerLink="route2">Route2</a></li>
<li routerLinkActive="active"><a routerLink="route3">Route3</a></li>
</ul>
</div>
</div>
</nav>
This is from https://bootswatch.com/darkly/

Render a main menu into a fixed navbar when scrolling on the browser

I'm using bootstrap latest version.
I create a main menu like this:
This is the code for in my html view:
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-folder-close"></span>
<p>header Menu 1</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-flash"></span>
<p>header Menu 2</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-list-alt"></span>
<p>header Menu 3</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-home"></span>
<p>header Menu 4</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-wrench"></span>
<p>header Menu 5</p>
</button>
</div>
</div>
</div>
</div>
Now I would like, when user scrolling, change this menu into a fixed to top navbar like this (check the link to have a better idea, scroll to see the animation):
this is the code for the nav fixed to top:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dropdown-thumbnail-preview">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand active" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="dropdown-thumbnail-preview">
<ul class="nav navbar-nav">
{# Suivis Fluides #}
<li class="dropdown thumb-dropdown">
Header Menu 1 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Suivis Contrats #}
<li class="dropdown thumb-dropdown">
Header Menu 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Patrimoines #}
<li class="dropdown thumb-dropdown">
Header Menu 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Equipements Technique #}
<li class="dropdown thumb-dropdown">
Header Menu 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# User #}
<li class="dropdown thumb-dropdown navbar-right">
Menu Header 5 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The purpose of this question is to render my main menu into a navbar fixed to top when user is scrolling.
Anybody knows what is the best solution and to make this?

You could use something like Prinzhorn/skrollr or imakewebthings/waypoints to define, when (talking about scroll position) to add/remove a class which makes the navbar sticky.

You can do something like below if you have an option of including jquery
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) //Change this value 280 as per your need
{
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});

Considering the structure of each navigation is different, I would suggest hiding/showing each element with a css class of hidden. Then it's just a matter of adding/removing that class when the first nav is scrolled equal to or passed the top of the viewport.
The jQuery would look something like this:
//Fired when the page is scrolling
$(window).scroll(function() {
var window = $(this);
//Create a reference to both navigations
var buttonNav = $('#buttonNav');
var fixedNav = $('#fixedNav');
if(window.scrollTop() >= buttonNav.offset().top) {
//Hide the buttonNav and Show the fixed nav
buttonNav.addClass('hidden');
fixedNav.removeClass('hidden');
} else {
//The opposite
fixedNav.addClass('hidden');
buttonNav.removeClass('hidden');
}
}
Keep in mind that you will need to add id's to each nav in order to reference them with jQuery and the hidden class just needs the css property display: none; in it. Hope this helps :)

Thanks to you all , I found a solution for my project, following the specification of my clients.
First, I add an id to the button nav, named firstMainMenu. Then, I add an id for the navbar named secondMainMenu. I add an hidden class for the navbar and make the script.
This is the script for:
$(window).scroll(function() {
if ($(this).scrollTop()>222) {
$('#secondMainMenu').removeClass('hidden').fadeIn();
$('#firstMainMenu').addClass('hidden').fadeOut('fast');
} else {
$('#secondMainMenu').fadeOut('fast');
$('#firstMainMenu').removeClass('hidden').fadeIn('slow');
}
});
This is the code who works for me. But the three answer are right too. Tahnk you to all of you for your suggestions. You are the best.
Don't hesitate if you have suggestions or edits for this script.

Navbar dropdown button does not work in twitter bootstrap

I am preety new to twitter-bootstrap, my website working fine on big screens like desktop but when I resize the browser to get an affect of mobile screen it does not show me that icon (dropdown one) which allows us to select navbar.
HTML
<div class="row nav-menu">
<a href="/">
<div class="col-md-2 col-sm-3 columns">
<img class="logo logo-light logo-wide" alt="Logo" src="img/logo_t.png">
<img class="logo logo-dark logo-wide" alt="Logo" src="img/logo_t.png">
</div>
</a>
<div class="nav-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="icon-bar">About</span>
<span class="icon-bar">Technology</span>
<span class="icon-bar has-dropdown">API</span>
<span class="icon-bar">News</span>
<span class="icon-bar">Jobs</span>
<span class="icon-bar">Contacts</span>
</button>
</div>
<div class="col-md-10 col-sm-9 columns ">
<ul class="menu navigationbar">
<li>About</li>
<li>Technology</li>
<li class="has-dropdown">
API <span class="glyphicon glyphicon-chevron-down"></span>
<ul class="subnav">
<li>Plans</li>
<li>Documentation</li>
<li>Login</li>
</ul>
</li>
<li>News</li>
<li>Jobs</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="mobile-toggle">
</div>
</div>
</nav>
</div> <!-- navbar end -->
Please help, thanks.

Bootstrap 3.2 Navbar not collapsing with jquery.min.map error

I am using Bootstrap for the first time and my navbar is not collapsing. So in response to this question on SO, I checked the order of jquery and Bootstrap js files and its OK.
When I checked the Network tab to check if all resources are loading correctly, I am getting jquery.min.map error that it can't be loaded.
Is my problem related due to this missing file and why Bootstrap is asking for this file?
Here is the image :
And when I further decrease the screen width, the links and search disappear and the expand button also does not appear.
Here is my code for navbar for the reference
<div class="container" id="main">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
FAQ
</li>
<li class="dropdown">
Founders <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Naveen</li>
<li>Sumit</li>
<li>Sanjeev</li>
<li class="divider"></li>
<li>Naveen</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul class="nav navar-nav pull-right">
<li>
<span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
</div>

You left out part of your nav html under navbar-header:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Here is a jsFiddle

Using bootstrap 3, how do you have a completely different navbar for mobile rather than responsive?

I'm building my webapp and I dont like the way my navbar looks when collapses. I'd rather just have a different navbar for mobile users and basically any browser that falls below the width threshold.
So rather than how bootstrap just turns your navbar into a list, I'd rather make it look nice with clickable icons.
What's the best way of going about this? Here's my current navbar.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div {{action toggleProperty "showNotifications"}} id="not-container-mobile" class="navbar-toggle" style="position:relative">
<i
class="icon-globe icon-large use-blue"></i>
{{#if showNotifications}}
{{view App.NotificationView}}
{{/if}}
</div>
<a class="navbar-brand " href="#"><img class="logo"
src="/images/app_dark.png"></a>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-collapse collapse" >
<ul class="nav navbar-nav navbar-right">
<li>
<div {{action toggleProperty "showNotifications"}} id="not-container" style="position:relative">
<i
class="icon-globe icon-large use-blue"></i>
{{#if showNotifications}}
{{view App.NotificationView}}
{{/if}}
</div>
</li>
<li>{{view App.SearchView}}</li>
<li>
<div class="navbar-header navbar-right">
<p class="navbar-text">
{{#link-to "user" currentUser._id.$oid}}
{{currentUser.name}}
{{/link-to}}
</p>
</div>
</li>
<li>
<div id="settings-cog" class="navbar-header navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-cogs icon-large use-blue"></i>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="modal" data-target="#changePassModal" href="#">Change Password</a></li>
<li><a {{action "toggleEditView" target="base"}} data-toggle="modal" data-target="#editModal" href="#" href="#">Edit Profile</a></li>
<li>Logout</li>
</ul>
</li>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>

Just create two navbars. On your full-sized navbar add the classes .hidden-sm and .hidden-xs. Then, on your mobile navbar add the classes .visible-xs and .visible-sm. That way, you only see the navbar for the sizes you've designated. For more options, see Responsive utilities.