// vertical menu start
.mega-menu-header
  .vertical-menu-main
    nav#main-nav
      // Sample menu definition
      ul#main-menu.sm.pixelstrap
        li
          .text-end.mobile-back
            | Back
            i.fa.fa-angle-right.ps-2(aria-hidden='true')
        li
          a(href='javascript:void(0)')
            i.mt-0(data-feather='command')
            | Mega menu
          ul.mega-menu
            li
              .card-body
                .row
                  .col-xl-3.list-unstyled
                    div
                      p.title
                        | Builder [BS4+] 
                        span.badge.badge-success.ms-2 New
                    div
                      a(href='javascript:;')  Page Builder 
                    div
                      a(href='javascript:;')  Form Builder
                    div
                      a(href='javascript:;')  Button Builder 
                    .mt-3
                      p.title Accordion
                    div
                      #accordionoc.default-according.style-1
                        .card
                          div
                            h5.mb-0
                              button.btn.btn-link.p-2(data-bs-toggle='collapse', data-bs-target='#collapseicon', aria-expanded='true', aria-controls='collapseicon')
                                | Accordion 1
                          #collapseicon.collapse.show(data-parent='#accordionoc')
                            .card-body.p-2
                              | Anim pariatur cliche reprehenderit.
                        .card
                          div
                            h5.mb-0
                              button.btn.btn-link.text-muted.collapsed.p-1(data-bs-toggle='collapse', data-bs-target='#collapseicon1', aria-expanded='false', aria-controls='collapseicon1')
                                | Accordion 2
                          #collapseicon1.collapse(data-parent='#accordionoc')
                            .card-body.p-2
                              | Anim pariatur cliche reprehenderit.
                        .card
                          div
                            h5.mb-0
                              button.btn.btn-link.text-muted.collapsed.p-1(data-bs-toggle='collapse', data-bs-target='#collapseicon2', aria-expanded='false', aria-controls='collapseicon2')
                                | Accordion 3
                          #collapseicon2.collapse(data-parent='#accordionoc')
                            .card-body.p-2
                              | Anim pariatur cliche reprehenderit.
                  .col-xl-2.list-unstyled.xs-mt
                    div
                      p.title Drill Down
                    .drilldown
                      .drilldown-container
                        .drilldown-root
                          div
                            a.font-primary.mt-0(href='javascript:void(0)') First Level Menu
                          div
                            a.ps-0(href='javascript:void(0)')
                              i.icon-support
                              |   Base 
                              span.float-end →
                            .drilldown-sub
                              .drilldown-back
                                a.font-primary.f-w-100(href='javascript:void(0)')
                                  span ←
                                  |  Second Level Menu
                              div
                                a(href='javascript:void(0)')
                                  i.fa.fa-angle-right
                                  |   State color
                              div
                                a(href='javascript:void(0)')
                                  i.fa.fa-angle-right
                                  |   Tabs 
                                  span.float-end →
                                .drilldown-sub
                                  .drilldown-back
                                    a.font-primary.f-w-100(href='javascript:void(0)')
                                      span ←
                                      |  Third Level Menu
                                  div
                                    a(href='javascript:void(0)')
                                      i.fa.fa-angle-right
                                      |   Bootstrap Tabs
                                  div
                                    a(href='javascript:void(0)')
                                      i.fa.fa-angle-right
                                      |   Line Tabs
                              div
                                a(href='javascript:void(0)')
                                  i.fa.fa-angle-right
                                  |   Typography
                              div
                                a(href='javascript:void(0)')
                                  i.fa.fa-angle-right
                                  |   Progress
                              div
                                a(href='javascript:void(0)')
                                  i.fa.fa-angle-right
                                  |   Model
                              div
                                a(href='javascript:void(0)')
                                  i.fa.fa-angle-right
                                  |   Alert
                              div
                                a(href='javascript:void(0)')
                                  i.fa.fa-angle-right
                                  |   Popover
                          div
                            a(href='javascript:void(0)')
                              i.icon-dropbox
                              |   Advanced
                          div
                            a(href='javascript:void(0)')
                              i.fa.fa-spin.fa-spinner
                              |   Animation
                          div
                            a(href='javascript:void(0)')
                              i.icon-package
                              |   Icons
                          div
                            a(href='javascript:void(0)')
                              i.icon-cloud-down
                              |   Buttons
                          div
                            a(href='javascript:void(0)')
                              i.icon-notepad
                              |   Forms
                          div
                            a.mb-0(href='javascript:void(0)')
                              i.icon-harddrives
                              |   Tables
                  .col-xl-3.galleria-list.clearfix.lg-mt
                    div
                      p.title Galleria
                    div
                      .galleria.row
                        .col-6
                          a(href='javascript:void(0)')
                            img(src='assets/images/slider/1.jpg', alt='')
                          h4.username.text-ellipsis
                            | Airi Satou
                            small Algerian
                        .col-6
                          a(href='javascript:void(0)')
                            img(src='assets/images/slider/2.jpg', alt='')
                          h4.username.text-ellipsis
                            | Fiona Green
                            small Korean
                        .col-6.mb-0
                          a(href='javascript:void(0)')
                            img(src='assets/images/slider/3.jpg', alt='')
                          h4.username.text-ellipsis.mb-0
                            | Gavin Joyce
                            small Indian
                        .col-6.mb-0
                          a(href='javascript:void(0)')
                            img(src='assets/images/slider/4.jpg', alt='')
                          h4.username.text-ellipsis.mb-0
                            | Howard Hatfield
                            small Japanese
                  .col-xl-4.list-unstyled.custom-nav-img.lg-mt
                    div
                      p.title Contact Form
                    div
                      form.theme-form
                        .form-group
                          label.col-form-label.pt-0
                            i.icon-user.pe-2
                            | Your Name
                          input.form-control(type='text', placeholder='Enter your name')
                        .form-group
                          label.col-form-label
                            i.icon-email.pe-2
                            | Your Email
                          input.form-control(type='email', placeholder='Enter your emailid')
                        .form-group
                          label.col-form-label
                            i.icon-comment.pe-2
                            | Your Message
                          textarea.form-control(placeholder='Enter your message', rows='2')
                        .form-group.mb-0
                          button.btn.btn-primary Send
// vertical menu ends