Custom User Menu

:information_source: Summary Adds a dropdown menu to the header, giving users quick access to personal settings and pages
:hammer_and_wrench: Repository Manuel Kostka / Discourse / Components / Custom User Menu · GitLab
: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

Adds a stand-alone user menu to the header. It replicates the items that are by default on the profile tab of the notifications menu.

User Menu view

Notifications Menu view

The component hides the related tab from the notifications menu. The views without and with the component:

:compass: Roadmap

Add mobile modal

Style custom status

Adjust panel placement

Switch name and username depending on site setting

5 Likes

I love using this component already!

I really like the separating the notifications out of the user menu. nicely done. :smiley:

2 Likes

It seems there is a small conflict between this and F NAV Mobile Navigation Tabs, which moves the Notification bell to the bottom of the screen. It still functions fine, but where the bell should be in the header, it’s just a blank space. Tapping that blank space opens the same menu as tapping my profile picture.

2 Likes

Thanks for pointing this out! I don’t see how I’d make this compatible though.. Using both components at the same time will likely lead to other ux and style conflicts, as they essentially introduce the same menu, but with slightly different template implementations.

1 Like

I can only speak for myself and my particular use case, but I would love to be able to utilize this component for desktop/laptop use and have it “step aside” on mobile and let the tabs component do the work.

The only thing I could think of would be to have this component look for the tabs component and the size of the display. The tabs component is only active on mobile, so perhaps it could work as designed on large screens and if tabs is active, turn off on smaller screens. I have no idea what kind of work that would require or if it’s even possible.

I’ll add a dedicated mobile style a bit down the line. Then you can use this component for the user menu, also on mobile. And the footer navigation from the other component. This should actually align just fine.

1 Like