Hi,
I just took a screenshot and cut the left bar 
But I have a ‘hide sidebard’ switch in the upper right corner in order to hide tekst, and only keep icons.
As requested, please find below the code:
theme: HA Default
title: Home
icon: mdi:home-assistant
path: home
visible:
- user: xxx
- user: xxx
type: custom:grid-layout
layout:
grid-template-columns: 0em 74px 32% 30% 30% auto
grid-template-rows: grid-title-row-height auto auto auto
grid-gap: 0.2em
grid-template-areas: |
". . title title2 people ."
". nav column1 center1 column2 ."
". nav column1 center1 column2 ."
mediaquery:
"(max-width: 400px)":
grid-template-columns: 3% 94% 3%
grid-template-rows: auto
grid-gap: 0em
grid-template-areas: |
". title ."
". title2 ."
". people ."
". left1 ."
". center1 ."
". right1 ."
". line2 line2 line2 ."
"footer footer footer"
badges: []
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
background-color: rgba(0,0,0,0);
}
cards:
- type: custom:mushroom-person-card
entity: person.xxx
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 100px;
border: none
background: none
}
- type: custom:mushroom-person-card
entity: person.xxx
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 100px;
}
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: action
icon_color: pink
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.kiosk_mode
icon: mdi:arrow-oscillating
view_layout:
grid-area: people
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: " "
- type: custom:decluttering-card
template: side-nav
variables:
- dashboard-name: dashboard-view
- active-view: home
view_layout:
grid-area: nav
show:
mediaquery: "(min-width: 400px)"
- type: custom:mod-card
view_layout:
grid-area: title
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% set user1 = "Bart & Jessie" %}
{% if (time >= 18) %}
Good evening, {{user1}}
{% elif (time >= 12) %}
Good afternoon, {{user1}}
{% elif (time >= 5) %}
Good morning, {{user1}}
{% else %}
Sleep well, {{user1}}!
{% endif %}
subtitle: Welcome to your house!
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0);
}
mushroom-title-card$: |
h1 {
--title-font-size: 26px;
--title-font-weight: bold;
--title-line-height: 1;
}
h2 {
--title-font-size: 16px;
}
.header {
--title-padding: 12px 12px 0px;
}
- type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ""
secondary: Lights
layout: vertical
icon: mdi:lightbulb
icon_color: cyan
entity: group.all_light_entities
badge_icon: none
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
height: 25px !important;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.all_light_entities
state: "on"
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- entity_id: group.all_light_entities
state: "on"
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-state-light), 0.1);
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-template-card
primary: ""
secondary: Devices
layout: vertical
icon: mdi:devices
icon_color: cyan
entity: sensor.current_devices_on
badge_icon: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Device Control
content:
type: vertical-stack
cards:
- type: horizontal-stack
title: Entertainment
cards:
- type: custom:mushroom-template-card
icon_color: >-
{{ 'green' if is_state(entity,'on') else 'red'
}}
entity: switch.smart_plug_8
icon: mdi:monitor
card_mod:
style: |
ha-state-icon::before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('sensor.power_26') | float > 200 %}
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-green), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-green), 0.2) 100%); }
}
layout: vertical
primary: TV Living
secondary: |
{{ states('sensor.power_26') | round(0) }} W
tap_action:
action: toggle
- type: custom:mushroom-template-card
layout: vertical
entity: switch.smart_plug_14
primary: TV Kelder
secondary: |
{{ states('sensor.power_44') | round(0) }} W
icon_color: >-
{{ 'green' if is_state(entity,'on') else 'red'
}}
icon: mdi:monitor
card_mod:
style: |
ha-state-icon::before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('sensor.power_44') | float > 100 %}
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-green), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-green), 0.2) 100%); }
}
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
layout: vertical
entity: switch.smart_plug_13
primary: TV Master
secondary: |
{{ states('sensor.power_48') | round(0) }} W
icon_color: >-
{{ 'green' if is_state(entity,'on') else 'red'
}}
icon: mdi:monitor
card_mod:
style: |
ha-state-icon::before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('sensor.power_48') | float > 100 %}
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-green), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-green), 0.2) 100%); }
}
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: toggle
- type: horizontal-stack
title: Other Devices
cards:
- type: custom:restriction-card
restrictions:
pin:
code: 3213
card:
type: custom:mushroom-template-card
card_mod:
class: hki
layout: vertical
entity: switch.smart_plug_4
primary: CV
secondary: |
{{ states('sensor.power_22') | round(0) }} W
icon_color: >-
{{ 'green' if is_state(entity,'on') else
'red' }}
icon: mdi:water-boiler
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
card_mod:
class: hki
layout: vertical
entity: switch.zb_plug_droogkast
primary: Droogkast
secondary: |
{{ states('sensor.power_6') | round(0) }} W
icon_color: >-
{{ 'green' if is_state(entity,'on') else 'red'
}}
icon: mdi:tumble-dryer
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
card_mod:
class: hki
layout: vertical
entity: switch.on_off_plug_in_unit_11
primary: Wasmachine
secondary: |
{{ states('sensor.power_38') | round(0) }} W
icon_color: >-
{{ 'green' if is_state(entity,'on') else 'red'
}}
icon: mdi:washing-machine
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: toggle
