Ability to disable vertical menu when sider is collapsed

What problem does this feature solve?

I am using angular’s BreakPointObserver to switch between an inline menu layout expanded for large screens, an inline layout collapsed with a collapsed width of 80px for medium sized screens, and an inline layout collapsed with a collapse width of 0px for mobile devices.

I have a basic working example of this here: https://stackblitz.com/edit/angular-enh6va

When in mobile view, where the menu is collapsed, the vertical menu will suddenly appear if you are redirected to one of the submenu items’s router links, and that sub menu item has routerLinkActive="ant-menu-item-selected". I do not have enough time to build a stack blitz with the router at the moment, but it looks like this when that happens (the menu is collapsed to a width of 0px on the left):

If there was a way to manually disable the switch to vertical menu when the inline menu is collapse, I believe it would solve the issue.

What does the proposed API look like?

Maybe a directive called disableVerticalMenu, or a separate nzMode specifically when the menu is collapsed, such as nzCollapsedMode . This is also being done in version 0.7, but I have tested in the latest stable version and seems to act the same.

[vthinkxie]

Hi @KevinStirling , I got your point now, here is the temp solution for you. https://stackblitz.com/edit/angular-enh6va-bc8hzx?file=app/app.component.ts

The key point is to add [hidden]="(collapseWidth==0)&&isCollapsed" to the menu item you don’t want to see when collapsed, you can create an directive for this. hope this can help you.

It is hard to solve it in component now, we will keep tracking on it.

[KevinStirling]

Thanks @vthinkxie !