Adding badges to a sidebar
Some time ago I described how to customize a sidebar - particularly how to add a badge:
Here a badge (a red circle with some number) was shown in an expanded sidebar.
This mod will add it to the minimized sidebar too:
code
card-mod-sidebar-yaml: |
.: |
a[data-panel='lovelace-security'] paper-icon-item {
{% if is_state('input_boolean.test_boolean','off') %}
{% set COLOR = 'var(--theme-security-off)' %}
{% set ICON = 'mdi:shield-off' %}
{% else %}
{% if states('input_number.test_security_number_of_issues')|float(default=0) > 0 %}
{% set COLOR = 'var(--theme-security-issues)' %}
{% set ICON = 'mdi:shield-alert' %}
{% else %}
{% set COLOR = 'var(--theme-security-on)' %}
{% set ICON = 'mdi:shield-check' %}
{% endif %}
{% endif %}
--sidebar-text-color: {{COLOR}};
--sidebar-selected-text-color: {{COLOR}};
--sidebar-selected-icon-color: {{COLOR}};
--sidebar-icon-color: {{COLOR}};
--card-mod-icon: {{ICON}};
}
:host(:not([expanded])) a[data-panel='lovelace-security'] paper-icon-item ha-icon:after {
{% set NUMBER_OF_ISSUES = states('input_number.test_security_number_of_issues')|float(default=0) %}
{% if is_state('input_boolean.test_boolean','on') and NUMBER_OF_ISSUES > 0 %}
content: "{{NUMBER_OF_ISSUES|round(0)}}";
font-size: 0.65em;
font-weight: 400;
left: 26px;
bottom: 14px;
position: absolute;
min-width: 21px;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid var(--sidebar-background-color); /* needed if an icon's color = same as a badge's color */
background-color: var(--theme-security-issues);
line-height: 20px;
text-align: center;
color: var(--text-accent-color, var(--text-primary-color));
{% endif %}
}
a[data-panel='lovelace-security'] paper-icon-item .item-text:after {
{% set NUMBER_OF_ISSUES = states('input_number.test_security_number_of_issues')|float(default=0) %}
{% if is_state('input_boolean.test_boolean','on') and NUMBER_OF_ISSUES > 0 %}
content: "{{NUMBER_OF_ISSUES|round(0)}}";
{% if NUMBER_OF_ISSUES < 10 %}
font-size: 14px;
padding: 0px 6px;
{% elif NUMBER_OF_ISSUES >= 10 and NUMBER_OF_ISSUES < 100 %}
font-size: 11px;
padding: 0px 4px;
{% elif NUMBER_OF_ISSUES >= 100 and NUMBER_OF_ISSUES < 1000 %}
font-size: 8px;
padding: 0px 3px;
{% else %}
font-size: 6px;
padding: 0px 2px;
{% endif %}
font-weight: 400;
left: calc(var(--app-drawer-width,248px) - 42px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
background-color: var(--theme-security-issues);
line-height: 20px;
text-align: center;
color: var(--text-accent-color, var(--text-primary-color));
{% endif %}
}
theme-security-on: rgb(76,175,80)
theme-security-issues: red
theme-security-off: var(--amber-color)