maglevhq / maglev-core

Ruby on Rails website builder
https://www.maglev.dev
MIT License
273 stars 47 forks source link

Options to add submenus not available #77

Closed geniuskidkanyi closed 7 months ago

geniuskidkanyi commented 7 months ago

I am able to define the submenus in the yml file but in the editor adding submenu items is not avaiable Screenshot_20240311_043539

did commented 7 months ago

@geniuskidkanyi, here is an example about a multi-levels / polymorphic menu:

# Name of the section displayed in the editor UI
name: "Footer #2"

# Category of the section in the editor UI (headers, features, testimonials, ...etc)
category: footer

# A section might have the same content all over the site, like a menu or a footer for instance.
# To enable this behavior, uncomment the following statement
site_scoped: true

# Display or not the button to insert a new section after this one
insert_button: false

# Insert this section at the top or the bottom of the page (default: nil)
insert_at: bottom 

# one single instance per page?
singleton: true

# Definition of the settings:
# A setting type can be one of the following values: text, image, link, collection_item, checkbox, color and icon.
# Please visit: https://docs.maglev.dev/concepts/setting for more explanation.
settings:
- label: "Logo"
  id: logo 
  type: image
  if: display_logo
  default: "/themes/basic/logo.png"

- label: "Text next to the Logo"
  id: logo_text
  type: text
  default: "Acme."
  if: display_logo_text

- label: "Copyright"
  id: copyright
  type: text
  html: true
  line_break: true
  default: "<p>© 2022 Acme Inc.</p>"

- label: "Background color"
  id: background_color
  type: color
  presets: ["--basic-theme-transparent", "--basic-theme-color-black", "--basic-theme-color-zinc", "--basic-theme-color-red", "--basic-theme-color-orange", "--basic-theme-color-beige", "--basic-theme-color-green", "--basic-theme-color-teal", "--basic-theme-color-cyan", "--basic-theme-color-dark-blue", "--basic-theme-color-blue", "--basic-theme-color-violet", "--basic-theme-color-fuchsia"]
  default: "--basic-theme-transparent" 
  advanced: true

- label: "Display Logo"
  id: display_logo
  type: checkbox
  default: true
  advanced: true

- label: "Display Logo text"
  id: display_logo_text
  type: checkbox
  default: false
  advanced: true

# Definition of the blocks.
# You can define as many types of blocks as you want.
blocks: 
- name: "Simple links"
  type: simple_link_folder
  accept: ['simple_link']
  limit: 1
  settings:
  - label: "Title"
    id: title
    type: text
    default: "Simple links"

- name: "Social links"
  type: social_link_folder
  accept: ['social_link']
  limit: 1
  settings:
  - label: "Title"
    id: title
    type: text
    default: "Social links"

- name: "Simple link"
  type: simple_link
  root: false
  settings:
  - label: "Link"
    id: link
    type: link
    with_text: true
    default: 
      text: "Link"
      url: "/"

- name: "Social link"
  type: social_link
  root: false
  settings:
  - label: "Name"
    id: name
    type: text
    default: "Github"
  - label: "Icon"
    id: icon
    type: icon    
    default: 'ri-github-fill'
  - label: "Link"
    id: link
    type: link
    with_text: false
    with_icon: true
    default: "/"

# By default, in the editor UI, blocks will be listed below the "Content" title.
# The title can be changed with the following property:
blocks_label: "Links"

# By default, blocks are presented as a list in the editor UI. 
# If you like to use blocks to build a menu with sub menu items, 
# consider using the tree presentation
blocks_presentation: "tree"

# In order to get a section with "meaning" content for the editors, 
# you can set the default content of a new instance of this section.
# (it's also be useful when taking a screenshot of the section).
sample:
  settings:
    logo: 
      url: "/themes/basic/logo.png"
      alt_text: "My awesome site"
    logo_text: "Acme."
    copyright: "<p>© 2022 Acme Inc.</p>"    
    background_color: "--basic-theme-transparent"
    # background_color: "--basic-theme-color-blue" 
    display_logo: true
    display_logo_text: true
  blocks: 
  - type: simple_link_folder
    settings:
      title: "Simple links"
    children:
    - type: simple_link
      settings:
        link: 
          text: Product
          href: '#'
    - type: simple_link
      settings:
        link: 
          text: About
          href: '#'
    - type: simple_link
      settings:
        link: 
          text: Contact
          href: '#'
  - type: social_link_folder
    settings:
      title: "Social links"
    children:
    - type: social_link
      settings:
        name: "LinkedIn"
        icon: 'ri-linkedin-fill'
        link:           
          href: '#'
    - type: social_link
      settings:
        name: "Twitter"
        icon: 'ri-twitter-fill'
        link:           
          href: '#'
    - type: social_link
      settings:
        name: "Github"
        icon: 'ri-github-fill'
        link:           
          href: '#'