Custom-sidebar rearrange, hide, or add menu items to Home Assistant's sidebar

elchininet · January 3, 2024, 3:34pm

Hi folks, I have rescued custom-sidebar-v2 plugin and brought again to live because since a while I want to use it in one of my kiosk devices but it is not longer maintained and the repository is archived.

I am plannig to keep it alive and up to date with any Home Assistant front-end update.

Default sidebar	Hide some items	Add new items	Reorder items
default sidebar510×1570 15 KB	hide items510×1570 11.3 KB	new items510×1570 15.2 KB	reorder items510×1570 15.2 KB

If you have been looking for something like this too, try it out and report any error or unwanted behaviour opening an issue in the repository.

Regards

sd_dracula · January 7, 2024, 10:09am

Well done, I was looking for this exact thing since the v2 around HACS stopped working a while back

sd_dracula · January 18, 2024, 9:45pm

Any issue with this? Just stopped working for me all of a sudden

elchininet · January 19, 2024, 6:39pm

Go to the repo and open an issue there describing what is happening.
We can continue there.

elchininet · January 19, 2024, 7:50pm

Just in case that it stopped after you updated from version 1.x.x to version 2.x.x, read this:

github.com/elchininet/custom-sidebar

[BREAKING CHANGE] Change configuration file name and refactor the matcher logic

elchininet:master ← elchininet:refactor_matcher_logic

opened 08:31PM - 12 Jan 24 UTC

elchininet

+44 -22

This is a breaking change and a major update of the plugin. ### 1. Change of …the configuration file name: The configuration contains the order of the item in the sidebar, but it is also possible to set the title and in the future there are plans of adding more options to the configuration. Because of this, the name of the configuration has been changed. From now on, it must be `sidebar-config.json` or `sidebar-config.yaml` instead of `sidebar-order.json` and `sidebar-order.yaml` ### 2. New `order` option: Previously, the match was done selecting the item text or its `data-panel` property. There were specific cases in which this configuration was not enough and it was matching multiple elements of the sidebar. Consider the next example: * `<a data-panel="ui-configured">UI Configured</a>` * `<a data-panel="instellingen">Instellingen</a>` * `<a data-panel="config">Instellingen</a>` With the next order element: ```json { "item": "config" } ``` It was matching the first element (`UI Configured`) instead of the third (`Instellingen`) because it contains "config" in its text . With the next order element: ```json { "item": "Instellingen" } ``` It was matching the second element (`Instellingen`) instead of the third (`Instellingen`) becaude both has the same text and the second one appears first. Even if this could be circunvented in some cases with the `exact` option, this could be confusing and problematic for certain cases. With this change, the matcher logic has been improved to match exactly what one wants to match and avoid these kinds of situations. ##### match option There is new option (`match`) that used together with `exact` makes the matching logic more predictable an easier. This option specifies which text will be used to make the match, by default the match is done by the element text, but it is also possible to match the `data-panel` attribute as before but now you would need to explicitly sepecify it ("data-panel"). And now it is also possible to match the sidebar element by its `href` attribute if you set this option as "href". | Property | Type | Required | Description | | --------- | ------- | --------- | ----------- | | item | String | true | This is a string that will be used to match each sidebar item by its text, its `data-panel` attribute or its `href`. If the `exact` property is not set, it is case insensitive and it can be a substring such as `developer` instead of `Developer Tools` or `KITCHEN` instead of `kitchen-lights`. | | match | String | false | This property will define which string will be used to match the `item` property. It has three possible values "text" (default) to match the text content of the element, "data-panel" to match the `data-panel` attribute of the element, or "href", to match the `href` attribute of the element | | exact | Boolean | false | Specifies whether the `item` string match should be an exact match (`true`) or not (`false`). |

sd_dracula · January 20, 2024, 9:56pm

Thanks, yes I had the old file name sidebar-rdoer.json, fine after correcting it as per the link

0kk0 · April 7, 2024, 10:00am

Very nice!!!
Exactly what I was looking for after seeing other 2 repos that were not updated for a while…
Thank for this sidebar custom shizzle plugin v3!!

jmyler12 · April 17, 2024, 7:22pm

What does this do that a long press that activates the sidebar editor in baseline not do?

elchininet · April 19, 2024, 12:17am

@jmyler12,

Check all the options in the documentation, all the possibilities are documented there. But just some things (among others) that you can achieve with this custom plugin and it is not possible natively:

The changes are stored in a config file so if you logout and login again, they don’t get lost. The same applies to different devices, every time that you log-in in a device the configuration that match with your username is taken from the stored config.
You can change the icon or rename the sidebar items
You can move items to the bottom group of the sidebar
You can dynamically add notifications to the items in the sidebar (for example, display the number of HACS updates as a notification in the HACS sidebar item)
You can use JavaScript/Jinja templates in some of the elements

But as it is stated in the last section of the documentation, if you don’t need anything of this, it is probably that the built-in sidebar configuration options are enough for you.

Malc3667 · April 19, 2024, 10:56am

For those searching for another option…

just use the built in functionality…

Click and hold ‘Home Assistant’ text for a few seconds, release and edit!

Took me a while to find this!

elchininet · April 19, 2024, 6:48pm

Hi @Malc3667,

Read the message that I left before or consult the documentation. Custom-sidebar is not only to hide and reorder the sidebar items for the current user and the current session (as the built-in functionality) so the built-in functionality is not another option to achieve what this plugin achieves.

But as it is stated in the same plugin documentation, maybe for some users the built-in functionality, together with the built-in panel_custom and the panel_iframe features, is enough for their use cases.

Regards