Close sidebar on item click

Is it possible to close the sidebar after clicking an item?

I needed to do the same this is the reply I got this reply from Atanas

This can be done by editing the main-layout.component.ts file of your application. I have highlighted the changed parts in bold :

import { Component, Injector } from '@angular/core';

import { MainLayoutGenerated } from './main-layout-generated.component';

import { LayoutService } from '@radzen/angular/dist/layout';

import { Router, NavigationEnd } from '@angular/router';


selector: 'page-main-layout',

templateUrl: './main-layout.component.html'


export class MainLayoutComponent extends MainLayoutGenerated {

constructor(injector: Injector) {


const router = injector.get(Router);

const layoutService = injector.get(LayoutService); => {

if (event instanceof NavigationEnd) {;





After doing this the sidebar will hide when you load a new page.

If you want to hide the sidebar only below certain device size you can add an if statement

if (window.innerWidth < 768) {;



@alistair perfect! Thanks!