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
      .btns.d-flex
        input.docs-search.form-input(type="text" placeholder="Search Docs")
        a.btn.btn-primary.ml-1(href='https://github.com/kingajax/spectre-dark' target='_blank') GitHub

    #sidebar.docs-sidebar.off-canvas-sidebar
      .docs-brand
        if slug != parent
          a.docs-logo(href='../index.html')
            img(src='../img/spectre-logo.svg' alt='Spectre.css CSS Framework')
            h2 SPECTRE DARK
            br
            small.label.label-secondary.text-bold DOCS
        else
          a.docs-logo(href='index.html')
            img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework—now at dark')
            h2 SPECTRE DARK
            br
            small.label.label-secondary.text-bold DOCS
      .docs-nav
        .accordion-container
          +docs-accordion(
            'getting-started',
            'Getting started',
            {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.css'},
            {url: 'labels', name: 'Labels'},
            {url: 'code', name: 'Code'},
            {url: 'media', name: 'Media'}
          )
          +docs-accordion(
            'layout',
            'Layout',
            {url: 'grid', name: 'Flexbox grid'},
            {url: 'responsive', name: 'Responsive'},
            {url: 'hero', name: 'Hero'},
            {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: 'viewer-360', name: '360-Degree Viewer'},
            {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

  script(type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js")
  script.
    docsearch({
    apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
    indexName: 'picturepan2_spectre',
    inputSelector: '.docs-search',
    debug: true
    });