@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/MobileMenu/gallery.yaml

@@ -0,0 +1,1172 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Basic Links
+  blocks:
+    - id: basic_simple
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: bs_home
+            type: MenuLink
+            properties:
+              title: Home
+          - id: bs_about
+            type: MenuLink
+            properties:
+              title: About
+          - id: bs_contact
+            type: MenuLink
+            properties:
+              title: Contact
+    - id: basic_icons
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: bi_dashboard
+            type: MenuLink
+            properties:
+              title: Dashboard
+              icon: AiOutlineDashboard
+          - id: bi_users
+            type: MenuLink
+            properties:
+              title: Users
+              icon: AiOutlineUser
+          - id: bi_settings
+            type: MenuLink
+            properties:
+              title: Settings
+              icon: AiOutlineSetting
+    - id: basic_page_links
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: bpl_docs
+            type: MenuLink
+            pageId: docs
+            properties:
+              title: Documentation
+              icon: AiOutlineFileText
+          - id: bpl_api
+            type: MenuLink
+            pageId: api-reference
+            properties:
+              title: API Reference
+              icon: AiOutlineApi
+          - id: bpl_changelog
+            type: MenuLink
+            pageId: changelog
+            properties:
+              title: Changelog
+              icon: AiOutlineHistory
+
+- title: Menu Groups
+  blocks:
+    - id: groups_single
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: gs_overview
+            type: MenuLink
+            properties:
+              title: Overview
+              icon: AiOutlineHome
+          - id: gs_management
+            type: MenuGroup
+            properties:
+              title: Management
+              icon: AiOutlineAppstore
+            links:
+              - id: gs_projects
+                type: MenuLink
+                properties:
+                  title: Projects
+              - id: gs_tasks
+                type: MenuLink
+                properties:
+                  title: Tasks
+    - id: groups_nested
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: gn_content
+            type: MenuGroup
+            properties:
+              title: Content
+              icon: AiOutlineFileText
+            links:
+              - id: gn_posts
+                type: MenuLink
+                properties:
+                  title: Posts
+              - id: gn_pages
+                type: MenuLink
+                properties:
+                  title: Pages
+          - id: gn_users
+            type: MenuGroup
+            properties:
+              title: Users
+              icon: AiOutlineTeam
+            links:
+              - id: gn_all
+                type: MenuLink
+                properties:
+                  title: All Users
+              - id: gn_roles
+                type: MenuLink
+                properties:
+                  title: Roles
+    - id: groups_deep
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: gd_products
+            type: MenuGroup
+            properties:
+              title: Products
+              icon: AiOutlineShop
+            links:
+              - id: gd_electronics
+                type: MenuGroup
+                properties:
+                  title: Electronics
+                links:
+                  - id: gd_phones
+                    type: MenuLink
+                    properties:
+                      title: Phones
+                  - id: gd_laptops
+                    type: MenuLink
+                    properties:
+                      title: Laptops
+
+- title: Dividers and Danger Items
+  blocks:
+    - id: divider_basic
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: db_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: db_divider
+            type: MenuDivider
+          - id: db_settings
+            type: MenuLink
+            properties:
+              title: Settings
+              icon: AiOutlineSetting
+    - id: divider_dashed
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: dd_profile
+            type: MenuLink
+            properties:
+              title: Profile
+              icon: AiOutlineUser
+          - id: dd_divider
+            type: MenuDivider
+            properties:
+              dashed: true
+          - id: dd_help
+            type: MenuLink
+            properties:
+              title: Help Center
+              icon: AiOutlineQuestionCircle
+    - id: divider_danger
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: dg_account
+            type: MenuLink
+            properties:
+              title: Account
+              icon: AiOutlineUser
+          - id: dg_divider
+            type: MenuDivider
+          - id: dg_delete
+            type: MenuLink
+            properties:
+              title: Delete Account
+              icon: AiOutlineDelete
+              danger: true
+          - id: dg_logout
+            type: MenuLink
+            properties:
+              title: Sign Out
+              icon: AiOutlineLogout
+              danger: true
+
+- title: Theme (Light and Dark)
+  blocks:
+    - id: theme_light
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        theme: light
+        links:
+          - id: tl_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: tl_explore
+            type: MenuLink
+            properties:
+              title: Explore
+              icon: AiOutlineCompass
+          - id: tl_settings
+            type: MenuLink
+            properties:
+              title: Settings
+              icon: AiOutlineSetting
+    - id: theme_dark
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        theme: dark
+        links:
+          - id: td_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: td_explore
+            type: MenuLink
+            properties:
+              title: Explore
+              icon: AiOutlineCompass
+          - id: td_settings
+            type: MenuLink
+            properties:
+              title: Settings
+              icon: AiOutlineSetting
+
+- title: Selected Keys
+  blocks:
+    - id: selected_single
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        selectedKeys:
+          - sk_users
+        links:
+          - id: sk_dashboard
+            type: MenuLink
+            properties:
+              title: Dashboard
+              icon: AiOutlineDashboard
+          - id: sk_users
+            type: MenuLink
+            properties:
+              title: Users
+              icon: AiOutlineUser
+          - id: sk_reports
+            type: MenuLink
+            properties:
+              title: Reports
+              icon: AiOutlineBarChart
+    - id: selected_multiple
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        selectedKeys:
+          - sm_inbox
+          - sm_sent
+        links:
+          - id: sm_inbox
+            type: MenuLink
+            properties:
+              title: Inbox
+              icon: AiOutlineInbox
+          - id: sm_sent
+            type: MenuLink
+            properties:
+              title: Sent
+              icon: AiOutlineSend
+          - id: sm_drafts
+            type: MenuLink
+            properties:
+              title: Drafts
+              icon: AiOutlineEdit
+    - id: selected_in_group
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        selectedKeys:
+          - sig_tasks
+        links:
+          - id: sig_overview
+            type: MenuLink
+            properties:
+              title: Overview
+              icon: AiOutlineHome
+          - id: sig_project
+            type: MenuGroup
+            properties:
+              title: Project
+              icon: AiOutlineProject
+            links:
+              - id: sig_tasks
+                type: MenuLink
+                properties:
+                  title: Tasks
+              - id: sig_timeline
+                type: MenuLink
+                properties:
+                  title: Timeline
+
+- title: Toggle Menu Button
+  blocks:
+    - id: toggle_default_type
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        toggleMenuButton:
+          type: default
+          icon: AiOutlineMenu
+        links:
+          - id: tdt_home
+            type: MenuLink
+            properties:
+              title: Home
+          - id: tdt_about
+            type: MenuLink
+            properties:
+              title: About
+    - id: toggle_text_variant
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        toggleMenuButton:
+          type: text
+          icon: AiOutlineUnorderedList
+        links:
+          - id: ttv_home
+            type: MenuLink
+            properties:
+              title: Home
+          - id: ttv_about
+            type: MenuLink
+            properties:
+              title: About
+    - id: toggle_danger_style
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        toggleMenuButton:
+          type: primary
+          icon: AiOutlineBars
+          danger: true
+        links:
+          - id: tds_home
+            type: MenuLink
+            properties:
+              title: Home
+          - id: tds_about
+            type: MenuLink
+            properties:
+              title: About
+
+- title: Drawer Properties
+  blocks:
+    - id: drawer_titled
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        drawer:
+          title: Navigation
+          width: 280
+        links:
+          - id: dt_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: dt_profile
+            type: MenuLink
+            properties:
+              title: Profile
+              icon: AiOutlineUser
+    - id: drawer_left
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        drawer:
+          title: Menu
+          placement: left
+          width: 240
+        links:
+          - id: dl_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: dl_search
+            type: MenuLink
+            properties:
+              title: Search
+              icon: AiOutlineSearch
+    - id: drawer_wide
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        drawer:
+          title: Browse
+          width: 360
+          closable: true
+          mask: true
+          maskClosable: true
+        links:
+          - id: dw_categories
+            type: MenuGroup
+            properties:
+              title: Categories
+              icon: AiOutlineAppstore
+            links:
+              - id: dw_electronics
+                type: MenuLink
+                properties:
+                  title: Electronics
+              - id: dw_clothing
+                type: MenuLink
+                properties:
+                  title: Clothing
+
+- title: Submenu Delays
+  blocks:
+    - id: delay_fast
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        subMenuOpenDelay: 0
+        subMenuCloseDelay: 0
+        links:
+          - id: df_tools
+            type: MenuGroup
+            properties:
+              title: Tools
+              icon: AiOutlineTool
+            links:
+              - id: df_editor
+                type: MenuLink
+                properties:
+                  title: Editor
+              - id: df_terminal
+                type: MenuLink
+                properties:
+                  title: Terminal
+    - id: delay_slow
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        subMenuOpenDelay: 0.5
+        subMenuCloseDelay: 1
+        links:
+          - id: ds_tools
+            type: MenuGroup
+            properties:
+              title: Tools
+              icon: AiOutlineTool
+            links:
+              - id: ds_editor
+                type: MenuLink
+                properties:
+                  title: Editor
+              - id: ds_terminal
+                type: MenuLink
+                properties:
+                  title: Terminal
+
+- title: Events
+  blocks:
+    - id: events_toggle
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: et_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: et_about
+            type: MenuLink
+            properties:
+              title: About
+              icon: AiOutlineInfoCircle
+      events:
+        onToggleDrawer:
+          - id: toggle_msg
+            type: DisplayMessage
+            params:
+              content: Drawer toggled
+              status: info
+    - id: events_open_close
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: eoc_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: eoc_profile
+            type: MenuLink
+            properties:
+              title: Profile
+              icon: AiOutlineUser
+      events:
+        onOpen:
+          - id: open_msg
+            type: DisplayMessage
+            params:
+              content: Menu opened
+              status: success
+        onClose:
+          - id: close_msg
+            type: DisplayMessage
+            params:
+              content: Menu closed
+              status: warning
+    - id: events_item_click
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: eic_dashboard
+            type: MenuLink
+            properties:
+              title: Dashboard
+              icon: AiOutlineDashboard
+          - id: eic_reports
+            type: MenuLink
+            properties:
+              title: Reports
+              icon: AiOutlineBarChart
+      events:
+        onMenuItemClick:
+          - id: click_msg
+            type: DisplayMessage
+            params:
+              content: Menu item clicked
+              status: info
+        onMenuItemSelect:
+          - id: select_msg
+            type: DisplayMessage
+            params:
+              content: Menu item selected
+              status: success
+    - id: events_group_toggle
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: egt_tools
+            type: MenuGroup
+            properties:
+              title: Tools
+              icon: AiOutlineTool
+            links:
+              - id: egt_editor
+                type: MenuLink
+                properties:
+                  title: Editor
+              - id: egt_terminal
+                type: MenuLink
+                properties:
+                  title: Terminal
+      events:
+        onToggleMenuGroup:
+          - id: group_toggle_msg
+            type: DisplayMessage
+            params:
+              content: Menu group toggled
+              status: info
+
+- title: Link Styles
+  blocks:
+    - id: link_style_custom
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: lsc_featured
+            type: MenuLink
+            style:
+              fontWeight: bold
+              color: '#1677ff'
+            properties:
+              title: Featured
+              icon: AiOutlineStar
+          - id: lsc_regular
+            type: MenuLink
+            properties:
+              title: Regular Item
+              icon: AiOutlineFile
+          - id: lsc_muted
+            type: MenuLink
+            style:
+              opacity: 0.6
+              fontStyle: italic
+            properties:
+              title: Archived
+              icon: AiOutlineFolder
+    - id: link_style_icon_object
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: lsi_alert
+            type: MenuLink
+            properties:
+              title: Alerts
+              icon:
+                name: AiOutlineBell
+                color: '#faad14'
+          - id: lsi_success
+            type: MenuLink
+            properties:
+              title: Completed
+              icon:
+                name: AiOutlineCheckCircle
+                color: '#52c41a'
+          - id: lsi_error
+            type: MenuLink
+            properties:
+              title: Errors
+              icon:
+                name: AiOutlineCloseCircle
+                color: '#ff4d4f'
+
+- title: Style and CSS
+  blocks:
+    - id: css_tailwind_shadow
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      class: shadow-md rounded-lg
+      properties:
+        links:
+          - id: cts_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: cts_settings
+            type: MenuLink
+            properties:
+              title: Settings
+              icon: AiOutlineSetting
+    - id: css_tailwind_bg
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      class: bg-bg-layout p-1 rounded-md
+      properties:
+        links:
+          - id: ctb_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: ctb_explore
+            type: MenuLink
+            properties:
+              title: Explore
+              icon: AiOutlineCompass
+    - id: css_inline_style
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      style:
+        .element:
+          padding: 4px
+          borderRadius: 8
+          border: '1px solid #d6e4ff'
+      properties:
+        links:
+          - id: cis_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: cis_help
+            type: MenuLink
+            properties:
+              title: Help
+              icon: AiOutlineQuestionCircle
+    - id: css_dark_context
+      type: Box
+      class: bg-gradient-to-r from-slate-900 to-slate-700 p-4 rounded-lg
+      layout:
+        gap: 8
+      blocks:
+        - id: css_on_dark
+          type: MobileMenu
+          layout:
+            flex: 0 0 auto
+          properties:
+            theme: dark
+            toggleMenuButton:
+              type: primary
+              ghost: true
+              icon: AiOutlineMenu
+            links:
+              - id: cod_home
+                type: MenuLink
+                properties:
+                  title: Home
+                  icon: AiOutlineHome
+              - id: cod_settings
+                type: MenuLink
+                properties:
+                  title: Settings
+                  icon: AiOutlineSetting
+
+- title: Keyboard Shortcuts
+  blocks:
+    - id: mobile_shortcut
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        drawer:
+          title: Navigation
+        links:
+          - id: ms_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+              shortcut: mod+1
+          - id: ms_search
+            type: MenuLink
+            properties:
+              title: Search
+              icon: AiOutlineSearch
+              shortcut: mod+k
+          - id: ms_settings
+            type: MenuLink
+            properties:
+              title: Settings
+              icon: AiOutlineSetting
+              shortcut: mod+,
+
+- title: Logo in Drawer Header
+  blocks:
+    - id: mm_logo_example
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        logo:
+          src: logo-square-dark-theme.png
+          alt: Lowdefy
+          style:
+            width: 60
+        links:
+          - id: ml_home
+            type: MenuLink
+            properties:
+              title: Home
+              icon: AiOutlineHome
+          - id: ml_settings
+            type: MenuLink
+            properties:
+              title: Settings
+              icon: AiOutlineSetting
+
+- title: Drawer Content Slot
+  blocks:
+    - id: mm_drawer_content_example
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: mdc_home
+            type: MenuLink
+            properties:
+              title: Home
+          - id: mdc_about
+            type: MenuLink
+            properties:
+              title: About
+      slots:
+        drawerContent:
+          blocks:
+            - id: mdc_extra
+              type: Paragraph
+              properties:
+                content: Additional content below the menu items.
+                style:
+                  padding: 16px
+                  color: '#999'
+
+- title: Drawer Footer Slot
+  blocks:
+    - id: mm_drawer_footer_example
+      type: MobileMenu
+      layout:
+        flex: 0 0 auto
+      properties:
+        links:
+          - id: mdf_home
+            type: MenuLink
+            properties:
+              title: Home
+      slots:
+        drawerFooter:
+          blocks:
+            - id: mdf_footer
+              type: Paragraph
+              properties:
+                content: App v2.1.0
+                style:
+                  textAlign: center
+                  margin: 0
+                  color: '#aaa'
+                  fontSize: 12
+
+- title: MobileMenu in Admin Dashboard
+  blocks:
+    - id: admin_header
+      type: Box
+      class: bg-bg-container border-b border-border px-4 py-3
+      layout:
+        direction: row
+        align: center
+        justify: space-between
+      blocks:
+        - id: admin_left
+          type: Box
+          layout:
+            direction: row
+            align: center
+            gap: 12
+            flex: 0 0 auto
+          blocks:
+            - id: admin_nav
+              type: MobileMenu
+              layout:
+                flex: 0 0 auto
+              properties:
+                toggleMenuButton:
+                  type: text
+                  icon: AiOutlineMenu
+                drawer:
+                  title: Admin Panel
+                  width: 280
+                links:
+                  - id: an_dashboard
+                    type: MenuLink
+                    properties:
+                      title: Dashboard
+                      icon: AiOutlineDashboard
+                  - id: an_content
+                    type: MenuGroup
+                    properties:
+                      title: Content
+                      icon: AiOutlineFileText
+                    links:
+                      - id: an_posts
+                        type: MenuLink
+                        properties:
+                          title: Posts
+                      - id: an_media
+                        type: MenuLink
+                        properties:
+                          title: Media Library
+                  - id: an_users
+                    type: MenuGroup
+                    properties:
+                      title: Users
+                      icon: AiOutlineTeam
+                    links:
+                      - id: an_all_users
+                        type: MenuLink
+                        properties:
+                          title: All Users
+                      - id: an_roles
+                        type: MenuLink
+                        properties:
+                          title: Roles
+                  - id: an_divider
+                    type: MenuDivider
+                  - id: an_settings
+                    type: MenuLink
+                    properties:
+                      title: Settings
+                      icon: AiOutlineSetting
+                  - id: an_divider2
+                    type: MenuDivider
+                    properties:
+                      dashed: true
+                  - id: an_logout
+                    type: MenuLink
+                    properties:
+                      title: Sign Out
+                      icon: AiOutlineLogout
+                      danger: true
+              events:
+                onMenuItemClick:
+                  - id: admin_click_msg
+                    type: DisplayMessage
+                    params:
+                      content: Navigating...
+                      status: info
+            - id: admin_title
+              type: Markdown
+              layout:
+                flex: 0 0 auto
+              properties:
+                content: '**Admin Panel**'
+        - id: admin_actions
+          type: Box
+          layout:
+            direction: row
+            align: center
+            gap: 8
+            flex: 0 0 auto
+          blocks:
+            - id: admin_bell
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                icon: AiOutlineBell
+                hideTitle: true
+                variant: text
+                color: default
+            - id: admin_avatar
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                icon: AiOutlineUser
+                hideTitle: true
+                shape: circle
+                variant: filled
+                color: primary
+    - id: admin_body
+      type: Card
+      properties:
+        title: Welcome Back
+        size: small
+      blocks:
+        - id: admin_stats
+          type: Markdown
+          properties:
+            content: |
+              You have **12** new orders, **3** pending reviews, and **5** unread messages.
+
+              Use the navigation menu to manage your application.
+
+- title: MobileMenu in E-Commerce App
+  blocks:
+    - id: shop_header
+      type: Box
+      class: bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3
+      layout:
+        direction: row
+        align: center
+        justify: space-between
+      blocks:
+        - id: shop_left
+          type: Box
+          layout:
+            direction: row
+            align: center
+            gap: 12
+            flex: 0 0 auto
+          blocks:
+            - id: shop_nav
+              type: MobileMenu
+              layout:
+                flex: 0 0 auto
+              properties:
+                toggleMenuButton:
+                  type: primary
+                  ghost: true
+                  icon: AiOutlineMenu
+                drawer:
+                  title: Shop Categories
+                  width: 300
+                theme: light
+                selectedKeys:
+                  - sn_clothing
+                links:
+                  - id: sn_home
+                    type: MenuLink
+                    url: /
+                    properties:
+                      title: Home
+                      icon: AiOutlineHome
+                  - id: sn_divider_top
+                    type: MenuDivider
+                  - id: sn_clothing
+                    type: MenuGroup
+                    properties:
+                      title: Clothing
+                      icon: AiOutlineSkin
+                    links:
+                      - id: sn_mens
+                        type: MenuLink
+                        properties:
+                          title: Men's Wear
+                      - id: sn_womens
+                        type: MenuLink
+                        properties:
+                          title: Women's Wear
+                      - id: sn_kids
+                        type: MenuLink
+                        properties:
+                          title: Kids
+                  - id: sn_electronics
+                    type: MenuGroup
+                    properties:
+                      title: Electronics
+                      icon: AiOutlineLaptop
+                    links:
+                      - id: sn_phones
+                        type: MenuLink
+                        properties:
+                          title: Phones & Tablets
+                      - id: sn_computers
+                        type: MenuLink
+                        properties:
+                          title: Computers
+                  - id: sn_divider_bottom
+                    type: MenuDivider
+                    properties:
+                      dashed: true
+                  - id: sn_deals
+                    type: MenuLink
+                    properties:
+                      title: Today's Deals
+                      icon: AiOutlineThunderbolt
+                  - id: sn_orders
+                    type: MenuLink
+                    pageId: orders
+                    properties:
+                      title: My Orders
+                      icon: AiOutlineShoppingCart
+              events:
+                onMenuItemSelect:
+                  - id: shop_select_msg
+                    type: DisplayMessage
+                    params:
+                      content: Loading category...
+                      status: info
+                onToggleDrawer:
+                  - id: shop_toggle_state
+                    type: SetState
+                    params:
+                      menuOpen:
+                        _not:
+                          _state: menuOpen
+            - id: shop_brand
+              type: Markdown
+              layout:
+                flex: 0 0 auto
+              style:
+                .element:
+                  color: white
+              properties:
+                content: '**ShopNow**'
+        - id: shop_right
+          type: Box
+          layout:
+            direction: row
+            align: center
+            gap: 8
+            flex: 0 0 auto
+          blocks:
+            - id: shop_search
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                icon: AiOutlineSearch
+                hideTitle: true
+                variant: text
+                ghost: true
+                color: default
+            - id: shop_cart
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                icon: AiOutlineShoppingCart
+                hideTitle: true
+                variant: text
+                ghost: true
+                color: default
+    - id: shop_content
+      type: Card
+      properties:
+        title: Featured Products
+        size: small
+      blocks:
+        - id: shop_desc
+          type: Markdown
+          properties:
+            content: |
+              Browse our latest collection across all categories.
+
+              **Free shipping** on orders over $50. Use the menu to explore departments.