nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
  header.side-nav-search.st-input-wrapper
    form.st-input-inner
      label(for="search-io" class="is-hidden") Search Docs
      input(type="search" id="search-io" placeholder="SEARCH DOCS...")
    button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>

  ul(class="side-nav-primary" ng-class="showDocsNav ? 'is-visible' : ''")
    if current.path[2]
      for page, slug in public.docs[current.path[1]][current.path[2]]._data
        name = page.menuTitle || page.title
        selected =  current.path[3] == slug ? 'is-selected':''


        // PRIMARY NAVIGATION
        li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>


          // SECONDARY NAVIGATION
          if selected
            secondarySection = public.docs[current.path[1]][current.path[2]][current.path[3]]

            if secondarySection
              listType = public.docs[current.path[1]][current.path[2]][current.path[3]]._data._listtype || 'unordered'
              ordered = listType == "ordered" ? "is-ordered" : ""
              number = 0

              ul(class="side-nav-secondary #{ordered}")

                for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data
                  if slug != "index"
                    name = page.menuTitle || page.title
                    selected =  current.path[4] == slug ? 'is-selected':''
                    num = (listType == "ordered") ? number++ : ''

                    if slug != "_listtype"
                      if num
                        li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button>#{num}.  #{page.title}</a>

                      else
                        li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button>#{page.title}</a>


                  // TERTIARY NAVIGATION
                  if selected
                    tertiarySection = public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]

                    if tertiarySection
                      ul.side-nav-tertiary
                        for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
                          name = page.menuTitle || page.title
                          selected =  current.path[4] == slug ? 'is-selected':''
                          li(class="#{selected}")<a  href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button>#{name}</a>