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: https://github.com/home-assistant/frontend/pull/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": [] } ] }

`