I installed dotnet SPA templates using:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
Then I created a new Angular application using:
dotnet new angular
After restoring the packages, creating and launching, I noticed something strange with the navbar pattern.
Image . The navigation bar was configured on the side of the page, and was not a normal top navigation bar. My desire is a fixed top navigation bar.
The app.component.htmloutput of the navigator and router was configured as follows:
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class='col-sm-9 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
, , , col-sm-3, col-sm-9. , , -:
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-12'>
<nav-menu></nav-menu>
</div>
</div>
<div class="row">
<div class='col-sm-12 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
. navmenu .
.
HTML app.component.html - .
navbar html:
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<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' [routerLink]="['/home']">Brand</a>
</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]="['/counter']">
<span class='glyphicon glyphicon-education'></span> Counter
</a>
</li>
</ul>
</div>
</div>
</div>
, Visual Studio, ...
, ?