joseluis9595/lovelace-navbar-card v0.3.0

NavBar card v0.3.0

on GitHub

Javascript templates

With this new release of navbar-card, some fields just got easier to customize! I've added support for custom Javascript templates in the following properties:

• desktop → hidden
• mobile → hidden
• route → label
• route → hidden
• route → badge → show

For all these properties, you can either provide the previous supported value, or wrap the value in [[[ and ]]] to write your own custom Javascript logic.

You can now, for example, display a route for only one user:

type: custom:navbar-card
....
routes:
  ...
  - url: /lovelace/devices
    label: Devices
    icon: mdi:devices
    hidden: |
      [[[ return user.name != "jose"; ]]] 

Or change the label of a route to any value you want. In this example, showing all the lights that are on:

type: custom:navbar-card
....
routes:
  ...
  - url: /lovelace/lights
    label: |
      [[[ 
        const lightsOn = Object.entries(states)
          .filter(([entityId, value]) => {
            return entityId.startsWith('light.') && value.state == 'on';
          })
          .length;
        return `Lights (${lightsOn})` 
      ]]]
    icon: mdi:lightbulb-outline
    icon_selected: mdi:lightbulb

For more detailed information, check the JSTemplates section

Visibility options

As some of you may have noticed in the previous section, we can now configure the visibility of each route individually, via the hidden property. This change standardises the visibility option for most navbar-card items, using either a boolean value or a Javascript Template.

⚠️⚠️ Deprecated properties

In this new release, the property to configure when to display a badge, previously named template, has been deprecated in favor of show, now supporting either boolean value or Javascript Templates.

This aims to, once again, standardise the visibility configurations across navbar-card.

All changes in this release

Features

• New hidden prop for each route configuration
• Add support for JSTemplates

Fixes

• Fixed issue of navbar-card not being centered on desktop devices, when the HA's sidebar was open. By SneakieGargamel fixing #17. Thank you so much!

Full Changelog: v0.2.0...v0.3.0