Hamburger menu: hiding screens which are used?

[AyS_0908]

• [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

[Mark_Turrell]

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’

[AyS_0908]

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

[Mark_Turrell]

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

[AyS_0908]

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

[ThinhDinh]

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

[AyS_0908]

Thanks @ThinhDinh.

No, apparently they all have a detail view.

[ThinhDinh]

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;
}

[AyS_0908]

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

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!

[ThinhDinh]

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?

[AyS_0908]

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

Many thanks Thinh Dinh!

[nosehms]

Hi! Thanks for this!! But I have a “problem”, only works when user is logged in, not working for visitors. Can it be fixed?

[ThinhDinh]

Can you attach some screenshots of what does not work?

[nosehms]

[ThinhDinh]

If you have a static CSS then you have to make sure the number in the brackets match with the order of the tab.

I assume you want to hide the “Carta” tab? Try changing the nth-of-type(5) to the number that fits.

[nosehms]

First of all, thanks for your patience, I’m not an expert in css.

Yes, I know i have to choose the number in the brackets. When the user is logged, “CARTA” tab is the 5th tab but when user is not logged is the 4th tab. So I tried different things with no result:

1- nth-of-type(5) Disables the “CARTA” tab correctly when user is logged. When user is not logged, nothing happen, no tab is hidden (See first image posted above, “CARTA” appears when not logged in).

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

2- nth-of-type(4) Disables the “COMPLETAR PEDIDO” tab when user is logged. When user is not logged, nothing happen, no tab is hidden.

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

3- nth-of-type(4) + nth-of-type(5) I tried both at the same time. Disables the “CARTA” and “COMPLETAR PEDIDO” tabs when user is logged. When user is not logged, nothing happen, no tab is hidden.

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

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

When user is logged appears “MIS PEDIDOS” tab (only visible when user is logged with email) over “COMPLETAR PEDIDOS” tab. I deleted it to see if this caused the problem when user is not logged, but nothing changes.

[ThinhDinh]

Just to confirm, do you have multiple rich text columns and correctly display/hide them using visibility conditions?

[nosehms]

I only have one rich text in each screen without visibility conditions, everybody can see it, logged and non logged users.

This is the css i’m using:

[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: #FFBF00; 
}

[data-test="nav-button-menu"]{
display: yes; 
color: white;
}

[data-test="nav-bar"] >div +* {
  color: white !important; 
}

[data-test="back-button"] svg {
fill: white !important;
}


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

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

[Darren_Murphy]

Maybe this is a silly question, but why are you using CSS to show/hide tabs?
Why not just use Tab Visibility?

[ThinhDinh]

Yeah, I think this needs to be answered. In the original post, @AyS_0908 always have those tabs visible programmatically, but he wants those tabs hidden at the front end. Sounds like @nosehms is already using visibility conditions to show/hide tabs so CSS might not be needed.