extends _layout.pug
include _mixins.pug

block content
  .docs-container.off-canvas.off-canvas-sidebar-show
    .docs-navbar
      a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
        i.icon.icon-menu
      a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
    #sidebar.docs-sidebar.off-canvas-sidebar
      .docs-brand
        a.docs-logo(href='/')
          img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
          h2 SPECTRE
      .docs-nav
        .accordion-container
          +docs-accordion(
            'getting-started',
            'Getting started',
            {url: '#introduction', name: 'Introduction'},
            {url: '#installation', name: 'Installation'},
            {url: '#custom', name: 'Custom version'},
            {url: '#browsers', name: 'Browser support'},
            {url: '#whatsnew', name: 'What\'s new'}
          )
          +docs-accordion(
            'elements',
            'Elements',
            {url: '#typography', name: 'Typography'},
            {url: '#tables', name: 'Tables'},
            {url: '#buttons', name: 'Buttons'},
            {url: '#forms', name: 'Forms'},
            {url: '#icons', name: 'Icons'},
            {url: '#labels', name: 'Labels'},
            {url: '#code', name: 'Code'},
            {url: '#media', name: 'Media'}
          )
          +docs-accordion(
            'layout',
            'Layout',
            {url: '#flexbox', name: 'Flexbox grid'},
            {url: '#responsive', name: 'Responsive'},
            {url: '#navbar', name: 'Navbar'}
          )
          +docs-accordion(
            'components',
            'Components',
            {url: '#accordions', name: 'Accordions'},
            {url: '#avatars', name: 'Avatars'},
            {url: '#badges', name: 'Badges'},
            {url: '#bars', name: 'Bars'},
            {url: '#breadcrumbs', name: 'Breadcrumbs'},
            {url: '#cards', name: 'Cards'},
            {url: '#chips', name: 'Chips'},
            {url: '#empty', name: 'Empty states'},
            {url: '#menu', name: 'Menu'},
            {url: '#modals', name: 'Modals'},
            {url: '#nav', name: 'Nav'},
            {url: '#pagination', name: 'Pagination'},
            {url: '#panels', name: 'Panels'},
            {url: '#popovers', name: 'Popovers'},
            {url: '#steps', name: 'Steps'},
            {url: '#tabs', name: 'Tabs'},
            {url: '#tiles', name: 'Tiles'},
            {url: '#toasts', name: 'Toasts'},
            {url: '#tooltips', name: 'Tooltips'}
          )
          +docs-accordion(
            'utilities',
            'Utilities',
            {url: '#colors', name: 'Colors'},
            {url: '#cursors', name: 'Cursors'},
            {url: '#display', name: 'Display'},
            {url: '#divider', name: 'Divider'},
            {url: '#loading', name: 'Loading'},
            {url: '#position', name: 'Position'},
            {url: '#shapes', name: 'Shapes'},
            {url: '#text', name: 'Text'}
          )
          +docs-accordion(
            'experimentals',
            'Experimentals',
            {url: '#autocomplete', name: 'Autocomplete'},
            {url: '#calendars', name: 'Calendars'},
            {url: '#carousels', name: 'Carousels'},
            {url: '#comparison', name: 'Comparison sliders'},
            {url: '#filters', name: 'Filters'},
            {url: '#meters', name: 'Meters'},
            {url: '#off-canvas', name: 'Off-canvas'},
            {url: '#parallax', name: 'Parallax'},
            {url: '#progress', name: 'Progress'},
            {url: '#sliders', name: 'Sliders'},
            {url: '#timelines', name: 'Timelines'}
          )
  
    a.off-canvas-overlay(href='#close')
    .off-canvas-content
      #content.docs-content
        block docs-content