Home Assistant Sidebar Access Management

sidebarmanagement.js

/*
Use the format "panel-name" (from URL), and a list of user names
In this example if the username "hidden" does not exist, no one will see these entries.
All entries not in the UserAccess list are not modified.
NB!: This will only hide the sidebar entry, if the user have the direct URL to the panel they still will be able to see it.
Place it as /www/sidebarmanager.js
And include it in configuration.yaml like this:
frontend:
  extra_module_url:
    - /local/sidebarmanager.js
*/

customElements.whenDefined('hui-root').then(() => {
    let hass = document.querySelector("home-assistant").hass
    let entries = document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout").querySelector("app-drawer").querySelector("ha-sidebar").shadowRoot.querySelectorAll("a")

    let UserAccess = {
        "lovelace": ["hidden"],
        "map": ["hidden"],
        "history": ["hidden"],
        "logbook": ["hidden"],
    }
    for (let child of entries) {
        const panel = child.dataset.panel
        if (UserAccess[panel]) {
            if (!UserAccess[panel].includes(hass.user.name)) {
                child.style.display = "none"
            }
        }
    }
})