name: JL Offcanvas
description: Create an off-canvas sidebar with your custom content(menu items, text or social icons)that slides in and out of the page, which is perfect for creating mobile navigations.
type: particle
icon: fa-list
configuration:
  caching:
    type: static
form:
  overrideable: false
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable to the particles.
      default: true
    _tabs:
      type: container.tabs
      fields:
        _tab_content:
          label: Content
          fields:
            toggle_item_type:
              type: select.select
              label: Toggle Item
              default: icon
              options:
                 button: Button
                 icon: Icon
            toggle_item_text:
              type: input.text
              label: Toggle Item Text
              placeholder: Menu
            buttonclass:
              type: select.select
              label: Button Style
              description: Set the button style.
              default: default
              options:
                  default: Button Default
                  primary: Button Primary
                  secondary: Button Secondary
                  danger: Button Danger
                  text: Button Text
                  link: Link
                  link-muted: Link Muted
                  link-text: Link Text
            link_button_size:
              type: select.select
              label: Button Size
              description: Set the button size.
              default: default
              options:
                 small: Small
                 default: Default
                 large: Large
            items:
              overrideable: false
              type: collection.list
              array: true
              label: Menu Items
              description: Create each item to appear in the menu.
              value: name
              ajax: true
              fields:
                .title:
                  type: input.text
                  label: Title
                  description: Customize the menu item title.
                  placeholder: Item Title
                .link:
                  type: input.text
                  label: Link
                  description: Specify the link.
                  placeholder: http://
                .link_target:
                  type: select.selectize
                  label: Target
                  description: Open the link in a same or new window.
                  placeholder: 'Select...'
                  default: _self
                  options:
                      _self: Self
                      _blank: New Window
                .dropdown:
                  type: collection.list
                  array: true
                  label: Subnav Items
                  description: Create a list of items with dropdown.
                  value: name
                  ajax: true
                  fields:
                    .dropdown_title:
                      type: input.text
                      label: Title
                      description: Customize the title.
                      placeholder: Title
                    .dropdown_link:
                      type: input.text
                      label: Link
                      description: Specify the link.
                      placeholder: http://
                    .dropdown_link_target:
                      type: select.selectize
                      label: Target
                      description: Open the link in a same or new window.
                      placeholder: 'Select...'
                      default: _self
                      options:
                          _self: Self
                          _blank: New Window
            social_items:
              overrideable: false
              type: collection.list
              array: true
              label: Social Items
              description: Create each item to appear in the list row.
              value: name
              ajax: true
              fields:
                .social_icon:
                  type: input.icon
                  label: Social Icon
                  default: fa fa-facebook
                .social_text:
                  type: input.text
                  label: Text
                .social_link:
                  type: input.text
                  label: Link
            content:
              type: textarea.textarea
              label: Content
              placeholder: Enter the content
            class:
              type: input.selectize
              label: CSS Classes
              description: CSS class name for the particle.
        _tab_style:
          label: Style
          overridable: false
          fields:
            offcanvas_settings:
              type: separator.note
              class: alert alert-info
              content: 'Offcanvas'
            close_button:
              type: input.checkbox
              label: Close Icon
              description: Use this option to create a close button and enable its functionality.
              overridable: false
              default: true
            overlay:
              type: input.checkbox
              label: Overlay
              description: Use this option to add an overlay, blanking out the page.
              overridable: false
              default: false
            animation_mode:
              type: select.select
              label: Animation
              description: You can actually choose between different animation modes for the off-canvas' entrance.
              default: slide
              options:
                slide: Slide
                push: Push
                reveal: Reveal
                none: None
            flip_offcanvas:
              type: input.checkbox
              label: Flip Mode
              description: Use this option to adjust its alignment, so that it slides in from the right.
              overridable: false
              default: false
            show_divider:
              type: input.checkbox
              label: Divider
              description: Use this option to create a divider separating offcanvas contents.
              overridable: false
              default: false
            content_order:
              type: select.select
              label: Order
              description: Define the order of the offcanvas contents.
              default: 1
              options:
                1: Menu, Content, Social
                2: Menu, Social, Content
                3: Content, Menu, Social
                4: Social, Menu, Content
                5: Social, Content, Menu
                6: Content, Social, Menu
            offcanvas_width:
              type: input.number
              min: 220
              label: Offcanvas Width
              description: Customize the width for offcanvas bar, leave default if not needed.
              placeholder: 350
            customize_bar_background:
              type: input.colorpicker
              label: Background Color
              description: Customize the background color for offcanvas bar.
            offcanvas_inverse:
              type: select.select
              label: Inverse Color
              description: Set light or dark color mode for nav icon, buttons and controls.
              default: default
              options:
                default: None
                light: Light
                dark: Dark              
            nav_settings:
              type: separator.note
              class: alert alert-info
              content: 'Nav settings'
            nav_style:
              type: select.select
              label: Nav Style
              description: Select the nav style.
              default: blank
              options:
                 blank: None
                 default: Default
                 primary: Primary
            multiple_open:
              type: input.checkbox
              label: Multiple open subnavs
              default: false
            center_nav:
              type: input.checkbox
              label: Center Nav
              description: Use this option to center nav items.
              overridable: false
              default: false
            customize_nav_color:
              type: input.colorpicker
              label: Nav Color
              description: Customize the nav item color if needed.
            color_fallback:
              type: input.checkbox
              label: Force icon color
              description: If you use white background color, check this option to inverse the style of icon color.
              overridable: false
              default: false
            nav_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            social_settings:
              type: separator.note
              class: alert alert-info
              content: 'Social Settings'
            social_bg_color:
              type: input.colorpicker
              label: Background Color
              description: Customize the background color for social icons.
            social_color:
              type: input.colorpicker
              label: Customize Icon Color
              description: Customize the color for social icons.
            social_bg_hcolor:
              type: input.colorpicker
              label: Background Hover
              description: Customize the background color on hover/active/focus for social icons.
            social_hcolor:
              type: input.colorpicker
              label: Icon Hover
              description: Customize the color on hover/active/focus for social icons.
            social_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            content_settings:
              type: separator.note
              class: alert alert-info
              content: 'Content Settings'
            customize_content_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the content color.
            customize_content_fontsize:
              type: input.number
              label: Font Size
              min: 0
              description: Customize the content text font size.
            content_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
        _tab_general:
          label: General
          overridable: false
          fields:
            particle_title_info:
              type: separator.note
              class: alert alert-info
              content: 'Particle Title Style'
            particle_title:
              type: input.text
              label: Title
              description: Add an optional particle title.
              placeholder: Enter particle title
            particle_title_style:
              type: select.select
              label: Style
              description: Title styles differ in font-size but may also come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            particle_title_decoration:
              type: select.select
              label: Decoration
              description: Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
              default: none
              options:
                 none: None
                 divider: Divider
                 bullet: Bullet
                 line: Line
            particle_title_align:
              type: select.select
              label: Alignment
              description: Center, left and right alignment for Particle title.
              default: inherit
              options:
                  inherit: Inherit
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            particle_predefined_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            particle_title_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the title color instead using predefined color mode. Set the Predefined color to None before using this color customization mode.
            particle_title_fontsize:
              type: input.number
              label: Font Size
              description: Customize the particle title font size.
              min: 0
            particle_title_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            general_content_info:
              type: separator.note
              class: alert alert-info
              content: 'General Particle Settings'
            align:
              type: select.select
              label: Text Alignment
              description: Center, left and right alignment may depend on a breakpoint and require a fallback.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            breakpoint:
              type: select.select
              label: Alignment Breakpoint
              description: Define the device width from which the alignment will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            fallback:
              type: select.select
              label: Alignment Fallback
              description: Define an alignment fallback for device widths below the breakpoint.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            g_maxwidth:
              type: select.select
              label: Max Width
              description: Set the maximum content width.
              default: inherit
              options:
                  inherit: None
                  small: Small
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  xxlarge: XX-Large
            g_maxwidth_alignment:
              type: select.select
              label: Max Width Alignment
              description: Define the alignment in case the container exceeds the element's max-width.
              default: left
              options:
                  left: Left
                  center: Center
                  right: Right
            g_maxwidth_breakpoint:
              type: select.select
              label: Max Width Breakpoint
              description: Define the device width from which the element's max-width will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            margin:
              type: select.select
              label: Margin
              description: Set the vertical margin.
              default: inherit
              options:
                  inherit: Keep existing
                  small: Small
                  default: Default
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  remove-vertical: None
            visibility:
              type: select.select
              label: Visibility
              description: Display the element only on this device width and larger.
              default: inherit
              options:
                  inherit: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            general_animation_info:
              type: separator.note
              class: alert alert-info
              content: 'Animation Settings'
            animation:
              type: select.select
              label: Animation
              description: Apply an animation to particles once they enter the viewport. This will animate all particles inside the section.
              default: inherit
              options:
                  inherit: None
                  fade: Fade
                  scale-up: Scale Up
                  scale-down: Scale Down
                  slide-top-small: Slide Top Small
                  slide-bottom-small: Slide Bottom Small
                  slide-left-small: Slide Left Small
                  slide-right-small: Slide Right Small
                  slide-top-medium: Slide Top Medium
                  slide-bottom-medium: Slide Bottom Medium
                  slide-left-medium: Slide Left Medium
                  slide-right-medium: Slide Right Medium
                  slide-top: Slide Top 100%
                  slide-bottom: Slide Bottom 100%
                  slide-left: Slide Left 100%
                  slide-right: Slide Right 100%
            animation_delay:
              type: input.number
              label: Animation Delay
              description: Set the delay animations for particle. Delay time in ms.
              min: 0
              placeholder: 200
            animation_repeat:
              type: select.select
              label: Animation Repeat
              description: Repeat an animation to particle once it enter the viewport.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
    copyright:
      type: separator.note
      class: alert alert-success
      content: 'JL Offcanvas Content <strong>Version: 2.1.3</strong> Copyright (C) <a href="https://joomlead.com/" target="_blank">https://joomlead.com</a> | <a href="https://joomlead.com/g5/docs/offcanvas-content-particle-documentation/" target="_blank">Documentation</a>'
