💄 make collapsed menu work on small screens

src/app/app.component.html

@@ -2,37 +2,38 @@
   <nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-primary">
     <div class="container-fluid">
       <a class="navbar-brand" routerLink="/" href="#">
-        <img src="assets/fig/logo_polirural_white.png" alt="" height="48"/>
+        <img src="assets/fig/logo_polirural_white.png" alt="" height="48" />
       </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler" type="button" (click)="menuCollapsed = !menuCollapsed"
+        aria-controls="navbarSupportedContent" [attr.aria-expanded]="menuCollapsed ? false : true"
+        aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div [ngbCollapse]="menuCollapsed" class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
-            <a class="nav-link" routerLink="/" routerLinkActive="active"
-              ariaCurrentWhenActive="page">Home</a>
+            <a class="nav-link" routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page"
+              (click)="menuCollapsed = true">Home</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/regional-foresight" routerLinkActive="active"
-              ariaCurrentWhenActive="page">Regional foresight</a>
+            <a class="nav-link" routerLink="/regional-foresight" routerLinkActive="active" ariaCurrentWhenActive="page"
+              (click)="menuCollapsed = true">Regional foresight</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/text-mining" routerLinkActive="active" ariaCurrentWhenActive="page">Text
-              mining</a>
+            <a class="nav-link" routerLink="/text-mining" routerLinkActive="active" ariaCurrentWhenActive="page"
+              (click)="menuCollapsed = true">Text mining</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/system-dynamics" routerLinkActive="active"
-              ariaCurrentWhenActive="page">System dynamics</a>
+            <a class="nav-link" routerLink="/system-dynamics" routerLinkActive="active" ariaCurrentWhenActive="page"
+              (click)="menuCollapsed = true">System dynamics</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="/policy-options-explorer" routerLinkActive="active"
-              ariaCurrentWhenActive="page">Policy options explorer</a>
+              ariaCurrentWhenActive="page" (click)="menuCollapsed = true">Policy options explorer</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="/rural-attractiveness-explorer" routerLinkActive="active"
-              ariaCurrentWhenActive="page">Rural attractiveness explorer</a>
+              ariaCurrentWhenActive="page" (click)="menuCollapsed = true">Rural attractiveness explorer</a>
           </li>
           <!-- <li class="nav-item">
           <a class="nav-link" routerLink="/comparing-rural-attractiveness" routerLinkActive="active"

src/app/app.component.ts

@@ -8,6 +8,7 @@ import {SdmDihService} from './sdm-dih.service';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
+  menuCollapsed = true;
   assetsPath = window.location.hostname.includes('localhost')
     ? '../assets/'
     : './assets/';

src/app/app.module.ts

@@ -2,6 +2,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {FormsModule} from '@angular/forms';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
 
 import {AppComponent} from './app.component';
 
@@ -41,6 +42,7 @@ import {TextMiningComponent} from './pages/text-mining/text-mining.component';
     DiscsModule,
     DotsModule,
     MapModule,
+    NgbCollapseModule,
   ],
   providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
   bootstrap: [AppComponent],

src/app/pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component.html

@@ -1,19 +1,23 @@
 <nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-secondary fixed-top-2">
   <div class="container">
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" (click)="menuCollapsed = !menuCollapsed"
+      aria-controls="navbarSupportedContent" [attr.aria-expanded]="menuCollapsed ? false : true"
+      aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <div [ngbCollapse]="menuCollapsed" class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <a class="nav-link" [routerLink]="['comparing-rural-attractiveness']" routerLinkActive="active">Comparing rural attractiveness</a>
+          <a class="nav-link" [routerLink]="['comparing-rural-attractiveness']" routerLinkActive="active"
+            (click)="menuCollapsed = true">Comparing rural attractiveness</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" [routerLink]="['exploring-dynamics']" routerLinkActive="active">Exploring dynamics</a>
+          <a class="nav-link" [routerLink]="['exploring-dynamics']" routerLinkActive="active"
+            (click)="menuCollapsed = true">Exploring dynamics</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" [routerLink]="['exploring-impact']" routerLinkActive="active">Exploring impact</a>
+          <a class="nav-link" [routerLink]="['exploring-impact']" routerLinkActive="active"
+            (click)="menuCollapsed = true">Exploring impact</a>
         </li>
       </ul>
     </div>

src/app/pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component.ts

@@ -6,6 +6,8 @@ import {Component, OnInit} from '@angular/core';
   styleUrls: ['./rural-attractiveness-explorer.component.scss'],
 })
 export class RuralAttractivenessExplorerComponent implements OnInit {
+  menuCollapsed = true;
+
   constructor() {}
 
   listener = (e) => {

src/styles.scss

@@ -139,6 +139,7 @@ div.has-fixed-header li {
 
 .fixed-top-2 {
   margin-top: 74px;
+  z-index: 1029;
 }
 
 .has-fixed-header {