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!