Hamburger menu: hiding screens which are used?

  • [EDIT] Requalifying this topic in Feature request: be able to use a table/screen that user will see/use, but without having it appearing in the hamburger menu

Hi, in my app I am using several screens that the user accesses via a “Go to” action.

I don’t want them to appear in the hamburger menu, but when I hide them in this menu, the “Go to” action does not work anymore.
→ Do you have an idea on how to solve this?

Thanks in advance

Just use the visibility conditions on the Tab to stop users seeing options on the hamburger menu.

I do this all the time - visible ‘if Role equals GodlikePowers’

:slight_smile:

1 Like

Thanks @Mark_Turrell.
Are you speaking about “tab visibility conditions”? In this case the content of the screen is not available anymore to users.
I want it to remain visible, but I don’t want the screen name appearing in the hamburger menu

1 Like

Got it - then it gets messy.

I have had to duplicate tabs (which I really do not like doing) to achieve this, which has the risk of components not being in sync because of changes (a bit easier as you can ‘copy all’ components, plus you can get lost (and go ‘back’ or arrows do not work).

I get what you are after now :slight_smile:

1 Like

Thank you
(my initial message was probably unclear… shortcomings in english!)

1 Like

Probably worth a try with CSS. Do you have any tabs in the main view that are not set in details?

Thanks @ThinhDinh.

No, apparently they all have a detail view.

This is not the perfect solution. I can’t find a way to not touch the SVG and the tab title when we use 1 and 2, but seeing as you have more than 2 then it would work for 3 onwards.

<pre><span><style>

[id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(3) {
display: none;
}
2 Likes

Nice, thanks!

The good news: it works

The bad one… the navigation buttons on the screen have disappeared + as well as a table with indicators + I cannot switch between users anymore :slight_smile:

What I observe is:

  • I have a home screen with navigation buttons (“go to tab”) to different screens/tabs
  • With the css, it does hide these screens/tabs in the hamburger menu, but it also hides de navigation buttons

nb: there is an advantage if users cannot navigate any more → they will not experience all the bugs of my app!

Looks like you have the wrong code here.

You should duplicate that flyout-root to all “types” you want to hide.

<pre><span><style>

[id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(3) {
display: none;
}

[id="flyout-root"] [aria-label="User profile"] + div :nth-of-type(4) {
display: none;
}

I’m not sure if actually relates to your bug. What “navigation buttons” are you referring to?

2 Likes

It works great!
@Mark_Turrell, it’s worth using the magic of @ThinhDinh

Many thanks Thinh Dinh!

2 Likes