Safari broken with custom-sidebar?

[DJF3]

First of all: I love the custom-sidebar. This is one of these things that makes HA usable. Can't imagine having to go through the HA navigation to access all components (in way too many clicks).

HA: 2025.11.1 Supervisor: 2025.11.4 OS: 15.1 Frontend: 20251105.0 Custom-sidebar: 10.7.1 Safari: 26.1 MacOS: 26.1

Problem:

"Loading Data" and seeing the HA logo on a blank page - not usable

Fix?

Rename /config/www/sidebar-config.yaml to /config/www/AAsidebar-config.yaml

In other words: not using the sidebar. After renaming the sidebar-config.yaml to something else Safari instantly works just like expected. Renaming the sidebar-config file back to its original name and Safari instantly chokes.. I have cleared chaches numerous times and my firewall does not block something that could cause an issue.

Inspector shows:

Any idea what this could be? If you need me to test something, just let me know! 👍

[elchininet]

Hi @DJF3, Could you test in an incognito window?

I have checked my instance in Safari and no issues but let me summon @Mariusthvdb because he is a heavy user using Safari as the main browser, let's see if he is facing any issues.

[Mariusthvdb]

haha, you called sir? ;-)

no, I have no errors in Inspector. in any browser for that matter

maybe a wrong config inside that configuration file?

btw, I am on a different OS, 16.3

[elchininet]

maybe a wrong config inside that configuration file?

I could be. @DJF3 could you post your config?

[DJF3]

Interesting. The thing I had not thought of yet was the config itself 😄 . It feels like this has something to do with the updates partial

partials:
  updates: 'const updates = Object.values(states.update).filter((update) => update.state === "on").length;'

and where it is displayed in a new_item.

  - new_item: true
    item: SETTINGS
    match: href
    href: "/config/dashboard"
    icon: mdi:update
    bottom: true
    notification: >
      [[[
        @partial updates
        return updates || '';
      ]]]

So far I have not been able to 100% reproduce. Will do that in the next hours or days. sidebar-config.yaml:

title: " "
subtitle: " "
sidebar_editable: true
hide_all: true
partials:
  updates: 'const updates = Object.values(states.update).filter((update) => update.state === "on").length;'
sidebar_background: "#292929"
analytics: false

order:
  - new_item: true
    item: home
    name: HOME
    match: href
    href: "/lovelace/mobile"
    icon: mdi:home
  # - new_item: true
  #   item: dash-cabin
  #   name: Cabin
  #   match: href
  #   href: "/dash-cabin"
  #   icon: mdi:home
  - new_item: true
    item: _________LOGS
    # match: data-panel
    match: href
    href: "/config/logs"
    icon: mdi:math-log
    # NORMAL
    item_background: "#3d1e1c"
    text_color: white
    icon_color: white
    # SELECTED
    selection_background: "#a40c10"
    #8f4842"
    text_color_selected: yellow
    icon_color_selected: white
    selection_opacity: 1
  - new_item: true
    item: EDITOR__
    match: href
    # href: "/hassio/ingress/a0d7b954_vscode"
    href: "/hassio/ingress/core_configurator"
    icon: mdi:lead-pencil
    text_color_selected: yellow
    icon_color_selected: white
  - new_item: true
    item: AUTOMATIONS
    match: href
    href: "/config/automation/dashboard"
    icon: mdi:robot-happy
    # NORMAL
    item_background: "#253570"
    # SELECTED
    selection_background: "#616ea4"
    text_color_selected: yellow
    icon_color_selected: white
    selection_opacity: 1
  - new_item: true
    item: SCRIPTS
    match: href
    href: "/config/script/dashboard"
    icon: mdi:robot-happy
    # NORMAL
    item_background: "#253570"
    # SELECTED
    selection_background: "#616ea4"
    text_color_selected: yellow
    icon_color_selected: white
    selection_opacity: 1
  - new_item: true
    item: DEVICES
    match: href
    href: "/config/devices/dashboard"
    icon: mdi:alpha-d
    # NORMAL
    item_background: "#173935"
    # SELECTED
    selection_background: "#2e766f"
    text_color_selected: yellow
    icon_color_selected: yellow
    selection_opacity: 1
  - new_item: true
    item: ENTITIES
    match: href
    href: "/config/entities/dashboard"
    icon: mdi:alpha-e
    # NORMAL
    item_background: "#173935"
    # SELECTED
    selection_background: "#2e766f"
    text_color_selected: yellow
    icon_color_selected: yellow
    selection_opacity: 1
  - new_item: true
    item: TODO
    match: href
    href: "/todo"
    icon: mdi:format-list-checks
    text_color_selected: yellow
    icon_color_selected: yellow
  - new_item: true
    item: Zigbee2MQTT
    match: href
    href: "/hassio/ingress/45df7312_zigbee2mqtt"
    icon: mdi:zigbee
    item_background: "#463513"
    text_color: white
    icon_color: black
    selection_background: "#fec038"
    text_color_selected: black
    icon_color_selected: red
    selection_opacity: 1
  - new_item: true
    item: Powercalc
    match: href
    href: "/config/integrations/integration/powercalc"
    icon: mdi:alpha-p
    text_color_selected: yellow
    icon_color_selected: yellow
    text_color: cyan
    icon_color: cyan
  - new_item: true
    item: MQTT
    match: href
    href: "/config/integrations/integration/mqtt"
    icon: mdi:alpha-m
    text_color_selected: yellow
    icon_color_selected: yellow
    text_color: cyan
    icon_color: cyan



  #__________ BOTTOM
  - new_item: true
    item: Developer Tools
    match: href
    href: "/developer-tools/yaml"
    icon: mdi:hammer
    # NORMAL
    item_background: "#292929"
    text_color: yellow
    icon_color: white
    # SELECTED
    selection_background: "#555555d9"
    text_color_selected: yellow
    icon_color_selected: yellow
    selection_opacity: 1
    bottom: true
  - new_item: true
    item: HACS
    match: href
    href: "/hacs/dashboard"
    icon: mdi:store-outline
    text_color_selected: yellow
    icon_color_selected: yellow
    bottom: true
  - new_item: true
    item: INTEGRATIONS
    match: href
    href: "/config/integrations/dashboard"
    icon: mdi:puzzle-outline
    text_color_selected: yellow
    icon_color_selected: yellow
    bottom: true
  - new_item: true
    item: SETTINGS
    match: href
    href: "/config/dashboard"
    icon: mdi:update
    bottom: true
    notification: >
      [[[
        @partial updates
        return updates || '';
      ]]]
    # NORMAL
    item_background: "#292929"
    text_color: yellow
    icon_color: white
    # SELECTED
    selection_background: "#555555d9"
    text_color_selected: yellow
    icon_color_selected: yellow
    selection_opacity: 1
  - new_item: true
    item: Add-ons
    match: href
    href: "/hassio/dashboard"
    icon: mdi:power-plug
    bottom: true
    text_color_selected: yellow
    icon_color_selected: yellow

[elchininet]

It should not be that code because I also have it and it works on Safari. Another thing that is weird is that this is JavaScript, it can throw an error in the console, cannot not work, can mess the sidebar items visibility but it should not break your instance in any way.

[elchininet]

@DJF3 when you have time to debug this, check this element in the developer console of your browser in the screen that you get the issue (partial-panel-resolver):

Select the item, go to the console tab, write this code and press Enter:

$0.route

Let me know your result.

[elchininet]

Hi @DJF3, Did you have time to debug the issue?

[elchininet]

Hi @DJF3, It seems that you already resolved your issue or it doesn't bother you anymore. If that is not the case, please, open a new issue. Closing this one.

[DJF3]

Apologies for the delay @elchininet Circumstances prevented me from doing extensive testing plus it somehow seem to stop happening? (like a doctors visit: "suddenly my shoulder does not hurt anymore?")

I do appreciate the support and will keep an eye out in case the problem re-occurs.

[elchininet]

Perfect @DJF3, Feel free to open a new one if it comes back :) Regards