Companion to /r/homeassisant post: https://www.reddit.com/r/homeassistant/comments/oo9jxi/finally_got_a_good_mobile_interface/

foyer.yaml

# a general "room" yaml file.
# all of the other rooms are essentially the same
# the only differences are the parameters for the `glanece` card and the `room` template
title: Foyer
icon: mdi:door
type: custom:vertical-stack-in-card
cards:
  - type: glance
    show_header_toggle: false
    columns: 3
    entities:
      - entity: sensor.foyer_sensor_air_temperature
        name: Temperature
      - entity: sensor.foyer_sensor_humidity
        name: Humidity
      - entity: binary_sensor.foyer_sensor_home_security_motion_detected
        name: Motion
      - entity: input_boolean.foyer_occupancy
        name: Occupancy
      - entity: sensor.foyer_sensor_illuminance
        name: Illuminance
      - entity: binary_sensor.front_door_on_off
        name: Front Door
  - !include
    - ../templates/room.yaml.j2
    - automations:
        - entity: input_boolean.foyer_auto_lights
          name: Auto-Lights
      lights:
        - entity: light.foyer_main_lights
          name: Lights
          rgb: true
          entities:
            - entity: light.foyer_main_light_1_control
              name: Light 1
            - entity: light.foyer_main_light_2_control
              name: Light 2
            - entity: light.foyer_main_light_3_control
              name: Light 3
            - entity: light.foyer_main_light_4_control
              name: Light 4
            - entity: light.foyer_main_light_5_control
              name: Light 5
            - entity: light.foyer_main_light_6_control
              name: Light 6

ground-level.yaml

# a general "floor" yaml file.
# all of the other floors are essentially the same
#
# this is where the main Swipe card config is.
#
# Swipe starts on card 2 so you swipe left to go back and get the shared navigation
type: vertical-stack
title: Ground Level
cards:
  - type: custom:swipe-card
    start_card: 2
    parameters:
      pagination:
        type: "progressbar"
      effect: "flip"
    cards:
      - !include ../../../snippets/mobile-nav.yaml
      - type: custom:mod-card
        style: |
          ha-card {
            flex-wrap: wrap;
            margin: 10px 10px -13px;
          }
        card: !include ../../../rooms/foyer.yaml
      - type: custom:mod-card
        style: |
          ha-card {
            flex-wrap: wrap;
            margin: 10px 10px -13px;
          }
        card: !include ../../../rooms/front-room.yaml
      - type: custom:mod-card
        style: |
          ha-card {
            flex-wrap: wrap;
            margin: 10px 10px -13px;
          }
        card: !include ../../../rooms/kitchen.yaml

light-colors.yaml

# Default colors for the RGB Light Card
- rgb_color:
    - 255
    - 255
    - 255
  brightness: 254
  transition: 1
- rgb_color:
    - 255
    - 0
    - 0
  brightness: 254
  transition: 1
- rgb_color:
    - 0
    - 255
    - 0
  brightness: 254
  transition: 1
- rgb_color:
    - 0
    - 255
    - 255
  brightness: 254
  transition: 1
- rgb_color:
    - 253
    - 11
    - 255
  brightness: 254
  transition: 1
- rgb_color:
    - 128
    - 0
    - 255
  brightness: 128
  transition: 1

main.yaml

# Main Lovelace view. To intrastre how I am creating my "mobile" view
type: vertical-stack
cards:
  # Desktop
  - type: custom:mod-card
    style: |
      @media (max-width:1281px) {
        ha-card {
          display: none;
        }
      }
    card:
      # rest of desktop goes here

  # Mobile
  - type: custom:mod-card
    style: |
      @media (min-width:1281px) {
        ha-card {
          display: none;
        }
      }
    card: !include ../../snippets/mobile-nav.yaml

mobile-nav.yaml

# shared mobile nav used in all mobile views
type: vertical-stack
title: Home
cards:
  - type: horizontal-stack
    cards:
      - type: button
        name: Climate
        icon: mdi:thermometer
        icon_height: 20px
        show_state: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/climate/
      - type: button
        name: Floorplans
        icon: mdi:home
        icon_height: 20px
        show_state: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/floorplan/
  - type: horizontal-stack
    cards:
      - type: button
        name: Outside
        icon: mdi:tree
        icon_height: 20px
        show_state: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/outside/
      - type: button
        name: Ground Level
        icon: mdi:door
        icon_height: 20px
        show_state: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/ground-level/
  - type: horizontal-stack
    cards:
      - type: button
        name: Downstairs
        icon: mdi:stairs-down
        icon_height: 20px
        show_state: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/downstairs/
      - type: button
        name: Upstairs
        icon: mdi:stairs-up
        icon_height: 20px
        show_state: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/upstairs/

room.yaml.j2

# lovelace_gen
{% macro add_light(ws, light) -%}
- type: custom:slider-entity-row
{{"  "*ws}}  entity: "{{ light.entity }}"
{% if light.name %}
{{"  "*ws}}  name: "{{ light.name }}"
{% endif %}
{{"  "*ws}}  toggle: true
{{"  "*ws}}  hide_when_off: true
{% if light.colors %}
{% set result=light.update({'rgb': True}) %}
{% endif %}
{% if light.rgb %}
{{"  "*ws}}- type: conditional
{{"  "*ws}}  conditions:
{{"  "*ws}}    - entity: "{{ light.entity }}"
{{"  "*ws}}      state: "on"
{{"  "*ws}}  row:
{{"  "*ws}}    type: "custom:rgb-light-card"
{{"  "*ws}}    entity: "{{ light.entity }}"
{{"  "*ws}}    colors: !include "{{ light.colors | default('../colors/light-colors.yaml') }}"
{% endif %}
{%- endmacro %}

{% macro add_light_group(ws, light_group, lights) -%}
- type: custom:fold-entity-row
{{"  "*ws}}  head:
{{"  "*ws}}    type: custom:slider-entity-row
{{"  "*ws}}    entity: "{{ light_group.entity }}"
{{"  "*ws}}    toggle: true
{% if light_group.name %}
{{"  "*ws}}    name: "{{ light_group.name }}"
{% endif %}
{{"  "*ws}}    hide_when_off: true
{{"  "*ws}}  padding: 46
{{"  "*ws}}  entities:
{% for light in lights %}
{% if light_group.colors %}
{% set result=light_group.update({'rgb': True}) %}
{% endif %}
{% if light_group.rgb %}
{% set result=light.update({'rgb': True}) %}
{% endif %}
{% if light_group.colors %}
{% set result=light.update({'colors': light_group.colors}) %}
{% endif %}
{{"  "*ws}}  {{ add_light(ws + 1, light) }}
{% endfor %}
{% if light_group.rgb %}
{{"  "*ws}}- type: conditional
{{"  "*ws}}  conditions:
{{"  "*ws}}    - entity: "{{ light_group.entity }}"
{{"  "*ws}}      state: "on"
{{"  "*ws}}  row:
{{"  "*ws}}    type: "custom:rgb-light-card"
{{"  "*ws}}    entity: "{{ light_group.entity }}"
{{"  "*ws}}    colors: !include "{{ light_group.colors | default('../colors/light-colors.yaml') }}"
{% endif %}
{%- endmacro %}

type: entities
show_header_toggle: false
entities:
  {% if automations %}
  - type: section
    label: Automations
  - type: buttons
    entities:
    {% for automation in automations %} 
      - entity: "{{ automation.entity }}"
        {% if automation.name %}
        name: "{{ automation.name }}"
        {% endif %}
    {% endfor %}
  {% endif %}
  {% if lights %}
  - type: section
    label: Lights
    {% for light in lights %}
      {% if light.entities %}
  {{ add_light_group(1, light, light.entities) }}
      {% else %}
  {{ add_light(1, light) }}
      {% endif %}
    {% endfor %}
  {% endif %}
  {% if outlets %}
  - type: section
    label: Outlets
    {% for outlet in outlets %} 
  - {{ outlet }}
    {% endfor %}
  {% endif %}

ui-lovelace.yaml

# main lovelace file
title: Home
views:
  - title: Home
    icon: mdi:home
    path: home
    panel: true
    cards:
      - !include lovelace/views/home/main.yaml

  - icon: mdi:thermometer
    title: Climate
    path: climate
    panel: true
    visible: false
    cards:
      - !include lovelace/views/home/mobile/climate.yaml

  - icon: mdi:home
    title: Floorplan
    path: floorplan
    panel: true
    visible: false
    cards:
      - !include lovelace/views/home/mobile/floorplan.yaml

  - icon: mdi:tree
    title: Outside
    path: outside
    panel: true
    visible: false
    cards:
      - !include lovelace/views/home/mobile/outside.yaml

  - icon: mdi:door
    title: Ground Level
    path: ground-level
    panel: true
    visible: false
    cards:
      - !include lovelace/views/home/mobile/ground-level.yaml

  - icon: mdi:stairs-down
    title: Downstairs
    path: downstairs
    panel: true
    visible: false
    cards:
      - !include lovelace/views/home/mobile/downstairs.yaml

  - icon: mdi:stairs-up
    title: Upstairs
    path: upstairs
    panel: true
    visible: false
    cards:
      - !include lovelace/views/home/mobile/upstairs.yaml