I was playing with sidebar for a little bit, an here is what i got so far:
sidebar:
active: true
bottomcard: true
width:
mobile: 0
tablet: 20
desktop: 25
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
template: |
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}, {{user}}.
Today is {{now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix = ['st',
'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day // 10 == 1
or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
Temperature {{states('sensor.openweathermap_temperature') | int }}°C
{{states('sensor.openweathermap_condition') }}.
</li>
style: |
:host {
--sidebar-background: transparent;
--sidebar-text-color: white;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
--sidebar-icon-color: darkorange;
--divider-color: white;
}
.title h1{
text-align: center;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
digitalClock: false
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: false
dateFormat: dddd DD MMM
clock: false
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: custom:text-divider-row
text: '-'
text-divider-color: white
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Main Page
secondary: ''
icon: ios:house
icon_color: teal
fill_container: true
tap_action:
actio: navigate
navigation_path: main-page
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem;
#width:15px !important;
}
- type: custom:mushroom-template-card
primary: First Floor
secondary: '{{ states(''light.first_floor_lights'') }}'
tap_action:
action: navigate
navigation_path: first-floor
icon: mdi:home-floor-1
icon_color: >-
{%if is_state('light.first_floor_lights', 'off') %} teal {% else
%} amber {% endif %}
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
width: 50px !impotant;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'First Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Living Room', 'Kitchen', 'Hallway','Kids Room','Garage','Outside', 'My Bathroom'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: custom:mushroom-template-card
primary: Second Floor
secondary: '{{ states(''light.second_floor_lights'') }}'
tap_action:
action: navigate
navigation_path: second-floor
icon: mdi:home-floor-2
icon_color: >-
{%if is_state('light.second_floor_lights', 'off') %} teal {%
else %} amber {% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Second Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Upstairs', 'Master Bedroom', 'Sonia Room','Artem Room'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: custom:mushroom-template-card
primary: Basement
secondary: '{{ states(''light.basement_lights_all'') }}'
tap_action:
action: navigate
navigation_path: basement
icon: mdi:home-floor-b
icon_color: >-
{%if is_state('light.basement_lights_all', 'off') %} teal {%
else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
} ha-card:after {content: " {{ states.light and states.switch
| selectattr('state','eq', 'on')
| rejectattr('name', 'search', 'Basement')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Basement', 'Basement Restroom', 'Utility'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''light.outside_lights'') }}'
tap_action:
action: navigate
navigation_path: outside
icon: phu:outside
icon_color: >-
{%if is_state('light.outside_lights', 'off') %} teal {% else %}
amber {% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Outside')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Outside'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.yevgeniy
name: Yevgeniy
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-person-card
entity: person.irina
name: Iina
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-person-card
entity: device_tracker.life360_sonia
name: Sonia
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-person-card
entity: device_tracker.life360_boris_bolembakh
name: Papa
icon_type: entity-picture
fill_container: true
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: family
icon: mdi:family-tree
icon_color: primary
- type: action
tap_action:
action: navigate
navigation_path: weather
icon: mdi:weather-hazy
icon_color: primary
- type: action
icon_color: primary
tap_action:
action: navigate
navigation_path: ha-info
icon: mdi:memory
alignment: center
