elchininet / custom-sidebar

Custom HACS plugin that allows you to personalise the Home Assistant's sidebar per user or device basis
Apache License 2.0
60 stars 4 forks source link

5.0 example and up to date documentation? #141

Closed rwzdoorn closed 1 month ago

rwzdoorn commented 1 month ago

First off; thanks for reviving this add-on!

I'm trying (and struggling) to get the custom sidebar up and running with version +5.0.

I have this in my sidebar-config.yaml:

sidebar:
  - title: Overview
    icon: mdi:view-dashboard
    path: /lovelace/overview

  - title: Energy
    icon: mdi:flash
    path: /lovelace/energy

  - title: HACS
    icon: mdi:package-variant-closed
    path: /hacs/entry

  - title: Integrations
    icon: mdi:puzzle-outline
    path: /config/integrations

  - title: Entities
    icon: mdi:shape
    path: /config/entities

  - title: Automations
    icon: mdi:robot
    path: /config/automation

  - title: Terminal
    icon: mdi:console
    path: /hassio/ingress/core_terminal

  - title: Studio Code Server
    icon: mdi:code-braces
    path: /hassio/ingress/a0d7b954_vscode    

  # Items to be placed at the bottom of the sidebar
  - title: Developer Tools
    icon: mdi:tools
    path: /developer-tools
    bottom: true

  - title: Settings
    icon: mdi:cog
    path: /config
    bottom: true

For some reason the Integrations, Entities and Automations are not shown.

Is it possible to update the documentation and example(s)?

elchininet commented 1 month ago

Hi @rwzdoorn, That is not a valid configuration. It would be good that you download the example provided in the documentation and start over it.

Things that I am seeing that are not right:

  1. The sidebar items should be inside order not inside sidebar
  2. As it is mentioned in the Configuration Notes: All items in config.order should have a unique item property
  3. path is not a valid property for an order item
  4. title is not a valid property for an order item

Regards

elchininet commented 1 month ago

Hi @rwzdoorn, Let me know if you still need some help setting up the plugin. Regards

rwzdoorn commented 1 month ago

Ok, I didn't do my job properly I guess. I checked out the sidebar-config.yaml and it works like a charm (ofcource).

I do have a question. I have this:

order:
  - item: overview
    order: 1
  - new_item: true
    item: Automations
    href: "/config/automation"
    icon: mdi:robot
    order: 2
  - new_item: true
    item: Integrations
    href: "/config/integrations"
    icon: mdi:puzzle
    order: 3
  - new_item: true
    item: Entities
    href: "/config/entities"
    icon: mdi:hexagon-multiple
    order: 4
  - item: terminal
    order: 6
    bottom: true
  - item: hacs
    order: 7
  - item: config # Add this block to include Settings
    order: 8
    bottom: true
  - item: developer tools
    name: Dev tools
    icon: mdi:tools
    bottom: true
    order: 10

For some reason my config Is not going to the bottom of the panel (between hats & dev tools.

ps; keep up the good work and thanks for replying quickly!

elchininet commented 1 month ago

@rwzdoorn,

Ok, I didn't do my job properly I guess. I checked out the sidebar-config.yaml and it works like a charm (ofcource).

Glad to hear that you have solved it 👍

For some reason my config Is not going to the bottom of the panel (between hats & dev tools.

Most probably it is not matching the item (you can check if there is any warning in the console of your browser dev tools). But if it is that, it should be visible, could you make a screenshot of your sidebar?

rwzdoorn commented 1 month ago

Hi,

This is currently my sidebar:

Screenshot 2024-09-13 at 18 44 12

I want to move the settings at the bottom. Also, how do I press the Studio Code Server at the bottom?

elchininet commented 1 month ago

That is the issue, you are trying to match an item called config by its text and there is no any item with the text config.

You can either match by data-panel:

order:
 ...

 - item: config
   match: data-panel
   order: 8
   bottom: true

Or to match by text:

order:
 ...

 - item: settings
   order: 8
   bottom: true

For the Studio Code Server the easiest way is to match it by text:

order:
 ...

 - item: studio code
   order: 9
   bottom: true
rwzdoorn commented 1 month ago

You sir, are briljant. This fixed the issue!