Hello,
I have created a menu (angular route) with child menus (route with parentName).
this.routes.add([
{
path: '/projects',
name: '::Menu:Management',
iconClass: 'fas fa-chart-line',
order: 5,
layout: eLayoutType.application,
requiredPolicy: 'ABC.Projects',
},
{
path: '/projects',
iconClass: 'fas fa-project-diagram',
name: '::Menu:Projects',
parentName: '::Menu:Management',
layout: eLayoutType.application,
requiredPolicy: 'ABC.Projects',
},]);
This displays a Management menu with a Projects child option. If I hover over the Management menu and select Projects, the user is correctly sent to the /projects path. If I click on the Management menu, however, the user is sent to the root / instead of to the specified path (/projects).
Is there a way to either?
- Send the user to the /projects path upon clicking the (parent) Management menu.
- Disable click on the Management menu but still allow the user to hover and select child menu options.
- ABP Framework version: v8.1.3
- UI Type: Angular
- Database System: EF Core (PostgreSQL)
- Tiered (for MVC) or Auth Server Separated (for Angular): no
- Exception message and full stack trace:
- Steps to reproduce the issue:
-
- create submenu/routes with parentName set, click on parent menu option
-
- user is sent to home instead of the path specified in the parent menu
5 Answer(s)
-
0
Hello,
Please check out https://docs.abp.io/en/commercial/latest/tutorials/book-store/part-9?UI=NG&DB=EF#menu-definition if it helps you. I will try to reproduce the issue and will revert back again.
Thanks
-
0
Hello, I have generate
BookModuleusing this commandyarn ng generate module book --module app --routing --route booksI have added below code to
route.provider.ts{ path: '/book-store', name: '::Menu:BookStore', iconClass: 'fas fa-book', order: 101, layout: eLayoutType.application, }, { path: '/books', name: '::Menu:Books', parentName: '::Menu:BookStore', layout: eLayoutType.application }It's showing this result
After that I have added one more child here
Authorusing this command generate author componentyarn ng generate module author --module app --routing --route authorsI have added below code in
route.provider.ts{ path: '/authors', name: '::Menu:Authors', parentName: '::Menu:BookStore', layout: eLayoutType.application, }It's showing result
After that I have add permission for Author tab
{ path: '/authors', name: '::Menu:Authors', parentName: '::Menu:BookStore', layout: eLayoutType.application, requiredPolicy: 'BookStore.Authors', }After disabling the permissions for Auther, the final result will look like this - the author menu get hide
Thanks.
-
0
Hi,
I have a similar issue. After I navigate in that manner,
the top bar (including the breadcrumb items) resets.
Expected top bar should be masterdata | feature | feature-managementHow should i navigate properly ?
Thanks.
-
0
I found a solution to prevent click on the parent menu using css. In my application, the menu is a horizontal nav menu using hashed routes (#/).
I added the following css to styles.scss to disable click:
a[href="#/"].lpx-menu-item-link { pointer-events: none; }
-
0
Hi,
Great I will refund your credit and closing the ticket.
Thanks
