Navigation (sidebar) menu display control

:information_source: Summary Allows displaying sections and links for staff, logged-in and anon users
:hammer_and_wrench: Repository https://github.com/Lillinator/navigation-menu-display-control
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Description

The Navigation Menu Display Control theme component allows for the display of various default sections and links for staff-only and/or logged-in users only. You can also specify custom sections or custom links (placeholder names are included). Additionally, there is a setting for displaying a custom menu section for anonymous users only, as well as settings for setting the order of the default sections (category, tags, chat, channels, messages) . The sections and links in the settings are lists that can edited with existing sections (see screenshots below), as well as as many custom sections or links as you wish to add.

Settings

:point_right:t2: For custom menu sections, they must be visible globally when you set them up (the Make this section public and visible to everyone checkbox must be enabled).

The top section is called “community” in the code, so if you want to hide that section, use the “community” section name. You can use the links installed with plugins, for example, docs, anniversaries and birthday links.

There are also settings that override each other - having a specific link in More visible to logged-in users will be overridden by the More drop down setting being visible only to staff.

Setting Name Description
show these sections for staff only List of sections to show for staff only. Can include custom sections with “Staff Menu = staff-menu” slug style naming format.
show these sections for logged-in only List of sections to show for logged-in users only. Can include custom sections with “User Menu = user-menu” slug style naming format.
show these links for staff only List of links to show for staff only. Can include custom links named with the same case format (“Staff Link” = “Staff Link”).
show these links for logged-in only List of links to show for logged-in users only. Can include custom links named with the same case format (“User Link” = “User Link”)
show more for staff only Check-box to show the More drop-down section for Staff only.
show more for logged-in only Check-box to show the More drop-down section for logged-in users only.
show custom for anon only Text field for a custom menu section so show for anonymous users only (hides for logged-in users).
show navigation menu to logged-in only Check-box to show the entire navigation sidebar menu to logged-in users only (hide from anonymous users).
hide custom menus globe icon Hide the globe icon from staff for custom menu sections (not visible to non-staff by default).
default menu section ordering Allows re-ordering of the default menu sections (does not apply to custom menus)

Screenshots

Settings for staff and logged-in only sections

Settings for staff and logged-in only links

Settings for more section, custom menu section for anonymous users only, globe icon, hiding entire navigation menu, and changing order of the default menu sections


For custom group-specific navigation sidebar menu sections, please use the Group Menu Sections theme component.

21 Likes

Added a section to allow re-ordering of the default menu sections.

5 Likes

I don’t think the hiding links thing is quite working correctly at the mo.

Sections hide just fine for me, but I can’t hide individual custom links when I convert them to lowercase and dashes.

But the official links seem to need lowercase. So they might be handled differently.

However - they work if the full title text is used (with spaces and capitals). So maybe only the OP (can it be wikified?) and the instructions in the TC need to be changed. Or maybe a core change is needed for consistency.

2 Likes

thanks Nathan. yea something has changed there. will have a look at this over the weekend.

1 Like

Ok the component is still functioning properly, but the custom link class name format has changed so I had to make some changes to the field documentation in the component and the OP. Please update the theme component.

Unlike the custom menu sections, for the custom links, the names in the component settings should be the same case format as their actual custom names. Of course the default ones should still be lowercase just to make things even more confusing lol. :grin:

For example, if I want to show a specific custom link called “GitHub Repo” for logged in users only:

image

I would enter the same link name in the show these links for logged-in only setting in the theme component:

image

So if you have custom links in the links display settings - show these links for staff only and show these links for logged-in only - you will need to change those component settings entries to match the link names.

Note that for custom menu sections (not links), the naming convention is still the same as it was before - it is still lower case slug style (ie: “Custom Menu Name” = custom-menu-name).

Thanks again for bringing this to my attention @nathank :hugs:

At some point I want to add the ability rearrange all the navigation sidebar menu sections, including custom ones, not just the default ones as it does currently. I know how to do it in hardcode, I just have to build it in to use settings and variables.

4 Likes

Hey Lilly,

I’m noticing:

  • I can’t reorder sections regardless of whether I use the human name or the slug
  • The whole sidebar gets hidden for guests even when I haven’t checked that box
1 Like

You can’t re-order custom sections with this component. I just checked the reorder functionality and it is working as expected.

Yea I can confirm the anon-hiding function is borked. I will fix it today. thanks for letting me know.

after looking ati it, the anon hiding function is working as expected, but you have to remove the default examples that I use in the settings for the show these sections for logged-in only to demonstrate how it works.

1 Like


Not displadisplay anyone with not logged mode?

That should be a toggle setting…

image

1 Like

see my post above yours :slight_smile:

edit: perhaps I should consider removing those and just use the screenshot to show. :thinking:

4 Likes

Ok I have done this now and edited the OP. Use the screenshots as a guide for default section and link names.

2 Likes

I think that the CSS for the ⋮ More section has changed (btn-flat is no more)

I’ve had to use this to hide it for anon:

.anon button.sidebar-more-section-links-details-summary {
    display: none;
}

Here is a PR:

2 Likes

This has been merged. thanks again Nathan :hugs:

I also fixed the hide entire sidebar for anon function which was a bit broken.

3 Likes

Hi there,

Im stuck, while trying to comprehend how to use this nice component. Im trying to achieve that anon users only see “Become a member” or something similar.
Can you please help me?

I’ll give you 3 different ways to do this:

1. Use this theme component

Make a custom sidebar menu with the link to /login and use this setting in the theme component:


2. Use CSS in a new/exsiting theme or component

If you just want to add a link in the top section under My Posts, you can add the link to /login via the More - Customized this section link like this. For example if the link is called “Login or Signup”:

Then go to a theme or theme component and edit the html / css like so:

Keep in mind that the link references in that top section are case sensitive:

.sidebar-section-link-wrapper[data-list-item-name="Login or Signup"] {
  display: none;
}

.anon .sidebar-section-link-wrapper[data-list-item-name="Login or Signup"] {
  display: block;
}

result in incognito / anon view:


3. Use the following theme component

Yes I made a specific theme component ages ago that does this. It also does the reverse - displays a section for members only (logged in users).

2 Likes

got it. Thank you very much for the detailed guidance.

2 Likes