`bottom: true` flag doesn't seem to work on most items about custom-sidebar

[elchininet]

@akshay7394,

I don‘t know if this is the reason, but change this:

notification: '[[[ state_attr("sensor.hacs", "repositories").length || '' ]]]'

Tho this:

notification: '[[[ state_attr("sensor.hacs", "repositories").length || "" ]]]'

This is an error in the example config, the quotes should be double.

[akshay7394]

@akshay7394,

I don‘t know if this is the reason, but change this:

notification: '[[[ state_attr("sensor.hacs", "repositories").length || '' ]]]'

Tho this:

notification: '[[[ state_attr("sensor.hacs", "repositories").length || "" ]]]'

This is an error in the example config, the quotes should be double.

That was it! Everything moved to the expected places after this change. Thanks a lot 😁

[elchininet]

Hi @akshay7394,

In your screenshot I don't see any item named "developer-tools" (neither an item named "config") but you are tyrying to match those items with those names using the name matcher (the default one). You should have warnings in your console warning you about that.

You should either change the item property to something that matches (like developer and settings) or specify in the matcher property that you are trying to match by data-panel.

Regards

[akshay7394]

Ah, got it! My mistake. I've done that now, but my problem persists - though developer and settings moved a bit after I made the changes you mentioned. Now it looks like this:

[elchininet]

Hi @akshay7394,
You didn't paste what was your final configuration to check what were your changes.
And also, did you check your console for warning/errors?
Regards

[akshay7394]

Sorry, my bad. Here's the config as it is now:

sidebar_editable: false
order:
  - item: overview
    order: 1
  - item: todo
    order: 2
  - item: energy
    order: 3
  - item: settings
    order: 4
  - item: developer
    order: 5
    hide: true
  - item: history
    hide: true
  - item: snapshots
    hide: true
  - item: backups
    hide: true
  - item: map
    hide: true
  - item: media
    hide: true
  - item: calendar
    hide: true
  - item: logbook
    hide: true
exceptions:
  - user:
      - Akshay
      - akshay
    order:
      - item: overview
        order: 1
      - item: todo
        order: 3
      - new_item: true
        item: Overseerr
        icon: mdi:play-network
        href: http://192.168.1.115:5055/
        order: 2
      - item: backups
        order: 4
      - new_item: true
        item: Integrations
        href: "/config/integrations"
        icon: mdi:puzzle
        order: 5
      - new_item: true
        item: Automations
        href: "/config/automations"
        icon: mdi:robot
        order: 6
      - item: df2164f9_ps5_mqtt
        hide: true
      - item: developer
        order: 10
        # hide: true
        bottom: true
      - item: settings
        order: 9
        bottom: true
      - item: hacs
        order: 7
        notification: '[[[ state_attr("sensor.hacs", "repositories").length || '' ]]]'
        bottom: true
      - item: energy
        order: 8
      - item: history
        hide: true
      - item: snapshots
        hide: true
      - item: map
        hide: true
      - item: media
        hide: true
      - item: calendar
        hide: true
      - item: logbook
        hide: true

I'm not able to find it in the errors - but i could just be looking for it in the wrong place/with the wrong words. What should I look for? I searched for 'sidebar' 'develop' 'config' but none of them appeared in the logs.

[elchininet]

You should check in your browser console dev tools. If you are using Chrome right click on the screen and select Inspect, then go to Console. Let me know if there is any warning/error there.
Regards

[akshay7394]

Ah, got it! Totally my error, was looking in home assistant logs instead of in the browser console. I've removed/fixed the ones that were throwing warnings in the console. But now it still looks like this:

In the console, I see this info related to custom-sidebar (none of the yellow warnings that were there before i fixed todo etc):

GET http://homeassistant.local:8123/local/custom-sidebar-yaml.js?v1.0.0 net::ERR_ABORTED 404 (Not Found)
(anonymous) @ home:1
home:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://homeassistant.local:8123/local/custom-sidebar-yaml.js?v1.0.0
custom-sidebar-yaml.js?v1.0.0:1 ≡ CUSTOM-SIDEBAR (YAML)v4.5.1
VM881:3 Uncaught (in promise) SyntaxError: Invalid or unexpected token
    at new Function (<anonymous>)
    at e.renderTemplate (custom-sidebar-yaml.js?v1.0.0:1:22800)
    at o (custom-sidebar-yaml.js?v1.0.0:1:73861)
    at i._createJsTemplateSubscription (custom-sidebar-yaml.js?v1.0.0:1:74332)
    at i._subscribeTemplate (custom-sidebar-yaml.js?v1.0.0:1:73602)
    at i._subscribeNotification (custom-sidebar-yaml.js?v1.0.0:1:73329)
    at custom-sidebar-yaml.js?v1.0.0:1:80522
    at Array.forEach (<anonymous>)
    at custom-sidebar-yaml.js?v1.0.0:1:80140

And this is my current YAML after fixing the ones causing the yellow warning:

sidebar_editable: false
order:
  - item: overview
    order: 1
  - item: todo
    match: data-panel
    order: 2
  - item: energy
    order: 3
  - item: settings
    order: 4
  - item: developer
    order: 5
    hide: true
  - item: history
    hide: true
  - item: map
    hide: true
  - item: media
    hide: true
  - item: calendar
    hide: true
  - item: logbook
    hide: true
exceptions:
  - user:
      - Akshay
      - akshay
    order:
      - item: overview
        order: 1
      - item: todo
        match: data-panel
        order: 3
      - new_item: true
        item: Overseerr
        icon: mdi:play-network
        href: http://192.168.1.115:5055/
        order: 2
      - new_item: true
        item: Integrations
        href: "/config/integrations"
        icon: mdi:puzzle
        order: 5
      - new_item: true
        item: Automations
        href: "/config/automations"
        icon: mdi:robot
        order: 6
      - item: developer
        order: 10
        # hide: true
        bottom: true
      - item: settings
        order: 9
        bottom: true
      - item: hacs
        order: 7
        notification: '[[[ state_attr("sensor.hacs", "repositories").length || '' ]]]'
        bottom: true
      - item: energy
        order: 8
      - item: history
        hide: true
      - item: map
        hide: true
      - item: media
        hide: true
      - item: calendar
        hide: true
      - item: logbook
        hide: true

[elchininet]

Hi @akshay7394,

There are some issues in your logs that we need to check:

GET http://homeassistant.local:8123/local/custom-sidebar-yaml.js?v1.0.0 net::ERR_ABORTED 404 (Not Found)
home:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://homeassistant.local:8123/local/custom-sidebar-yaml.js?v1.0.0
custom-sidebar-yaml.js?v1.0.0:1

This is weird, it is trying to load the bundle directly from the www folder and with ?v1.0.0 at the end so it seems that this was something that you added somewhere. That should not be there because after this the component is loaded correctly and it shows in the log its version.

Could you tell me how did you install the plugin, if you are in storage mode or yaml mode and if you have Browser Mod installed?

VM881:3 Uncaught (in promise) SyntaxError: Invalid or unexpected token
    at new Function (<anonymous>)
    at e.renderTemplate (custom-sidebar-yaml.js?v1.0.0:1:22800)
    at o (custom-sidebar-yaml.js?v1.0.0:1:73861)
    at i._createJsTemplateSubscription (custom-sidebar-yaml.js?v1.0.0:1:74332)
    at i._subscribeTemplate (custom-sidebar-yaml.js?v1.0.0:1:73602)
    at i._subscribeNotification (custom-sidebar-yaml.js?v1.0.0:1:73329)
    at custom-sidebar-yaml.js?v1.0.0:1:80522
    at Array.forEach (<anonymous>)
    at custom-sidebar-yaml.js?v1.0.0:1:80140

This is an error from the code trying to render the template. For this I need to install the YAML version and submit a configuration similar to yours to see if I can spot what is happening there.

Recommendation: do not start from the most advanced set up. Start with a simple set up, hide an item, then hide another item, the best test is to change the name of an item so in that way you know if it is being matched or not. If that works, then create an override with just one item and start over again. If there is an issue you will be able to identify exactly in which place it is, in this moment it is hard to spot it. If you create a complex config since the beginning, it is very hard to know what could be failing.

[akshay7394]

This is weird, it is trying to load the bundle directly from the www folder and with ?v1.0.0 at the end so it seems that this was something that you added somewhere. That should not be there.

Could it be because of my resources? I had previously tried to add it here instead of in config.yaml (before I realised I had misunderstood instructions)

Could you tell me how did you install the plugin, if you are in storage mode or yaml mode and if you have Browser Mod installed?

I've installed via hacs and added the sidebar config yaml version to the www folder.

VM881:3 Uncaught (in promise) SyntaxError: Invalid or unexpected token
    at new Function (<anonymous>)
    at e.renderTemplate (custom-sidebar-yaml.js?v1.0.0:1:22800)
    at o (custom-sidebar-yaml.js?v1.0.0:1:73861)
    at i._createJsTemplateSubscription (custom-sidebar-yaml.js?v1.0.0:1:74332)
    at i._subscribeTemplate (custom-sidebar-yaml.js?v1.0.0:1:73602)
    at i._subscribeNotification (custom-sidebar-yaml.js?v1.0.0:1:73329)
    at custom-sidebar-yaml.js?v1.0.0:1:80522
    at Array.forEach (<anonymous>)
    at custom-sidebar-yaml.js?v1.0.0:1:80140

This is an error from the code trying to render the template. For this I need to install the YAML version and submit a configuration similar to yours to see if I can spot what is happening there.

Recommendation: do not start from the most advanced set up. Start with a simple set up, hide an item, then hide another item, the best test is to change the name of an item so in that way you know if it is being matched or not. If that works, then create an override with just one item and start over again. If there is an issue you will be able to identify exactly in which place it is, in this moment it is hard to spot it. If you create a complex config since the beginning, it is very hard to know what could be failing.

Alright, I'll retry from scratch. Had started with just config and overview first, expanded from there because it was doing what I wanted aside from the behaviour of pinning to the bottom so I thought that was my only issue.

[elchininet]

Could it be because of my resources? I had previously tried to add it here instead of in config.yaml (before I realised I had misunderstood instructions)

Yes, remove the first one, the component is being loaded by HACS below.

I've installed via hacs and added the sidebar config yaml version to the www folder.

And are you in the default mode or in yaml mode?

Alright, I'll retry from scratch. Had started with just config and overview first, expanded from there because it was doing what I wanted aside from the behaviour of pinning to the bottom so I thought that was my only issue.

Perfect, let me know if you find something. I‘ll try to reproduce your set up later.

[elchininet]

Perfect, good to know. I‘ll fix those typos in the example config and the documentation.
Regards 👍🏼