Expand icon appears for a menu item even when all its children are hidden

tristanidoux commented 3 years ago

Issue type

I'm submitting a ...

[x] bug report

Issue description

Current behavior: When defining menu items and setting all its children to hide, the expand icon is still displayed. Therefore, the menu item appears with the expand icon but when clicking on it, nothing occurs as all its children are hidden.

Expected behavior: When an items has all its children hidden, the expand icon should not appear.

Steps to reproduce:

  items: NbMenuItem[] = [
    {
      title: 'Shopping Bag',
      children: [
        {
          title: 'HiddenChildren',
          hidden: true,
        },
      ],
    },
  ];

Related code:

Reproduction using StackBlitz

  items = [
    {
      title: "Logout",
      children: [
        {
          title: "HiddenChildren",
          hidden: true,
        }
      ]
    }
  ];

Other information:

npm, node, OS, Browser

Node: v12.21.0, npm: v12.21.0
OS: Linux (Ubuntu 20.04.2 LTS)
Browser: Firefox

Angular, Nebular

    "@akveo/ng2-completer": "^9.0.1",
    "@angular/animations": "^11.0.9",
    "@angular/cdk": "11.0.4",
    "@angular/common": "^11.0.9",
    "@angular/compiler": "^11.0.9",
    "@angular/core": "^11.0.9",
    "@angular/forms": "^11.0.9",
    "@angular/platform-browser": "^11.0.9",
    "@angular/platform-browser-dynamic": "^11.0.9",
    "@angular/router": "^11.0.9",
    "@nebular/theme": "7.0.0",
    "@nebular/eva-icons": "7.0.0",

tristanidoux commented 3 years ago

Hmm after some investigation, this is a bit more complicated than that.

In my case, this change was needed because I didn't want the children to appear in the menu since I had already implemented router links elsewhere and didn't want to 'bloat' the sidebar menu with endless items.

Doing so, I encountered several problems:

When not declaring the children & using the router links I had implemented elsewhere, the parent menu item was not selected since in the HTML component, it didn't have children and there wasn't a match in the router links.
When declaring children but all hidden, the parent menu item is selected but the expand icon is also displayed even though there is no children when I click on it and nothing to expand to.

Here goes the first pull request I made above to make the expand icon disappear. But when I investigated a bit, when clicking on the parent menu item, it didn't want to trigger the routing because of the HTML handling & parent having children (so no routerLinks taken into account).

I will try to make some changes to make it work. Sorry for the waste of time.

tristanidoux commented 3 years ago

Oh sorry, forgot to reference it but it should be good with PR #2688.

akveo / nebular