Discourse Combined Auth Button

[Lilly]

	Summary	Replaces the default auth buttons with a combined button that opens a dropdown or modal with links
	Repository	https://github.com/Lillinator/discourse-combined-auth-button
	Install Guide	How to install a theme or theme component

Install this theme component

Overview

This theme component combines the sign up and login buttons into one button with drop down options, for a cleaner header space and improved user experience (especially for mobile users).

In particular, the default Discourse mobile forum view hides the Sign Up button and just shows the existing Log In button; this can be confusing and non-intuitive for new visitors to Discourse forums (anonymous view). Moreover, the default mobile view log in button links to the log in page that in turn, has a link to the sign up page; this creates unnecessary friction for new users on mobile devices.

Default mobile view without component:

This simple Discourse theme component replaces the existing Log In button with a combined button with clearer labeling - the default is Sign Up / Log In. When clicked or tapped, it opens a dropdown menu or mobile modal with links to the respective sign up or log in pages.

Mobile button and modal with component default settings:

Desktop button and dropdown menu with component default settings:

---

Settings & theme translations

There are admin settings that allow for enabling on desktop, hiding the combined button icon for more header space in mobile view, as well as for changing all the button icons and labels.

Setting	Description
enable_on_desktop	Enable the combined auth button on all viewports sizes
hide_mobile_combined_button_icon	hides the combined auth button icon in mobile view to save header space
combined_button_icon	SVG icon for the combined auth dropdown button
login_button_icon	SVG icon for Log In button
signup_button_icon	SVG icon for the Sign Up button
button_labels.auth	combined button text string for theme translations
button_labels.log_in	log in button text string for theme translations
button_labels.sign_up	sign up button text string for theme translations

---

More screenshots

Settings page

With hide_mobile_ combined_button_icon enabled

Changed button labels and icons

Mobile:

Desktop:

---

Notes

• This component is compatible with the Left side hamburger menu on mobile but centring the site logo may cause crowding issues in the header.

---

Check out my other Discourse stuff

[Lilly]

i just pushed an update to this that improves the experience by opening a mobile modal that links to either the sign up or login pages. updated the OP as well. thanks to @Moin for the idea!

screenshots

default component modal buttons:

changeable button labels:

[eisammy (Sammy)]

Thank you very much @Lilly, I will test it soon.

[Lilly]

ok i have made some changes to this component again - one can now enable it on desktop and change all the labels and icons.

the component repo has also been renamed. it will continued to work if you have it installed, but you should change the source (or re-install it) at some point to avoid potential future repo source issues.