index.pug

mixin mapper(map, path = '')
  - for (const [name, items] of Object.entries(map))
      if (Object.values(items).length > 0)
        li.uk-parent
          a(href='#') #{name}
          ul.uk-nav-parent-icon.uk-nav-sub(uk-nav='multiple: true' data-category)
            +mapper(items, path + '/' + name)
      else
        li
          a.uk-display-inline-block(href='#' + path + '/' + name data-updatable data-item) #{name} 
          a.uk-display-inline-block.uk-align-right.uk-margin-remove(href='#' uk-icon="icon: code; ratio: 0.7" uk-toggle='target: #explanation; animation: uk-animation-fade' style="padding: 2.5px;" data-updatable data-tutorial-link="#" + path + '/' + name + '#tutorial')
          span.uk-margin-remove.uk-display-inline-block.uk-label.uk-align-right(style="font-size: 10px; margin: 3px 10px 3px 0px !important; opacity: 0.5;")
            :levelType(path)
              
mixin menu(classes, mobile = false)
  div(class="uk-width-1-4@m " + classes uk-height-viewport)
    .uk-background-muted.uk-padding.uk-height-viewport.sidebar(style=mobile?"padding-bottom: 100px;":"")
      h1.uk-nav-header Examples &nbsp;&nbsp;<b>V 2.2.0</b> (Beta)
      div.uk-width-1-1
        include _search.pug
        ul.uk-nav-default.uk-nav-parent-icon(uk-nav='multiple: true')
          li.uk-padding-small.uk-padding-remove-bottom.uk-padding-remove-left
            a#tutorial-open(href='#' uk-toggle='target: #explanation; animation: uk-animation-fade' data-updatable data-tutorial-link="#")
              span.uk-margin-small-right(uk-icon='icon: code')
              |  View tutorial
          
          li.uk-nav-divider.uk-padding-small 
              
          +mapper(map)
      
          li.uk-nav-header Other
          li
            a(href='https://github.com/WhitestormJS/whs.js/releases' target='_blank')
              span.uk-margin-small-right(uk-icon='icon: download')
              |  Install / Download
          li
            a(href='https://whs.io/' target='_blank')
              span.uk-margin-small-right(uk-icon='icon:  file-edit')
              |  Documentation
          li.uk-nav-divider
          li
            a(href='https://github.com/WhitestormJS/whs.js/issues' target='_blank')
              span.uk-margin-small-right(uk-icon='icon: comments')
              |  Make an issue
          li
            a(href='https://github.com/WhitestormJS/whs.js' target='_blank')
              span.uk-margin-small-right(uk-icon='icon: github')
              |  GitHub (source code)

html
  head
    include meta.pug
    style.
      @import url('https://fonts.googleapis.com/css?family=Cabin|Fjalla+One|Montserrat|Oxygen');
    script(src='/assets/js/slideout.min.js')
    include style.pug
  body
    div.uk-offcanvas-content
      nav.uk-navbar.uk-navbar-container.uk-margin.uk-margin-remove-bottom(class="uk-hidden@m")
        .uk-navbar-left
          a.uk-navbar-toggle(uk-navbar-toggle-icon='', href='#' uk-toggle="target: #sidebar-menu")
            
      div#sidebar-menu(uk-offcanvas="bg-close: false" style="margin-top: 80px;" class="uk-width-1-4@m")
        +menu("uk-width-1-1@m", true)
          
    .uk-grid-collapse.content-transform(class='uk-child-width-expand@s' uk-grid uk-height-viewport)
      +menu("uk-visible@m")

      div.content-transform.uk-background-primary.uk-padding.uk-height-viewport.uk-padding-remove.uk-position-relative#panel
        div.uk-position-absolute.uk-light.uk-align-center.uk-position-center(uk-spinner="ratio: 2")
        iframe.uk-position-absolute.uk-transition-fade.uk-position-left(src="/no")
        div.uk-width-1-1.uk-position-absolute.uk-padding-large#explanation(aria-hidden="true" hidden)
          
          article.uk-comment#explanation-holder

    script(src='/assets/js/script.js')