Navigation Menu (Sidebar) Modifier

theme-component
,
1

:warning: THIS THEME COMPONENT IS BEING DEPRECATED
It has now been superseded by the Navigation Menu Display Control component
:information_source: Summary Navigation Menu Modifier
:hammer_and_wrench: Repository https://github.com/Lillinator/navigation-menu-modifier
: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

:arrow_forward: update: component has been renamed to reflect the updated naming convention see this fix: FIX: Update sidebar to be navigation menu (#22101) · discourse/discourse@2effcaa · GitHub

:arrow_forward: update: the Sidebar hider from anon component by @nathank has now been merged into this one - thanks Nathan!

i have seen a number of inquiries in recent weeks about customizing or hiding certain parts of the navigation menu (sidebar), so i put this theme component together to make some of those things a bit easier to do, as well as give users some other options with the navigation menu configuration.

this component allows the following:

  • specifying navigation menu background color
  • changing navigation menu header text sizes and colors
  • changing link text sizes and colors for the navigation menu
  • hiding of specific sections and links from regular or anonymous users (including whole Community section, as well as anniversary and birthday links from More section)
  • shaping or hiding of category bullets in the navigation menu
  • hiding of lock badge icon from secure categories
  • changing side-bar link icon colors
  • changing navigation menu current link colors
  • hiding a custom section from either anonymous or regular users.
  • update: hiding the whole navigation menu from anon users
  • update: hiding of More… section from anonymous or all users

keep in mind some of the settings will override your existing theme for navigation menu colors and font sizes, so you may wish to download more than one component if you use dark and light themes and want to override some of your existing theme’s colors. you can also use your existing color variables so that you can adapt it to any existing theme for light and dark mode.

it assumes you have not used text-replacement to rename any applicable sections (if you have replaced some section text, you will need to revert those text replacements for this theme to work on those particular sections).

of course you do not have to use all the settings, so if you are just wanting to hide some sections or change font colors and sizes in the navigation menu you can do that.

this theme also assumes you are using the sidebar version of the navigation menu and works in both desktop and mobile views (i don’t think it will work for hamburger drop down mode and i haven’t even tested it for that).

color settings can be in hexidecimal, css color name format - W3 CSS Color Reference, or theme color variables.

i will add more options to this component as the Discourse Team continues on it’s navigation menu development path. possible future additions are hiding custom sections from anonymous users and user-configurable transparent side-bar background.

edit: have since added the ability to hide a custom section from either anonymous users or regular users (visible to staff only).

thanks to @nathank and @Don for some of the code snippets.

edit: updated to include functionality to hide the “More…” drop down section under the top level navigation sidebar menu from from either anonymous or all users.

27 Likes
2

Thanks for wrapping this up in a component! :sunny:

You can just use Discourse’s color variables instead of declaring hard-coded colors. I think this could be helpful to point out in your intro topic, as well as on the tooltip notes.

image
image728×114 8.93 KB

6 Likes
3

thanks, good point. ok i added more info. yea i knew about the variables but i want to include colors in the component to override the existing variables. i’m working on a transparency function for it. leaving any color blank reverts to the default variable. i find myself overriding color variables sometimes because var-primary-low happens to be some grey color when i’d rather use a shade of purple. i originally had the full css extended color names as lists choices in the color fields but that was unruly and didn’t allow hex colors, which old-school me likes using.

edit - updated the tool tip to include using color variables. thanks for the tip :slight_smile:

4 Likes
5

i have now updated the theme component with ability to hide a custom section from either anonymous users or regular users (only visible to staff). note this can be circumvented with some hacky css stuff in dev tools and is not bullet proof, but it works otherwise.

1 Like
6

An improved summary could be “Hides certain parts of the sidebar from certain users”

7

updated this component - the Hide sidebar from anon theme component by @nathank has now been merged into this one. one can now hide the whole sidebar from anonymous users :slight_smile:

i also updated the name of the component to reflect new naming convention as per this fix: FIX: Update sidebar to be navigation menu (#22101) · discourse/discourse@2effcaa · GitHub

also made topic a wiki.

2 Likes
8

updated this component to fix a couple issues in mobile.

3 Likes
9

updated to include settings for hiding of the “More…” drop down section under the top level Menu from either anonymous or all users.

2 Likes
10

just a note about the more section - now that it contains the section editor for the top section after recent core changes, you may not want to hide it from all users (can still hide from anon of course). i will add an option to only display it for admin. also, hiding the community section will still hide that top section even though the section header has been recently removed, so that setting still works.

i will try to update this component this week. i plan on splitting it into two components - one for formatting and another for manipulating the sections (along with some new settings and options i’ve been working on).

11

Hey @Lilly Since I needed so bad the header “community” which was removed in the last update, I used your theme component to bring it back and I achieved that by deleting that whole section and hiding more from all user after that.
Then I created a new header with the global links.

So can you please :pray::pray::pray: also leave the option hide “more” from everyone, if we still can not name the menu header (community or else) above topics, latest… and more.

1 Like
12

hi @Dante_Dante, no problem. i actually just made a new component for group menu sections that is simpler and can hide that top section as well. but i won’t remove that function when i update the original menu modifier component. :slight_smile:

2 Likes
13

@Lilly thanks a lot for your consideration, and for pointing out the new component for group, I will check it out for sure.

14

added a new option to hide the Docs link in top section. will be removing the font formatting options soon (and maybe putting them in a separate TC).

15

Wonderful work! Would it be possible to add an option to hide just the “All Categories” item? Thanks!

2 Likes
16

thanks @davidkingham. you can do this in common css of a theme or component.

.sidebar-section-link-wrapper {
     .sidebar-section-link {
         &[data-link-name="all-categories"] {
         display: none;
         }
     }  
}

when i update this component fully (and i plan to this coming week), i will add options to not display any link an admin can specify, not just the sections.

3 Likes
17

Is there a way to hide one section from anon users and another one from authenticated users?

I have a custom section defined with Latest, New, Unread, Top and Bookmarks. While all these works for logged in authenticated users, New, Unread and Bookmarks do not work for Anon users.

So I’m trying to figure out how to disable those 3 links for Anon users. One way is to have separate custom sections for anon users and authenticated users. Otherwise is there a way to disable specific links within custom sections for Anon users?

1 Like
18

I’ve done something similar (Hide two sections from logged in), and I just installed two copies of the theme component to make it work.

1 Like
19

I think you do this with my group navigation menu sections theme componenet:

3 Likes
20

Can you please elaborate on how do you installed 2 copies and how you configured them separately for anon and logged in users?

21

Just have one configured for one section (Say, the anon one), then Install the theme component again, and say yes when it asks if you’re sure (since it’s already installed). Then configure the second one for the second section (here, the logged in one). Make sure you apply both of them to your themes!

1 Like