lvgl:
  top_layer:
    widgets:
      - obj:
          id: menu_controls_main
          x: 0
          y: -20
          width: 440
          height: 80
          pad_all: 10
          align: BOTTOM_MID
          bg_color: color_steel_blue
          bg_opa: 20%
          shadow_opa: TRANSP
          border_opa: TRANSP
          border_width: 0
          radius: 10
          layout:
            type: FLEX
            flex_align_main: SPACE_AROUND
            flex_align_cross: CENTER
          widgets:
            - button:
                id: home_page_btn
                clickable: true
                width: 60
                height: 60
                radius: 10
                bg_color: color_slate_blue_gray
                shadow_opa: TRANSP
                widgets:
                  - label:
                      align: CENTER
                      text_color: color_steel_blue
                      text_font: icons_36
                      text: "${home_icon}"
                on_press:
                  - lvgl.page.show: 
                      id: home_page
                      animation: OUT_RIGHT
                      time: 300ms
                  - lvgl.button.update:
                      id: home_page_btn
                      bg_color: color_slate_blue_gray
                      bg_opa: 100%
                  - lvgl.button.update:
                      id: lights_group_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: devices_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: settings_page_btn
                      bg_opa: TRANSP

            - button:
                id: lights_group_page_btn
                clickable: true
                width: 60
                height: 60
                radius: 10
                bg_opa: TRANSP
                shadow_opa: TRANSP
                widgets:
                  - label:
                      align: CENTER
                      text_color: color_steel_blue
                      text_font: icons_36
                      text: "${ceiling_icon}"
                on_press:
                  - lvgl.page.show: 
                      id: lights_group_page
                      animation: OUT_RIGHT
                      time: 300ms
                  - lvgl.button.update:
                      id: lights_group_page_btn 
                      bg_color: color_slate_blue_gray
                      bg_opa: 100%
                  - lvgl.button.update:
                      id: home_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: devices_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: settings_page_btn
                      bg_opa: TRANSP
            - button:
                id: devices_page_btn
                clickable: true
                width: 60
                height: 60
                radius: 10
                bg_opa: TRANSP
                shadow_opa: TRANSP
                widgets:
                  - label:
                      align: CENTER
                      text_color: color_steel_blue
                      text_font: icons_36
                      text: "${devices_icon}"
                on_press:
                  - lvgl.page.show: 
                      id: devices_page
                      animation: OUT_RIGHT
                      time: 300ms
                  - lvgl.button.update:
                      id: devices_page_btn
                      bg_color: color_slate_blue_gray
                      bg_opa: 100%
                  - lvgl.button.update:
                      id: home_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: lights_group_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: settings_page_btn
                      bg_opa: TRANSP
            - button:
                id: settings_page_btn
                clickable: true
                width: 60
                height: 60
                radius: 10
                bg_opa: TRANSP
                shadow_opa: TRANSP
                widgets:
                  - label:
                      align: CENTER
                      text_color: color_steel_blue
                      text_font: icons_36
                      text: "${settings_icon}"
                on_press:
                  - lvgl.page.show: 
                      id: settings_page
                      animation: OUT_RIGHT
                      time: 300ms
                  - lvgl.button.update:
                      id: settings_page_btn
                      bg_color: color_slate_blue_gray
                      bg_opa: 100%
                  - lvgl.button.update:
                      id: home_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: lights_group_page_btn
                      bg_opa: TRANSP
                  - lvgl.button.update:
                      id: devices_page_btn
                      bg_opa: TRANSP