# Discourse Bars 🍻 🍸 (a sidebar framework) **URL:** https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216 **Category:** Theme component **Created:** [March 6, 2024, 4:17pm UTC](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216 "2024-03-06T16:17:30Z") **Posts on this page:** 1 **Showing post:** 1
### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield) #### Post date: [March 6, 2024, 4:17pm UTC](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216/1 "2024-03-06T16:17:31Z")
### 👓 Overview A Theme Component that allows you to lay out Components\[1\] on top and side bars. - Specify a set of “widgets” distinctly for Route and Position. - Supports setups for each of: discovery\[2\], topic, tag\[3\], category\[3:1\], categories\[3:2\] OR tags-intersection\[4\] - “Bars” can be either: top, left, right OR alternative right location. - Each bar can be collapsed or dismissed (refresh browser to reset dismiss). They can be minimised by default. - Handles the Official Sidebar, but if you intend you use a Bars Left Sidebar, the Dropdown mode of the official Sidebar is recommended. - It comes with existing example settings that show some big letters, partly as a demo and partly so you can see example settings. Delete these and replace with your own Component names. - Ships with one Component: `bars-custom-html` (see pre-filled example settings) - but components from many existing Theme Components & Plugins are compatible. - Mobile support is not yet implemented. ### 🔗 Quick Links | | | | --- | --- | | 🐙 Get the code | `https://github.com/merefield/discourse-tc-bars` | | 👀 See the code | [GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars · GitHub](https://github.com/merefield/discourse-tc-bars) | | ❓ Installation Guide | [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | Enjoying this Theme Component? Please ⭐ it on [GitHub](https://github.com/merefield/discourse-tc-bars)! 🙏 Gratuitous example: ![image](https://global.discourse-cdn.com/meta/original/4X/8/2/1/8217144d1f56a666b3e0bc8f8a8c68f660450abe.jpeg) Upon first load: ![image](https://global.discourse-cdn.com/meta/original/4X/6/0/0/6006deaa109f87add3b69452be99b1ca58f9ae5b.png) ### ⚠ Some important things to note about this TC! - This Theme Component is mainly intended for developers and administrators that have some technical understanding of Theme development. If you are not sufficiently technical and need help with implementing sidebars using Bars, you can hire me or a developer in #Marketplace - This Theme Component is intended to provide a framework for supporting sidebars. It does _not_ and is _not_ intended to provide final visual polish which you will need to add in your Theme with additional CSS. However, it does a lot of work for you and gives you less things to think about and maybe even give you the ability to do things you didn’t have the ability to do before … 😅 ### Component considerations - You must specify a Component name. The component name is in fact the same as the filename in the theme, tc or plugin `component` directory without the suffix. - They can be from an existing Theme Component or Plugin. Existing Components may work. Examples are: - It requires some expertise to build Components - Components must source their own data (they can’t use plugin outlet pass-through models unfortunately due to the specific plugin outlets required to be used to lay things out in this way) - You may need to style the sidebar and component boundaries to taste. (again if you need help, consider hiring a developer). ### Why - With the update of Discourse core to Ember 5, the trick [Pavilion’s plugin Layouts](https://meta.discourse.org/t/layouts-plugin/55208) used to provide an excellent way to manipulate the Discourse layout ceased to work. There was now no easy way to show a sidebar on a Topic route via a relatively easy end-user interface. - In addition, Ember introduced Glimmer Components that were much nicer to work with. (Layouts used the Widgets API which is deprecated in favour of Glimmer Components). - Finally Discourse core team provided a new JSON editor for Theme Component settings which made deploying a more complex setting possible 👍 🚀 - Rather than fix the Layouts plugin (TC’s didn’t exist back in Layouts day), it made sense to rebuild as a Theme Component, because we can achieve most things we need just in the front end. - **Enter “Bars” 🍻 🍸 Cheers!!** ### Known Issues - Top bar doesn’t stick (I may remove the corresponding setting if I can’t resolve). ### Credits - Spiritual successor to the now broken [Layouts Plugin](https://meta.discourse.org/t/layouts-plugin/55208) built by @angus (Cheers!) which served us well for many years. - Uses the params system from [Right Side Blocks](https://meta.discourse.org/t/right-sidebar-blocks/231067) (thanks @pmusaraj!) * * * 1. the term ‘discovery’ (route) refers to the main Topic List pages (e.g. “Latest”, “New”) that allow you to browse available Topics before clicking and diving into a specific one. 2. technically also a “discovery” route but we’re breaking these out to distinct names so you can treat them differently if you so choose. 3. See [here for more details](https://github.com/discourse/discourse/pull/26291). So that this remains optional (not all installers of Bars will want a custom homepage) Bars does not add the required modifier in `about.json` so you must add this in the parent Theme or another TC to activate it. 4. See the [Tags Intersection Plugin](https://meta.discourse.org/t/tag-intersection-navigator/368815) --- _[View the full topic](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216)._