akveo / akveo/nebular

[Idea] NbMenuItem: Easier hiding of dynamic menu items

Open
#1,871 0 comments 1 reaction 0 assignees View on GitHub
enhancement module:components needs triage
Dominant language
TypeScript
Stars
8.1k
Forks
1.5k
PR merge metrics
No merged PRs in 30d

Description

### Issue type

**I'm submitting a ...** (check one with "x")

* [ ] bug report
* [ x ] feature request

### Issue description

**Current behavior:**
Right now it's somewhat difficult to manage menu items that you want to show only in certain situations. Specifically, I'm referring to the sidebar.

The NbMenuItem class allows you to specify if an element is hidden, but it doesn't seem to have a two way binding that would allow it to update when the passed in value changes.

One option I found is to use the theme service to listen for break point changes, then update your menu item array but that's not great.

**Expected behavior:**
A common scenario would be you want to hide group entries from the collapsed state of the sidebar menu. Failure to do so leaves a noticeable gap, like so:

![image](https://user-images.githubusercontent.com/3315900/62150665-368c2880-b2c4-11e9-97fd-b06b63d10ca2.png)

Another scenario is if you want to move things from the header into the sidebar as the break points collapse.

**Related code:**
Possible solutions:

- Add a class property to NbMenuItem which would allow the use of bootstrap display utility classes to show/hide things on certain breakpoints. ie: d-sm-none, d-md-flex, etc (this is probably the easiest way)
- Two way binding on the hidden property
- add a methods to NbMenuService for toggling items

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.