galloween/custom-sidebar-v2

Home Assistant (HACS) plugin that allows you to rearrange, hide, and add sidebar menu items. Refactor of https://github.com/Villhellm/custom-sidebar

Note: some useful insights for troubleshooting in this thread. Also see these notes.

Home Assistant Custom Sidebar v2

Custom HACS Lovelace Plugin that allows you to rearrange, hide, and add Home Assistant sidebar menu items.

This is a refactor of the original Custom Sidebar plugin by @Villhellm
to make it work with recent versions of Home Assistant.

Villhellm's code was refactored with simplicity and performance in mind.
The YAML parser that was part of the original code has been removed and so the config should now be provided as JSON.

HACS Installation

Go to HACS / FrontEnd, add custom repository, then find it in the list and click Download.

• add in confgiguration.yaml (unless you use browser_mod):

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

Manual install

• put custom-sidebar-v2.js in <config directory>/www/
• add in confgiguration.yaml:

frontend:
  extra_module_url:
    - /local/custom-sidebar-v2.js

Configuration

config is now in JSON format (not yaml).
Save it as sidebar-order.json and put it in <config directory>/www/.
If using manuall install, you can include the config object directly in the .js file (follow comments there).

For full example see this: https://raw.githubusercontent.com/galloween/custom-sidebar-v2/main/sidebar-order.json
Also check original repo docs for explanations.

Short example:

  {
  "order": [
    {
      "new_item": true,
      "item": "Google",
      "href": "https://mrdoob.com/projects/chromeexperiments/google-gravity/",
      "icon": "mdi:earth",
      "target": "_blank",
      "order": 4
    },
    {
      "item": "overview",
      "order": 2
    },
    {
      "item": "supervisor",
      "order": 1
    },
    {
      "new_item": true,
      "item": "Integrations",
      "href": "/config/integrations",
      "icon": "mdi:puzzle",
      "order: 3
    }
  ]
 }

Notes

• all items in config.order should have unique "item" property
• check out this post on how to find the name of the menu item
• items with "hide: true" are not considered in new order,
• all other items will be ordered according to their (optional) "order" property OR in the order of appearance in config.order
• if using "order" property, make sure either all items (except hidden) have this property, or none of them (otherwise order may be messed up).
• any items present in Sidebar, but not in config.order, will be shown on the bottom of the top part of the list
• when using Exceptions, pay attention to "base_order" property - if it's set to "false", the main config.order will be ignored, leaving you with default sidebar (which now should be modified with the exception's order)
• if you seem to be stuck with old config, try clearing site data - instruction here

Exceptions

You can define user-specific order using exceptions feature (see details in original repo)

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

Home Assistant built-in sidebar configuration options

Check out Home Assistant's "native" sidebar tools - quite possibly, it will be enough for your needs.

• You can use HA's panel_custom integration to add internal links to the sidebar. Take a look at this tutorial. Official docs.
• You can use HA's panel_iframe integration to add external links. See below. Official docs.
• 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):

Combine with Iframe Panel to show external content inside Home Assitant

If you use Home Assistant's Iframe Panel feature and have some iframe_panel links configured in configuration.yaml

panel_iframe:
  router:
    title: "Router"
    url: "http://192.168.1.1"
    icon: mdi:router-wireless
  fridge:
    title: "Fridge"
    url: "http://192.168.1.5"
    icon: mdi:fridge

then you can reorder iframe links, same as regular ones, in sidebar-order.json:

{ order: [
  { "item": "fridge" },
  { "item": "overview" },
  { "item": "router" }
  ...
]}

---

by @galloween

custom-sidebar-v2's Issues

Not working in latest chrome / ha

Just installed your v2, it loads but throws errors in the console, I guess the UI has changed.

Tooltips

When this plugin is used (and it's amazing, as I have some external links I want added that are not iframe-friendly), I've noticed that new items don't have tooltips, while HASS-default items do.

Suggestion would be to add a tooltip property to allow for custom tooltips, or use the name / id somehow

Sidebar never updates

This component seems to be causing me nothing but trouble...

The only way I can get the sidebar to update when I make changes in sidebar-order.json is in Incognito Mode (I use Chrome). I've tried clearing data for that site, force refreshing, etc... And it seems that if I'm ever able to get it to update, it's only in Incognito.

My sidebar-order.json here: https://pastebin.com/fcqXhmgD

Is there any particular reason why this one doesn't seem to want to update for me?

Fast loading

Hi is it possible to have it load a little faster? Maybe first load the config and after that check for any errors?

I want to remove certain tabs for some users but because this is hiding the tabs and not removing it when the default tabs show for just a second I would go and check the code and find the hidden items.

Schermopname.2022-01-31.om.17.38.38.mov

Exceptions do not hide items

Adding user specific exceptions and having them hidden does not hide them for that user??

........
],
    "exceptions": [
    {
        "user": [
            "Su"
        ],
        "base_order": false,
        "order": [
            {
                "item": "overview",
                "order": 1
            },
            {
                "item": "energy",
                "hide": true
            },
            {
                "item": "map",
                "hide": true
            },
            {
                "item": "logbook",
                "hide": true
            },
            {
                "item": "history",
                "hide": true
            },
            {
                "item": "media browser",
                "hide": true
            }
        ]
    }
    ]
}

Configuration badge (notification) are repeated on all new items

The badge from the Settings-menu are repeated to all new_item's in sidebar-order.json.

In my case Settings is the place where the badge displaying 3 shall be.
This is how it looks if I remove everything in sidebar-order.json:

my sidebar-order.json:

  "order": [
    {
      "new_item": true,
      "item": "Automations",
      "href": "/config/automation",
      "icon": "mdi:home-automation",
      "order": 1,
      "bottom" : true
    },
    {
      "new_item": true,
      "item": "Integrations",
      "href": "/config/integrations",
      "icon": "mdi:puzzle",
      "order": 2,
      "bottom" : true
    },
    {
      "item": "HACS",
      "order": 3,
      "bottom" : true
    },
    {
      "new_item": true,
      "item": "Z-Wave JS UI",
      "href": "http://example.com:8091/",
      "icon": "mdi:z-wave",
      "target": "_blank",
      "order": 4,
      "bottom" : true
    },
    {
      "item": "Developer Tools",
      "order": 5,
      "bottom" : true
    },
    {
      "item": "Settings",
      "order": 6,
      "bottom" : true
    }
  ]
}```

Add "defaultPanel" configuration setting

Wonder if would be possible/sensible adding a defaultPanel configuration setting which will automatically browse to a defined panel/page upon loading of the plugin. In this way when accessing HA from a new device or with a new user, he is moved away ASAP from the default Overview dashboard which is displacing for new/guest users.
Thanks!

Does not work on HA release 2023.4

The title says it all, stopped working with HA release 2023.4.

Plugin not working for non-admin users

Hi, first of all thanks for refactoring this plugin and make it working with the latest version of HA :-)
I noticed everything works fine for admin users but not for non administrators. The issue seems related to getSidebarItem() when called upon startup returning undefined since looking for "data-panel" equals to "config" which is not there for a non admin user (https://github.com/galloween/custom-sidebar-v2/blob/main/dist/custom-sidebar-v2.js#L145).
As a workaround a tried picking up the latest element (e.g. .at(-1)) of window.$customSidebarV2.SideBarElement which works but I'm sure it breaks out other things.
Thanks!

Not working on latest HassOS

Hi, just stumbled across your project and installed it using HACS.

This is my config/configuration.yml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/custom-sidebar-v2/custom-sidebar-v2.js

and this my config/www/sidebar-order.json

{
    "order": [
    {
      "new_item": true,
      "item": "Google",
      "href": "https://mrdoob.com/projects/chromeexperiments/google-gravity/",
      "icon": "mdi:earth",
      "target": "_blank",
      "order": 4
    },
    {
        "item": "media-browser"
        "hide": true
    }
    ],
    "exceptions": [
    {
        "user": ["eltern"],
        "order": [
        {
            "item": "history",
            "hide": true
        }
        ]
    }
    ]
 }

Restarting the server and hard reloading with cache cleaning does not show any results, neither on the main account nor on the user account.
Am I missing some step here or is there any way I could troubleshoot this?

Order not respected in mobile app

This config works perfectly in my desktop browser:

{
  "order": [
    {
      "item": "lovelace",
      "order": 0
    },
    {
      "item": "lovelace-administration",
      "order": 1
    },
    {
      "item": "mobile-view",
      "order": 2
    },
    {
      "item": "shopping-list",
      "order": 3
    },
    {
      "item": "a0d7b954_grafana",
      "order": 4
    },
    {
      "item": "energy",
      "order": 5
    },
    {
      "item": "logbook",
      "order": 6
    },
    {
      "item": "history",
      "order": 7
    },
    {
      "item": "map",
      "order": 8
    },
    {
      "item": "redirect-logs",
      "bottom": true,
      "order": 9
    },
    {
      "item": "redirect-server-controls",
      "bottom": true,
      "order": 10
    },
    {
      "item": "redirect-devices",
      "bottom": true,
      "order": 11
    },
    {
      "item": "hacs",
      "bottom": true,
      "order": 12
    },
    {
      "item": "redirect-addons",
      "bottom": true,
      "order": 13
    },
    {
      "item": "alarmo",
      "bottom": true,
      "order": 14
    },
    {
      "item": "developer-tools",
      "bottom": true,
      "order": 14
    },
    {
      "item": "settings",
      "bottom": true,
      "order": 14
    },
    {
      "item": "media",
      "hide": true
    }
  ]
}

However it is all over the place in the iOS Home Assistant companion app:

I have reset the frontend cache and reloaded but it made no difference.

App Configuration on iOS device

I want to change the order for the App Configuration panel on iOS devices, but "app configuration" is not enough. Do you know what the title for the App Configuration is?

Icons not showing for new_item

I have this configured in my sidebar-order.json

{ "new_item": true, "item": "OpenEVSE", "href": "http://192.168.0.77", "icon:": "mdi:car-electric", "order": 8 }

And it is not showing the icon, I have tried clearing the browser cache, reboot HA, etc and the same.

Also is there a way to have the new_item objects open up in a new browser window?

Update Badges repeat on all custom entries

2022.4.0b0 introduces updates this is also introducing a badge with the number of updates for configuration.

Like below

but with custom sidebar, those updates are showing up on all custom entries and the badge is also offset a little, which is not showing the complete number.

like below

iframe support?

Hi, is it possible to show this is an iframe, in the same way as the iframe panel support from Home Assistant?

{
  "new_item": true,
  "item": "Google",
  "href": "https://mrdoob.com/projects/chromeexperiments/google-gravity/",
  "icon": "mdi:earth",
  "target": "_blank"
},

Admin Exception

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!

Ctrl + f5 makes this custom sidebar not work?

After pressing Ctrl + f5 it removes my custom setting for the side bar and shows the overview, electric, map etc again. Clearing cache and cookies fixes this? I guess this only hides the options but can't be applied again after the clearing of Ctrl + f5?