Sidebar collapsible in Angular e Bootstrap
Oggi vediamo come creare una sidebar collapsible in Angular e Bootstrap.
Per prima cosa installiamo quest'ultimo nel nostro progetto:
$ cd my-proj
$ ng add @ng-bootstrap/ng-bootstrap
Questo installerà Bootstrap e aggiungerà i moduli necessari.
Detto ciò, vediamo il codice; metteremo tutto nello stesso componente per comodità di esempio.
Vi riporto anche app.module.ts:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Questo il file app.component.ts:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'mp-admin';
isMenuCollapsed: boolean;
constructor() {
this.isMenuCollapsed = true;
}
ngOnInit(): void {
}
}
Abbiamo una variabile che useremo nell'HTML che indica se la sidebar e collapsed o no.
Questo il file app.component.html:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Company name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
(click)="isMenuCollapsed = !isMenuCollapsed">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
[ngbCollapse]="isMenuCollapsed">
<div class="sidebar-sticky pt-3">
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
</main>
</div>
</div>
Abbiamo usato la direttiva ngbCollapse per indicare lo stato in cui si trova.
Per vedere se tutto funziona ridimensionate la finestra del browser (o usare i developer tools).
Enjoy!
javascript typescript angular bootstrap ngbcollapse
Commentami!