Not working on core-2021.11.0b0

[n00bcodr]

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

Tried new browsers, clearing the cache, nothing worked.

[pimw1]

Same issue here, with version 2021.11b1. It shows the following error:

Logger: frontend.js.latest.202110280
Source: components/system_log/init.py:190
First occurred: 22:10:21 (1 occurrences)
Last logged: 22:10:21

http://192.168.178.2:8123/hacsfiles/custom-sidebar/custom-sidebar.js:162:66 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

[tomlut]

The developer of this has passed away and so it is no longer maintained.

Unless someone makes a fork and continues to support it I suggest you find an alternative.

[drinfernoo]

I'm thinking this change here looks like the culprit: home-assistant/frontend#10342

[ColinRobbins]

The issue is the same with the release version 2021.11.0

Logger: frontend.js.latest.202111030
Source: components/system_log/__init__.py:190
First occurred: 17:16:35 (4 occurrences)
Last logged: 17:26:13

http://192.168.10.39:8123/hacsfiles/custom-sidebar/custom-sidebar.js:164:66 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
http://192.168.10.39:8123/hacsfiles/custom-sidebar/custom-sidebar.js:164:66 TypeError: null is not an object (evaluating 'cln.querySelector("paper-icon-item").querySelector("ha-icon").setAttribute')

[silviudc]

Still the same errors in 2021.11.1, anyone looking at it?

[jakemauer]

I've started to look at this, but I think it will be tricky as Home Assistant has switched to including SVGs as actual SVG code imported into the ha-sidebar.js file rather than simply referencing an external SVG. (Thanks for pointing out that change @drinfernoo.) I'm not sure how to dynamically import specific SVGs based on what's set in a user's sidebar-order.yaml file.

[drinfernoo]

I resolved to removing items via the native interface, and adding new ones using this panel_custom by @balloob.

It doesn't give the ability to put things in the "bottom half" unfortunately, but I'll live with it until someone better than me with JS comes along 😅

[pooyashahidi]

I've started to look at this, but I think it will be tricky as Home Assistant has switched to including SVGs as actual SVG code imported into the ha-sidebar.js file rather than simply referencing an external SVG. (Thanks for pointing out that change @drinfernoo.) I'm not sure how to dynamically import specific SVGs based on what's set in a user's sidebar-order.yaml file.

wouldn't it be possible to use the whole svg content instead of only the name in sidebar-order.yaml like you can do on lovelace?

[bednim]

I resolved to removing items via the native interface, and adding new ones using this panel_custom by @balloob.

It doesn't give the ability to put things in the "bottom half" unfortunately, but I'll live with it until someone better than me with JS comes along 😅

Hi, tried @balloob script but it doesn't seem to work 'out of the box' - some links need to be changed/fixed. could you please show how you managed yours please?

thanks!

[drinfernoo]

I just followed the directions at the top of the gist.

[eth0up]

I've started to look at this, but I think it will be tricky as Home Assistant has switched to including SVGs as actual SVG code imported into the ha-sidebar.js file rather than simply referencing an external SVG. (Thanks for pointing out that change @drinfernoo.) I'm not sure how to dynamically import specific SVGs based on what's set in a user's sidebar-order.yaml file.

Perhaps panel_custom functionality could be leveraged here since it still supports adding icons by their mdi reference?
https://www.home-assistant.io/integrations/panel_custom/#sidebar_icon

I resolved to removing items via the native interface, and adding new ones using this panel_custom by @balloob.

It doesn't give the ability to put things in the "bottom half" unfortunately, but I'll live with it until someone better than me with JS comes along 😅

The solution provided by @balloob works very well for adding HA configuration items. I'm mostly interested in adding custom items to the sidebar that open external resources in a new browser window as the custom-sidebar previously allowed. My primary use case is a sort of "global bookmarks" config. My wife and like to simply tap on an item from the HA sidebar from our mobile apps (one ios and one android) or other devices and launch our local services without the need to remember all of the IP/hostnames/ports for each one. While this can sometimes be accomplished through use of panel_iframe, there are downsides which we don't prefer such as the fact that not every application plays nicely inside a frame. We would rather open in our native/preferred web browsers instead.
https://community.home-assistant.io/t/open-a-url-from-sidebar-in-a-new-window/290002

[eth0up]

@jakemauer As another possible option, iconify appears to generate SVG output from a given icon:
https://docs.iconify.design/icon-components/svg-framework/render-svg.html

It has the ability to be bundled in an offline fashion:
https://docs.iconify.design/icon-components/svg-framework/without-api.html

[ahmaddxb]

I have used panel_custom to add new items with icons but still use sidebar-order to move them to the bottom and to hide certain items from other users.

Make sure in sidebar-order.yaml the item is not new_item: true and only item with no href or icon. Example below.

sidebar-order.yaml

order:

• item: Server Controls
  bottom: true

configuration.yaml

panel_custom:

• name: Server Controls
  url_path: config/server_control
  sidebar_title: Server Controls
  sidebar_icon: mdi:server
  module_url: /local/panel-redirect.js

Not ideal but until Home Assistant has better admin control of which users can see what sidebar items, I cant use panel_custom alone which is misssing that feature.

[galloween]

dear all, i refactored the original code to make it work again.
you have to install it manually and the config is a little different (most notably, its now in JSON format and Exceptions are not supported).
code and notes on installation and config here:
https://gist.github.com/galloween/f3a453b4102982ced1c6787112ce23be
it works for me, hope it will work for you.
don't forget to remove the original custom-sidebar in HACS.

put js file here:

UPDATE:
this is now a proper HACS repo/plugin: https://github.com/galloween/custom-sidebar-v2

[eth0up]

dear all, i refactored the original code to make it work again. you have to install it manually and the config is a little different (most notably, its now in JSON format and Exceptions are not supported). code and notes on installation and config here: https://gist.github.com/galloween/f3a453b4102982ced1c6787112ce23be it works for me, hope it will work for you. don't forget to remove the original custom-sidebar in HACS.

I removed the HACS version, added your new custom-sidebar to /local/, set up the config in-file, added the extra module to my main configuration, then restarted HA. In the config I have hidden some items (such as Energy) and also added a couple new ones (Server Controls and a "Cookbook" item which points to a resource that is external to HA). I'm seeing mixed results across different browsers.

• On desktop browser (firefox) things are looking very good:
  

• On mobile companion app, however, I'm not seeing any of my config changes:
  

I am running latest android HA Companion App and I've already closed the app, force-stopped it, then cleared cache before re-launching.

• On firefox mobile (my very first time ever accessing my HA instance from FF mobile), I am seeing the items that I've added as new (Server Controls and Cookbook), but items that I specified to be hidden are visible (such as Energy):
  

This is my current config:

  var orderConfig = {
    order: [
      {
        item: 'overview',
      },
      {
        item: 'supervisor',
      },
      {
        item: 'file editor',
      },
      {
        item: 'terminal',
      },
      {
        item: 'hacs',
      },
      {
        item: 'configuration',
        bottom: true,
      },
      {
        new_item: true,
        item: 'Server Controls',
        href: '/config/server_control',
        icon: 'mdi:server',
        bottom: true,
      },
      {
        new_item: true,
        item: 'Cookbook',
        href: 'https://192.168.X1.XXX/apps/cookbook/',
        icon: 'mdi:silverware-fork-knife',
        bottom: true,
      },
      {
        item: 'history',
        bottom: true,
      },
      {
        item: 'logbook',
        bottom: true,
      },
      {
        item: 'developer tools',
        bottom: true,
      },
      {
        item: 'map',
        hide: true,
      },
      {
        item: 'energy',
        hide: true,
      },
      {
        item: 'media browser',
        hide: true,
      },
    ],
  };

Thanks!

[galloween]

@eth0up thanks for reporting this! fixed the issue and updated the code,
you can try to install again, restart server, hard refresh browser if needed and it should work! cheers!
https://gist.github.com/galloween/f3a453b4102982ced1c6787112ce23be
https://github.com/galloween/custom-sidebar-v2

[pooyashahidi]

@galloween is there any reasons why you changed the config, considering everything else is done via yaml?

For anyone else that already used the original code the fix by @valleedelisle works on my installation no need to do anything but change ha-icon to ha-svg-icon

[galloween]

@pooyashahidi
the original code included a ~1500 lines javascript yaml parser (2241 lines total).
getting rid of the parser (using JSON instead which is native to javascript)
and refactoring for simplicity resulted in ~250 lines of code total.
the mechanism of reordering has also been changed - from moving dom elements around to pure css re-ordering.

[galloween]

you can now install the new version as any custom repository in HACS:
https://github.com/galloween/custom-sidebar-v2

[eth0up]

@eth0up thanks for reporting this! fixed the issue and updated the code, you can try to install again, restart server, hard refresh browser if needed and it should work! cheers! https://gist.github.com/galloween/f3a453b4102982ced1c6787112ce23be

The latest v2 (via HACS) is working very well for me, to include opening external links in new window. Thanks!

[vecjh]

you can now install the new version as any custom repository in HACS: https://github.com/galloween/custom-sidebar-v2

I don't see your repository in HACS

[guilhermequinta]

@lustyffh You have to add a CUSTOM repository. You can find the instructions for a hacs installation here

[Georgegipa]

@galloween Is it possible to add back Exceptions in the new version?

[vecjh]

@lustyffh You have to add a CUSTOM repository. You can find the instructions for a hacs installation here

apologies, my bad at reading =(. it's all working now

[galloween]

@Georgegipa Done! please update via HACS and let me know if it works for you :)

{
  "exceptions": [
    {
      "user": [
        "Jim Hawkins",
        "Long John Silver"
      ],
      "order": [
          ...
      ]
    }
  ]
}

[Georgegipa]

@galloween Sorry for the late response. The exceptions part works great for my user , but for the 2nd user it doesn't display the new item . Also for all my other users that use greek the sidebar doesn't change(default one). Here is my config:

{
  "order": [
    {
      "item": "overview"
    },
    {
      "item": "Επισκόπηση"
    },
    {
      "item": "history",
      "hide": true
    },
    {
      "item": "energy",
      "hide": true
    },
    {
      "item": "map",
      "hide": true
    },
    {
      "item": "logbook",
      "hide": true
    },
    {
      "item": "calendar",
      "hide": true
    },
    {
      "item": "developer tools",
      "hide": true
    },
    {
      "item": "Supervisor",
      "hide": true
    },
    {
      "item": "HACS",
      "hide": true
    },
    {
      "item": "Node-RED",
      "hide": true
    },
    {
      "item": "phpMyAdmin",
      "hide": true
    },
    {
      "item": "Configuration",
      "hide": true
    },
    {
      "item": "ESPHome",
      "hide": true
    },
    {
      "item": "Χάρτης",
      "hide": true
    },
    {
      "item": "Αρχείο Συμβάντων",
      "hide": true
    },
    {
      "item": "Ενέργεια",
      "hide": true
    },
    {
      "item": "Ιστορικό",
      "hide": true
    },
    {
      "item": "Ημερολόγιο",
      "hide": true
    },
    {
      "item": "Εργαλεία προγραμματιστή",
      "hide": true
    },
    {
      "item": "Ρυθμίσεις",
      "hide": true
    },
    {
      "item": "Πρόγραμμα περιήγησης πολυμέσων",
      "hide": true
    },
    {
      "item": "phpMyAdmin",
      "hide": true
    }
  ],
  "exceptions": [
    {
      "user": "user2",
      "base_order": false,
      "order": [
        {
          "item": "Επισκόπηση",
          "hide": false
        },
        {
          "item": "HACS",
          "hide": false
        },
        {
          "item": "Ρυθμίσεις",
          "bottom": true,
          "hide": false
        },
        {
          "new_item": true,
          "item": "Tags",
          "href": "/config/tags",
          "icon": "mdi:nfc",
          "bottom": true
        }
      ]
    },
    {
      "user": "george",
      "base_order": false,
      "order": [
        {
          "item": "overview"
        },
        {
          "item": "map",
          "hide": true
        },
        {
          "item": "logbook",
          "hide": true
        },
        {
          "item": "history"
        },
        {
          "item": "energy",
          "hide": true
        },
        {
          "item": "calendar",
          "hide": true
        },
        {
          "item": "Media Browser",
          "hide": true
        },
        {
          "item": "developer tools",
          "bottom": true
        },
        {
          "new_item": true,
          "item": "Scripts",
          "href": "/config/script/dashboard",
          "icon": "mdi:script-text",
          "bottom": true
        },
        {
          "new_item": true,
          "item": "Automations",
          "href": "/config/automation/dashboard",
          "icon": "mdi:robot",
          "bottom": true
        },
        {
          "item": "Supervisor",
          "bottom": true
        },
        {
          "item": "hacs",
          "bottom": true
        },
        {
          "item": "phpMyAdmin",
          "bottom": true
        },
        {
          "item": "ESPHome",
          "bottom": true
        },
        {
          "item": "Node-RED",
          "bottom": true
        }
        {
          "new_item": true,
          "item": "Logs",
          "href": "/config/logs",
          "icon": "mdi:math-log",
          "bottom": true
        },
        {
          "item": "Configuration",
          "bottom": true
        },
        {
          "item": "Media Browser",
          "hide": true
        }
      ]
    }
  ]
}

[gilbert-grape]

Hi, I added your new sidebar. I edited the configuration.yaml and put the file sidebar-order.json in the www-directory. And now I see always the new sidebar. looks great! But if I try to edit the sidebar-order.json nothing changed, even a restart of HA. What do you wrong?
This is how the new sidebar looks like and which I can not change:

[galloween]

@gilbert-grape
usually a hard-refresh of the page updates the side-menu, most of the time server restart is not needed.

(in chrome you can right-click the refresh button and choose "empty cache and hard reload")

maybe there is something wrong in the json - can you post it?
also, you can take a look at the console (right click anywhere on the page, click Inspect and then click Console tab on top right) for any errors or warnings that may be related to the sidebar.

also, you installed through HACS, right?

[galloween]

@Georgegipa will take a look tomorrow!

meanwhile, as for greek titles, you should double-check if you use the right name.
you can find out which name to use by inspecting the menu element:

if you right click on it and choose Inspect, you should be able to find the <a aria-role="option"> element of the item,
inside of it there will be a <span class="item-text"> element - check that you use exactly the same text as there.

Alternatively you can try to use the text from the data-panel attribute on the <a aria-role="option"> element.
(For this to work, you need to make sure you have the latest version of the plugin. If HACS doesnt offer the update you can find the plugin in the HACS Frontend section, click the 3 dots menu and choose Redownload - just in case).

(in this example, you can try to use "config")

also while you are at it, check the Console tab of the inspector to see if there are any errors related to the sidebar that may give further clue on what's wrong

[gilbert-grape]

@gilbert-grape usually a hard-refresh of the page updates the side-menu, most of the time server restart is not needed. maybe there is something wrong in the json - can you post it? also, you can take a look at the console (right click anywhere on the page, click Inspect and then click Console tab on top right) for any (red) errors that may be related to the sidebar.

also, you installed through HACS, right?

thanks for the fast answer

1. Yes I have installed with HACS
2. A browser refresh, even a new browser without cache used
3. The java script console of chrome tells: custom sidebare loaded successfully custom-sidebar-v2.js:332
4. I used your sample config-file from the documentation, without a change
5. below the config-file i like to use:

`
{
"order": [
{
"item": "overview"
},
{
"item": "history"
},
{
"item": "logbook"
},
{
"new_item": true,
"item": "Zigbee",
"href": "/config/zha/visualization",
"icon": "mdi:zigbee",
"bottom": true
},
{
"item": "hacs",
"bottom": true
},
{
"new_item": true,
"item": "Server Controls",
"href": "/config/server_control",
"icon": "mdi:server",
"bottom": true
},
{
"item": "configuration",
"bottom": true
},
{
"item": "supervisor",
"bottom": true
},
{
"new_item": true,
"item": "Logs",
"href": "/config/logs",
"icon": "mdi:math-log"
},
{
"item": "developer tools",
"bottom": true
},
{
"item": "energy",
"hide": true
}
],
"exceptions": [
{
"user": [
"Jim Hawkins",
"Long John Silver"
],
"base_order": false,
"order": []
}
]
}

`

[galloween]

@gilbert-grape
I tried your config, it seems to work fine for me, here's how it looks:

notice that some items that you did not hide are still there (file editor, terminal).

are you sure you are editing the right file? in the built-in file-editor, the path should look like this:

[galloween]

also, you can get rid of the "exceptions" part at the bottom (it doesnt do anything).
dont forget to remove the comma before the "exceptions" (or json will be invalid)

[gilbert-grape]

I think I am editing the right file, check my screenshot. It is very strange.

The json is valid, I have checked with a validator.

[gilbert-grape]

WAIT: I see in the console log after some seconds, after "loaded sucessfully" the message "Tried 10 times and gave up"

[galloween]

@gilbert-grape Ignore the 10 times error, its by mistake. Fixed it in another update just now.

as for the main issue, last thing to check is that you have added the js file to the config.yml:

other than that, maybe you could try to remove the plugin and re-install it again...

[galloween]

by the way, did you know you can click and hold the Home Assistant header on top of the sidebar and then it will allow you to add/remove and re-order some of the items (but not add new custom ones)?

this feature is also accessible from your profile settings (if you click on your name in the bottom left corner):

[gilbert-grape]

by the way, did you know you can click and hold the Home Assistant header on top of the sidebar and then it will allow you to add/remove and re-order some of the items (but not add new custom ones)?

this feature is also accessible from your profile settings (if you click on your name in the bottom left corner):

I know, but thanks. The problem with the default sidebar is, that you can add only the available menu elements. But mine is not in the list - so your sidebar is the key.

[gilbert-grape]

• I have added the link/url in the file configuration.yaml

• I have uninstalled/deleted the plugin in HACS, removed cleaned the file configuration.yaml and deleted the file www/sidebar-order.json. Then I restarted HA. Then I reinstalled the sidebar. I started with installation in HACS. Interesting is: After the installation in HACS, HACS asked to reload HA frontend. I added the config in configuration.yaml and restarted HA. I have no file created in www/sidebar-order.json. But I see the menu of the screenshot of the above comment. It looks like it does not load the sidebar-order.json-file.

[guilhermequinta]

@gilbert-grape @galloween
I had the same problem. The sidebar was correct on my phone but on my pc the sidebar was "frozen" on my original sidebar-order.json i made after installing custom-sidebar-v2 (via hacs btw). I did all that is stated above and nothing fixed it. The funny thing is that it was displaying it correctly on a private tab (I'm using chromium edge). So i deleted all of my cookies and site data. The problem persisted still. The only way i could fix it was to delete "C:\Users\user\AppData\Local\Microsoft\Edge" resetting the browser (a bit nuclear i know). Once i did that it worked like a charm. I haven't changed the config since then and honestly I'm afraid to 😆

[galloween]

oh!! thats actually a great advice - to clear site data (along with the cached old config json) !!!

In Chrome you can do it either by: right-click -> Inspect -> Application -> Storage -> Clear site data

or by: click the icon in the address bar -> Site settings -> Clear data

thanks @Centazi !

[gilbert-grape]

@Centazi @galloween
Thats the solution, the cache! Thanks for your help. On the PC in private mode it works like a charme!
But what about my android phone app? I use the standard HA android app. There I still don't see the changes. do I have to uninstall/reinstall the app?

[galloween]

@gilbert-grape
it seems there is a clear cache button somewhere in android global settings app management section:
https://community.home-assistant.io/t/does-anyone-know-how-to-flush-android-app-cache-to-avoid-unexpected-frontend-version-in-hacs/

[AlxSZP]

@galloween I don't know if you're monitoring this thread, but I can't quite seem to get your code to work