Skip to content

Releases: elchininet/custom-sidebar

v8.6.2

05 Feb 01:22
@github-actions github-actions
v8.6.2
86f32f3
Compare
Choose a tag to compare
v8.6.2 Latest
Latest

🛠 Fixes

Contributors

elchininet
Assets 5
Loading

v8.6.1

04 Feb 02:50
@github-actions github-actions
v8.6.1
a901b68
Compare
Choose a tag to compare
v8.6.1

🛠 Fixes

  • Fix a bug related to javascript actions and partials

🧩 Dependencies

  • [Dependencies]: Bump the dependencies-dev group with 4 updates

Contributors

elchininet and dependabot
Assets 5
Loading

v8.6.0

02 Feb 01:50
@github-actions github-actions
v8.6.0
7cd8297
Compare
Choose a tag to compare
v8.6.0

This minor release implements a new order-item property that will add custom attributes to a sidebar item.

Order Items Properties

Property Type Required Description
attributes String or Object no If it is an object it defines a group of attributes
that will be applied to the sidebar item.
If it is a string, then it makes reference
to an object defined in js_variables

Attributes as an object

order:
  - item: 'settings'
    attributes:
      data-my-prop: 'some-prop'
      data-test: 'test-attribute'

Attributes as a string (they make reference to a variable in js_variables)

js_variables:
  my_attributes:
    data-my-prop: 'some-prop'
    data-test: 'test-attribute'
order:
  - item: 'settings'
    attributes: 'my_attributes'

🚀 Features

🧩 Dependencies

📝 Documentation

Contributors

elchininet
Assets 5
Loading

v8.5.2

29 Jan 22:21
@github-actions github-actions
v8.5.2
e50d3af
Compare
Choose a tag to compare
v8.5.2

🚀 Features

🛠 Fixes

  • Change the documentation path in the plugin checker module

📝 Documentation

Contributors

elchininet
Assets 5
Loading

v8.5.1

27 Jan 20:41
@github-actions github-actions
v8.5.1
7023185
Compare
Choose a tag to compare
v8.5.1

🧩 Dependencies

  • [Dependencies]: Bump the dependencies-dev group with 5 updates

📝 Documentation

📦 Other

Contributors

elchininet and dependabot
Assets 5
Loading

v8.5.0

24 Jan 22:40
@github-actions github-actions
v8.5.0
e79f210
Compare
Choose a tag to compare
v8.5.0

This minor release adds two new options in the order items.

Order Items Properties

Property Type Required Description
divider Boolean no Adds a divider line below the item
divider_color* String no Sets the color of the divider line below the item (it overrides the root divider_color option)

* These options allow JavaScript or Jinja templates.

🚀 Features

  • Add "divider" and "divider_color" to order item options

📝 Documentation

Contributors

elchininet
Assets 5
Loading

v8.4.1

19 Jan 20:06
@github-actions github-actions
v8.4.1
f40e85e
Compare
Choose a tag to compare
v8.4.1

🛠 Fixes

  • fix a bug related to reactive variables declaration

🧩 Dependencies

  • [Dependencies]: Bump the dependencies-dev group across 1 directory with 3 updates

Contributors

elchininet and dependabot
Assets 5
Loading

v8.4.0

18 Jan 20:59
@github-actions github-actions
v8.4.0
f658990
Compare
Choose a tag to compare
v8.4.0

This minor release brings some new features related to a new property in sidebar order items and possibility to work with reactive JavaScript variables.

Added a new property in order items

This release adds a new feature to make it possible to execute actions when clicking on sidebar items. With custom-sidebar it is possible to add an href property to each sidebar item making them redirect to an internal dashboard or to an external URL. From now on, it is also possible to execute certain actions when clicking on sidebar items. These actions can be executed at the same time that you are navigating to a dashboard or an external URL or can be exclusively executed if one omits the href property on new items or change it to # in existing ones.

Order items properties

Property Type Required Description
on_click OnClickAction no Specifies the onClick property of the sidebar item.
It allows two types of actions, ServiceCallAction
or JavaScriptAction. Take into account that setting this property
will not stop the href option for working. If you want to avoid
navigating to a page, you should set the href option
as # (in new items you can just omit it)
Service call actions

This action allows you to call a service clicking on an item of the sidebar

order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: call-service
      service: light.toggle
      data:
        entity_id: light.woonkamer
JavaScript actions

This action allows you to execute a JavaScript code (you don't need to wrap the code block between three square brackets)

order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: javascript
      code: |
        location.reload();

Use reactive variables in the templates

With this release, after the update of the home-assistant-javascript-templates package, it is also possible to make use of reactive variables in JavaScript templates. This will make your templates be reactive to variables only in the device in which you are working. For example, let's show or hide an item of the sidebar clicking on another item:

order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: javascript
      code: |
        const hide = ref('hide');
        hide.value = !hide.value;
  - item: history
    hide: |
      [[[
         const hide = ref('hide');
         if (hide.value === undefined) {
           hide.value = true;
         }
         return hide.value;
      ]]]

Reactive variables can also be declared in the js_variables property giving them an initial value. Let's refactor the previous code to declare the reactive variable hide in the js_variables property giving it an initial value there instead of giving the initial value in the item hide template:

js_variables:
  hide: ref(true)
order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: javascript
      code: |
        const hide = ref('hide');
        hide.value = !hide.value;
  - item: history
    hide: |
      [[[ ref('hide').value ]]]

IMPORTANT

  1. To make the templates detect that a reactive variable has been mutated, one needs to assign a new value to the reactive variable. For example, changing the items or an array using push or pop will not make the remplates using that variable to be reevaluated. You need to assign a new array to the value of the reactive variable to make the change been detected.
  2. To make the template aware that it contains a reactive variable, the value property of the variable should be accesed when the template is rendered. If the code accesing the value property is not executed when the template renders, then the reactive variable will not be tracked. That is why is recomendable to access the value property of the reactive variable outside any condition and build the logic using the retrieved value. In this way the template will track that the reactive variable is being used and any time that the variable changes, the template will get re-evaluated.

🚀 Features

  • Add an option to execute actions when clicking on sidebar items

🧩 Dependencies

  • Update home-assistant-javascript-templates package

📝 Documentation

  • Add an option to execute actions when clicking on sidebar items

📦 Other

Contributors

elchininet
Assets 5
Loading

v8.3.0

14 Jan 01:03
@github-actions github-actions
v8.3.0
0b79ee8
Compare
Choose a tag to compare
v8.3.0

This minor release adds a new option to set the default URL path that should be redirected to when the page loads.

Configuration options

Property Type Required Description
default_path String no Defines the default URL path when the page loads. This path must start with /

IMPORTANT

The default_path option will change the default behaviour and every time that the page loads it will navigate to this path (either when the page loads for the first time or when it gets refreshed). If you don't want to have this behaviour and you would prefer to load Home Assistant in an specific path or refresh a specific page without being redirected to the default_path, then you should not set this option.

🚀 Features

  • Implement and option to set the default URL path on load

🧩 Dependencies

  • [Dependencies]: Bump typescript-eslint from 8.18.1 to 8.18.2 in the dependencies-dev group
  • [Dependencies]: Bump the dependencies-dev group with 2 updates
  • [Dependencies]: Bump the dependencies-dev group with 4 updates

📝 Documentation

Contributors

elchininet and dependabot
Assets 5
Loading

v8.2.0

23 Dec 21:49
@github-actions github-actions
v8.2.0
87915d7
Compare
Choose a tag to compare
v8.2.0

This release refactors the library to make it possible to set a template in the hide option of an item.

Order items properties

Property Type Required Description
hide* Boolean or String no Setting this property to true will hide the sidebar item
and if the property hide_all from the main configuration is true,
setting this property as false will avoid hiding this item

Tip

* These item properties allow JavaScript or Jinja templates.

🚀 Features

  • Make the "hide" option being configured also as a template

🧩 Dependencies

  • [Dependencies]: Bump the dependencies-dev group with 6 updates

📝 Documentation

  • Make the "hide" option being configured also as a template

Contributors

elchininet and dependabot
Assets 5
Loading