Discourse Dynamic Sidebar Icon

[Lilly]

	Summary	Makes the sidebar toggle icon dynamic and customizable
	Repository	https://github.com/Lillinator/discourse-dynamic-sidebar-icon
	Preview	https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon
	Install Guide	How to install a theme or theme component

Install this theme component

Summary

A lightweight Discourse theme component that dynamically changes the header’s sidebar toggle icon based on whether the sidebar is open or closed.

By default, the component displays the standard hamburger menu icon (bars) when the sidebar is closed, and transitions to a close X icon (xmark) when the sidebar is open. Admins can specify custom icons as well.

Features

• Gives users clear visual feedback on how to interact with the sidebar.
• Admins can easily replace the default icons with any FontAwesome icon via the theme settings.
• This component is exclusively for desktop and tablet viewport widths; thus, it has no effect on mobile unless the screen is rotated to landscape view and refreshed.

Settings

Customize the icons used for opening and closing the sidebar by editing the component’s settings:

setting	description
icon_to_open_the_sidebar	the icon displayed when the sidebar is collapsed (default: bars)
icon_to_close_the_sidebar	the icon displayed when the sidebar is expanded (default: xmark)

Important Notes

• If using custom icons that aren’t already included in core Discourse, they will appear blank; to fix this, you must add the custom icons (e.g., rocket, cat) to the SVG icon subset site setting in your Discourse admin settings (see All Site Settings → SVG icon subset).
• This component does not work with header drop down mode.