Hide or show sidebar items dynamically

Since some time already, it is possible to add templates to the hide property of the order items. This means that it is possible to show or hide items when the state of an entity changes.

We can have an input_boolean that when it is on off some items of the sidebar remain hidden and when we switch it on, then they get visible. Check the next examples using JavaScript and Jinja templates:

hide

Using JavaScript templates

YAML

<config directory>/www/sidebar-config.yaml

js_variables:
  admin_boolean: 'input_boolean.show_admin_sidebar_items'
partials:
  admin_active: |
    const adminActive = is_state(admin_boolean, 'on');
    return adminActive;
order:
  - item: developer tools
    hide: '[[[ @partial admin_active ]]]'
  - item: studio code server
    hide: '[[[ @partial admin_active ]]]'
  - item: settings
    hide: '[[[ @partial admin_active ]]]'

JSON

<config directory>/www/sidebar-config.json

{
  "js_variables": {
    "admin_boolean": "input_boolean.show_admin_sidebar_items"
  },
  "partials": {
    "admin_active": "return is_state(admin_boolean, 'on')"
  },
  "order": [
    {
      "item": "developer tools",
      "hide": "[[[ @partial admin_active ]]]"
    },
    {
      "item": "studio code server",
      "hide": "[[[ @partial admin_active ]]]"
    },
    {
      "item": "settings",
      "hide": "[[[ @partial admin_active ]]]"
    }
  ]
}

Using Jinja templates

YAML

<config directory>/www/sidebar-config.yaml

jinja_variables:
  admin_boolean: 'input_boolean.show_admin_sidebar_items'
partials:
  admin_active: '{{ is_state(admin_boolean, "on") }}'
order:
  - item: developer tools
    hide: '{{ @partial admin_active }}'
  - item: studio code server
    hide: '{{ @partial admin_active }}'
  - item: settings
    hide: '{{ @partial admin_active }}'

JSON

<config directory>/www/sidebar-config.json

{
  "jinja_variables": {
    "admin_boolean": "input_boolean.show_admin_sidebar_items"
  },
  "partials": {
    "admin_active": "{{ is_state(admin_boolean, 'on') }}"
  },
  "order": [
    {
      "item": "developer tools",
      "hide": "{{ @partial admin_active }}"
    },
    {
      "item": "studio code server",
      "hide": "{{ @partial admin_active }}"
    },
    {
      "item": "settings",
      "hide": "{{ @partial admin_active }}"
    }
  ]
}