diff --git a/console-webapp/src/app/app.component.ts b/console-webapp/src/app/app.component.ts
index f4cc2884b..6190a8f47 100644
--- a/console-webapp/src/app/app.component.ts
+++ b/console-webapp/src/app/app.component.ts
@@ -12,10 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { RegistrarService } from './registrar/registrar.service';
 import { UserDataService } from './shared/services/userData.service';
 import { GlobalLoaderService } from './shared/services/globalLoader.service';
+import { NavigationEnd, Router } from '@angular/router';
+import { MatSidenav } from '@angular/material/sidenav';
 
 @Component({
   selector: 'app-root',
@@ -24,10 +26,15 @@ import { GlobalLoaderService } from './shared/services/globalLoader.service';
 })
 export class AppComponent {
   renderRouter: boolean = true;
+
+  @ViewChild('sidenav')
+  sidenav!: MatSidenav;
+
   constructor(
     protected registrarService: RegistrarService,
     protected userDataService: UserDataService,
-    protected globalLoader: GlobalLoaderService
+    protected globalLoader: GlobalLoaderService,
+    protected router: Router
   ) {
     registrarService.activeRegistrarIdChange.subscribe(() => {
       this.renderRouter = false;
@@ -36,4 +43,12 @@ export class AppComponent {
       }, 400);
     });
   }
+
+  ngAfterViewInit() {
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.sidenav.close();
+      }
+    });
+  }
 }