top_navigation_buttons.yaml

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: |-
      {% if states('sensor.power_p1_netto_daily_kwh') | float < 0 %}
      mdi:transmission-tower-import
      {% elif states('sensor.power_p1_netto_daily_kwh') | float > 0 %}
      mdi:transmission-tower-export
      {% else %}
      mdi:transmission-tower-export
      {% endif %}
    icon_color: |-
      {% if states('sensor.power_p1_netto_daily_kwh') | float < 0 %}
      green
      {% elif states('sensor.power_p1_netto_daily_kwh') | float > 0 %}
      red
      {% else %}
      grey
      {% endif %}
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-subviews/energy
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: |-
      {% if states('sensor.woonkamer_motion_hue_temperature') | float < 0 %}
      mdi:temperature-celsius
      {% elif states('sensor.woonkamer_motion_hue_temperature') | float > 0 %}
      mdi:temperature-celsius
      {% else %}
      mdi:temperature-celsius
      {% endif %}
    icon_color: |-
      {% if states('sensor.woonkamer_motion_hue_temperature') | float < 10 %}
      blue
      {% elif states('sensor.woonkamer_motion_hue_temperature') | float > 20 %}
      red
      {% else %}
      orange
      {% endif %}
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-subviews/verwarming
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:speaker
    icon_color: teal
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-subviews/multimedia
    card_mod:
      style: |
        ha-state-icon {
           animation: beat 1.3s ease-out infinite both;
          transform-origin: 50% 60%;
        }
        @keyframes beat {
          0% { transform: scale(1); }
          10% { transform: scale(1.1); }
          17% { transform: scale(1.05); }
          33% { transform: scale(1.25); }
          60% { transform: scale(1); }
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: |-
      {% if states('switch.shellyplugs_3dprinter_e3pro', 'on') %}
      mdi:printer-3d-nozzle
      {% elif states('switch.shellyplugs_3dprinter_e3pro', 'off') %}
      mdi:printer-3d-nozzle
      {% else %}
      mdi:printer-3d-nozzle
      {% endif %}
    icon_color: |-
      {% if states('switch.shellyplugs_3dprinter_e3pro', 'off') %}
      grey
      {% elif states('switch.shellyplugs_3dprinter_e3pro', 'on') %}
      green
      {% else %}
      red
      {% endif %}
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-subviews/3dprinter
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:server
    icon_color: green
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-subviews/servers
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:window-shutter-settings
    icon_color: white
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-subviews/screens