Custom-sidebar: manage Home Assistant's sidebar items per user or device basis

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/add some items	Reorder items	Personalise
default sidebar510×1570 15 KB	hide/add some items510×1570 15.2 KB	reorder items510×1570 15.2 KB	personalise510×1570 71.8 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

mxp83 · May 12, 2024, 5:41am

Hi @elchininet

is there a way to add a margin-top/bottom to a specific item? I tried to use that styles string in the main json area, but it did nothing.

I also want to ask if there is a way to add a collapsible menu with sub items inside. My sidebar list is starting to get long…

elchininet · May 12, 2024, 3:33pm

@mxp83,

The styles option should do the job if you want to add those margins/paddings, just post your code and I can guide you how to do it.

About the collapsible menu, at the moment it is not possible with this plugin. There was a proposal to implement it into Home Assistant but it was not merged. There is also this feature request that has not received much attention.

mxp83 · May 13, 2024, 7:08am

Here’s a snippet, I’m sure I’m writing it wrong but I didn’t see a reference in the repo:

  "title": "Home Assistant",
  "sidebar_editable": false,
  "styles": ".ha-scrollbar a:nth-child:(24) { margin-top:90px }",
  "order": [

the 24th item is where the bottom: true starts.

elchininet · May 13, 2024, 1:05pm

@mxp83,

The styles are added automatically to the shadowRoot of the sidebar, you only need to specify the items, and it is better that you set the styles in the paper-icon-item element not in the a one. Try with this instead:

"styles": "a[data-panel=\"logbook\"] > paper-icon-item { margin-top: 90px }"

Instead of trying to get the item by its index, try to get it by its data-panel, the previous example tries to get the Logbook item, change it to the item that you want.

mxp83 · May 14, 2024, 7:28am

this was perfect. Thank you for helping

elchininet · May 14, 2024, 9:18am

Hi @derekmarch,
Did you solve your issue?

derekmarch · May 14, 2024, 2:11pm

I think so, thank you

elchininet · May 15, 2024, 2:58pm

Good to hear that.
Regards

daniel1to · May 26, 2024, 5:38am

Hi there,

I just came here because i asked Google for an option to edit the sidebar. Is it really still not possible to edit the sidebar by default?