villhellm / custom-sidebar Goto Github PK

Hi,

I installed the 'custom-card' correctly in Home Assistant v0.107.7.
Your card is ideal for what I need to use.
Put the only 'item:' that you can hide is the 'map'. Any of the others are ignored completely.

Thanks

order:

• item: map
  hide: true
• item: history
  hide: true
• item: logbook
  hide: true
• item: developer tools
  hide: true

I have browser_mod loaded and per your instructions I don't need to add

  extra_module_url:
    - /hacsfiles/custom-sidebar/custom-sidebar.js

but I do in order for sidebar code to be run.

Latest browser_mod (oct28), latest ha (118.4, latest custom_sidebar via HACS 0.2.2

Would it

Will it be possible in the future to change the order of the Lovelace dashboards manually.

Currently the order is always like this:

• Default Dashboard
• alphabetically sorted order of all other dashboards (A-Z)

For "Einstellungen", I did a little trick with a "zero-width space"as prefix...

Custom items become unusable in 0.115.0b1 with the following error in debug:
7/hacsfiles/custom-sidebar/custom-sidebar.js:154 Uncaught TypeError: Cannot read property 'querySelector' of null at getSidebar (/hacsfiles/custom-sidebar/custom-sidebar.js:154) at run (/hacsfiles/custom-sidebar/custom-sidebar.js:127)
My config:
`ns:

• device: windows
  base_order: false
  order:
  • new_item: true
    item: Desktop Home
    href: /lovelace-yaml/home
    icon: "mdi:home-circle"
  • item: mobile home
    exact: true
    hide: true
  • item: map
    hide: false
  • item: developer tools
    hide: false
  • new_item: true
    item: Server Controls
    href: /config/server_control
    icon: "mdi:server"
    bottom: false
• device: android
  base_order: false
  order:
  • item: desktop home
    exact: true
    hide: true
  • new_item: true
    item: Mobile Home
    href: /lovelace-yaml/mobile
    icon: "mdi:home-circle"
  • item: map
    hide: false
  • new_item: true
    item: Server Controls
    href: /config/server_control
    icon: "mdi:server"
    bottom: false`

This might be a fairly simple feature request, but I'd like to see the option to add separators to the sidebar.
Something similar to what can usually be seen between the Settings and Notifications entry.

After the latest upgrade of Home Assistant 2021.11.0 custom-sidebar stopped working with the below error:

2021-11-03 20:35:42 ERROR (MainThread) [frontend.js.latest.202111030] https://<homeassistant_url>:8123/hacsfiles/custom-sidebar/custom-sidebar.js?hacstag=223008910022:162:66 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

I have tried hide: true which is in your discription and hidden: true which is in your example.

order:
  - item: notifications
  - item: overview
  - item: supervisor
  - item: hacs
  - item: configuration
  - item: developer tools
  - item: Deconz
    bottom: true
  - item: history
    hidden: true
  - item: map
    hide: true
  - item: logbook
    hide: true

And they both dont work any hints.

First of all - Fantastic work on this one, really awesome!

I don't think it's currently possible, so suggesting a new feature.

Make the user/not_user directive accept multiple users.
If you don't want to break existing setups, add a users/not_users one that will work with lists instead of single entries.

Hello,
Since this update, I have the error below in the log.

Greetings, Jurgen

Could you add an exception for admins, so that administrator items can be customized independently?

My default customizations hide some sidebar items, but I would like to make an exception to show all sidebar items for administrators.

Thanks!

I'm just starting to play with this and it's working great for moving sidebar icons around and hiding ones that I don't want. I also love that I can add new items to the sidebar, but the name of the new time doesn't appear to display in a tooltip like I see for the default items when the sidebar is collapsed.

Examples:

Existing item with tooltip:

New item with no tooltip:

Expanded, showing the "Server Controls" text for the new item:

Setting the name does change the text when the sidebar is open, but I just get no tooltip/popup when it's collapsed.

Hi,

Sorry, I don't think that's a real issue... maybe (or certainly ?) my bad but it' not working for me.
I searched for a way to contact you elsewhere but I didn't find so I'm raising this issue.

I installed HACS 1.4.1 on my Home Assistant 0.114.3, then I installed Custom Sidebar 0.1.7 using HACS.

I followed all instructions :
I added function in my configuration.yaml

frontend:
  extra_module_url:
    - /hacsfiles/custom-sidebar/custom-sidebar.js

I created my sidebar-order.yaml using exemple at first

order:
  - item: map
    hide: true
  - item: developer tools
    href: /developer-tools/state
  - item: overview
  - item: history
    bottom: true
  - item: logbook
    bottom: true

I restarted HA but nothing happen.

I can see a new line as Javascript in Resources
/hacsfiles/custom-sidebar/custom-sidebar.js

Maybe I missed something ? Is there anything else to do to get it work ?

Thanks by advance,
Regards,

I installed this and followed the guides. It seems not having any effect. Not any sign of live in the logs either. I have a Dutch version, so i used the exact text as the UI shows to me:

order:
  - item: Overzicht
  - item: Geschiedenis
  - item: Kaart
    hide: true
  - item: Mediabrowser
    hide: true

  - item: Ontwikkelhulpmiddelen
    href: /developer-tools/state
    bottom: true
     
  - item: Logboek
    bottom: true

  - item: Automatiseringen
    new_item: true
    href: config/automation/dashboard
    icon: "mdi:cog-sync"
    bottom: true

  - item: Instellingen
    bottom: true

  - item: HACS
    name: Extenties
    bottom: true

Works fine if it is administrator but not normal users.

I have tried every way to get exceptions working, and they simply wont. My goal here is:

• Have a user "tablet" showing only a few views
• Have everyone else showing the same almost full sidebar

When I run this code, everyone get the "All" view, including tablet:

title: All
order:
  - item: map
    bottom: true
  - item: overview
  - item: history
    bottom: true
  - item: logbook
    bottom: true
  - item: supervisor
    bottom: true
  - item: Shopping List
    hide: true
  - item: Media Browser
    hide: true
  - item: Terminal
    hide: true
  - item: Server Controls
    bottom: true
  - item: HACS
    bottom: true
  - item: File editor
    bottom: true
  - item: Energy
    bottom: true
  - item: developer tools
    href: /developer-tools/state
    bottom: true
exceptions:
  - user: tablet
    order:
      - item: map
        hide: true
      - item: developer tools
        hide: true
      - item: File editor
        hide: true
      - item: HACS
        hide: true
      - item: Server Controls
        hide: true

If I change it to - not_user: tablet nothing changes. In fact if I make any changes under exceptions, nothing is changed no matter the user, device, or order.

Any tips?

Eg. if install NodeRed or ESPHome through add-on, the NodeRed/EPSHome can be openned without leave the main interface of HomeAssistant.

In case NodeRed/ESPHome is not installed as add-on but seperate application, and adding a Href to their address through side-bar customization, is it still possible to open the link in iframe of HomeAssistant?

Could you add a name: option to allow the item: found to be displayed with a different name.
For example
I have phpMyAdmin showing in my sidebar because I use Mariadb. I would like the sidebar to show 'MariaDb' instead of 'phpMyAdmin'. So I imagine the entry might be (if this was achievable)

order:
  - item: php
    name: MariaDb
    bottom: true

Hello,
I am running home assistant 0.115.2 (latest release) and am using custom-sidebar. I have manually loaded it. It seems to be working but I keep getting this error in the logs:

http://localhost:8123/local/custom-sidebar.js:62:22 Uncaught TypeError: Cannot read property 'length' of null

My config file is this:

order:
  - item: overview
    hide: false
  - item: dashboard
  - item: routines
  - item: history
  - item: sensors
  - item: layout
  - item: logbook
    hide: false
  - new_item: true
    item: Integrations
    href: /config/integrations
    icon: "mdi:server"
    bottom: true
  - item: developer tools
    bottom: true
  - item: configuration
    bottom: true

Again, it seems to be working but not sure why this message would be coming up.

Thank you very much. Great module.

I have both "Home" and "ESPHome", and without exact matching "Home" matches both items. But when I turn on exact matching, it doesn't seem to work. I tested it on all of my items, and it only matched a few of them even though I am using the correct exact titles.

Looking at the code, I think that might be because it uses the innerHTML JavaScript function. It has some code that strips out a specific empty comment string (twice?), however many of my sidebar items have seemingly random IDs inside that comment string, so I think the entire comment is being included in the exact match condition.

Would it make more sense to use textContent instead of innerHTML so that it only includes the actual visible text? Then there should also be no need to try and strip the comment tags out.

Just installed this frontend plugin and I'm getting the following error in my log.

HA version: 0.110.3 / HassOS 3.13
Custom Sidebar version: v0.1.2
Running Pi4

Log Details (ERROR)
Logger: frontend.js.latest.202005195
Source: components/system_log/__init__.py:209
First occurred: 1:55:56 PM (1 occurrences)
Last logged: 1:55:56 PM

https://<my_HA_server>/hacsfiles/custom-sidebar/custom-sidebar.js:62:22 Uncaught TypeError: Cannot read property 'length' of null

Hi
Module doesn't work with 2023.4 version.
Any update in the future ?
Thanks

Loading the config file didn't work for me.

There was a 404 present on req.open("GET", "/local/sidebar-order.yaml?rnd=" + random());

I replaced the following line in the JS and the GZ

req.open("GET", "/hacsfiles/custom-sidebar/sidebar-order.yaml?rnd=" + rando());
//req.open("GET", "/local/sidebar-order.yaml?rnd=" + random());

and now it's working - but I assume more people will run into this problem

Hi,

On https://xxx.xxx.x.xxx:8123/lovelace/default_view my side bar doubles up items and looks like:

but on every other page (eg. https://xxx.xxx.x.xxx:8123/hassio/dashboard) it shows up right:

What's causing this?

This is my sidebar-order.yaml:

order:
  - item: Overview      # Overview
  - item: map
    hide: true
  - item: Logbook       # Logbook
  - item: history
    hide: true
  - item: HACS          # HACS
    href: /hacs/entry  
  - item: File Editor  # File Editor
    name: File Editor
    href: /core_configurator/dashboard
  - new_item: true
    item: Automations    # Automations
    href: /config/automation/dashboard
    icon: "mdi:robot"
  - new_item: true
    item: Scripts      # Scripts
    href: /config/script/dashboard
    icon: "mdi:script-text"
  - item: Media Browser # Media Browser
    hide: true
  - item: deCONZ          #deCONZ
    href: /core_deconz/dashboard
    bottom: true 
  - item: Developer Tools # Developer Tools
    href: /developer-tools/state
    bottom: true
  - item: Supervisor      # Supervisor
    href: /hassio/dashboard
    bottom: true
  - new_item: true
    item: Snapshots        # Snapshots
    href: /hassio/snapshots
    icon: "mdi:camera-plus"
    bottom: true
  - item: configuration   # Configuration
    href: /config/dashboard
    bottom: true
  - new_item: true
    item: Server Controls # Server Controls
    href: /config/server_control
    icon: "mdi:server"
    bottom: true  

Thanks!

Just upgraded to HomeAssistant core-2021.11.0b0, this stopped working.

Tried new browsers, clearing the cache, nothing worked.

Hi!

Awesome plugin, been looking for something like this. 👍
It all works like a charm, but if you have the sidebar open on page load you could see reordering happen. Is it possible to hide menubar on load and display it after all dom elements have shifted order? I know it is just a beauty error/bug but ##anyway

Hi,

Custom Sidebar used to work for me in 2021.5.5 but in 2021.6.3 I can't get it to show up.

This is my first time having this respo when an update has come up - is there something I need to do?

Thanks

Hi,

This is what it shows:

When I try and it it manually it says:

What am I doing wrong?

Thanks

Getting the following error in the HA log:

hacsfiles/custom-sidebar/custom-sidebar.js:160:46 TypeError: undefined is not an object (evaluating 'getConfigurationElement(elements).cloneNode')

The code in the custom-sidebar.js is the following:
function createItem(elements, item) { var cln = getConfigurationElement(elements).cloneNode(true); if (cln) { cln.querySelector("paper-icon-item").querySelector("ha-icon").setAttribute("icon", item.icon); cln.querySelector("paper-icon-item").querySelector("span").innerHTML = item.item; cln.href = item.href; cln.setAttribute("data-panel", item.item); elements.insertBefore(cln, elements.children[0]); } }

Installed version is 0.2.2, HA OS 2020.12.1.

Best Regards

How it should look:

But after going to the user profile and refreshing (F5), the whole (working)menu shows up:

Only after going to the overview it clears the other menu items as intended.

installed as per instructions (except moved it to /www/custom-ui/custom-sidebar/custom-sidebar.js and updated url in configuration.yaml and in the js to the sidebar-order.yaml file)
when loading the following error shows:
custom-sidebar.js:7 Uncaught SyntaxError: Unexpected token '<'

problem with the DOCTYPE tag

When I do a hard refresh (CTRL+SHIFT+F5) of any page in the sidebar other than the main overview page, or go there through a direct link, the custom sidebar order doesn't load. This is with custom sidebar installed through HACS, and browser mod installed as well. When I add the frontend section to my config file, the sidebar order does load properly, immediately, regardless of which page I'm opening. Sadly though, this results in all items that are new_item's to appear twice in the sidebar. However, that only happens when going through a proxy, i.e. homeassistant.mywebsite.com. It doesn't happen on mylocalip:8123. It's not a massive problem, but it is quite annoying. Issue #35 has roughly the same thing going on with the doubling up of the new_item items.

After the latest update of HA (Docker) the logs have been moved to the configuration page which sparked the idea that it'd be pretty nifty to be able to make custom entries with this integration:

order:
  - item: custom
    name: "Logs"
    icon: mdi:note-text
    href: /config/logs

I am using custom-sidebar with home assistant 0.112.5. I have moved a couple of the dashboards, configuration and integrations to the bottom. However when I first load up home assistant and log in, those two dashboards are highlighted for some reason in the sidebar. The picture shows what I am referring to. If I visit them and then leave them the highlight goes away. I realize its not a huge problem but still inconsistent with im sure the way its supposed to work :)
Please let me know if you have any idea why this may be happening.
Here's my sidebar-order.yaml config:

order:
  - item: overview
    hide: true
  - item: dashboard
  - item: routines
  - item: history
  - item: sensors
  - new_item: true
    item: Integrations
    href: /config/integrations
    icon: "mdi:server"
    bottom: true
  - item: developer tools
    bottom: true
  - item: logbook
    hide: true
  - item: configuration
    bottom: true

Thanks very much.
Tom

I'd like to change the "Home Assistant" text above the sidebar
Issue from custom-header FR

Hi, thanks for your job!

Is it posible to block profile button?

If you refresh the web page (in a web browser) appear for one second, all side bar icons and you can choosse them. This is a way to hack the restrictions. Is possible to don't show all items to avoid this?

Thanks!

Hi,

Would it be possible to add an option to enable an order dynamically (or maybe there is already a way ?).
I would like to enable a custom order according to the state of an input_boolean.

My use-case is the following: Usually the order configuration will disable most sidebar items, leaving only things like dashboard, logbook and history. When I switch an input_boolean (like "dev mode") in the dashboard, it would use another order which shows most items.

Let me know if it's not clear.
Thank you !

Hello,
I would like to submit an idea for improvement.
I created some links with custom-sidebar which would need to be integrated into the interface by keeping the menus on the left side.
If this is something that can be added as option, I think it would be great !!!
Thanks.

installed though HACS store.

It appear in folder /www/community/custom-sidebar/custom-sidebar.js

=======
OK I got it. This case closed.

I updated to version core-2021.11.3, and when I try to add a new item it doesn't work for me, and it disorganizes the order that I already have configured.

I would like to thank you for any help with the solution.

Thanks to the creators of this add-on, it is very helpful.