header
  if no_nav == false
    nav.top-nav
      .container
        .nav-wrapper
          a.page-title #{page}
  .container
    a.button-collapse.top-nav(href='#', data-activates='nav-mobile', class=(no_nav == false ? "full hide-on-large-only" : "" + "waves-effect waves-light circle hide-on-large-only"))
      i.material-icons menu
  ul#nav-mobile.side-nav.fixed
    li(class="logo")
      a#logo-container.brand-logo(href='/')
        object#front-page-logo(type='image/svg+xml', data='res/materialize.svg') Your browser does not support SVG
    li(class="search")
      div.search-wrapper.card
        input(id="search")
        i.material-icons search
        div.search-results
    li.bold(class=(page == "About" ? "active" : ""))
      a.waves-effect.waves-teal(href='about.html') About
    li.bold(class=(page == "Getting Started" ? "active" : ""))
      a.waves-effect.waves-teal(href='getting-started.html') Getting Started

    li.no-padding
      ul.collapsible.collapsible-accordion
        li.bold
          a.collapsible-header(class=(page == "Sass" || page == "Typography" || page == "Color" || page == "Shadow" || page == "Grid" || page == "Media CSS" || page == "Pulse" || page == "Table" || page == "CSS Transitions" || page == "Helpers" ? "active" : "")+" waves-effect waves-teal")
            | CSS
          .collapsible-body
            ul
              li(class=(page == "Color" ? "active" : ""))
                a(href='color.html') Color
              li(class=(page == "Grid" ? "active" : ""))
                a(href='grid.html') Grid
              li(class=(page == "Helpers" ? "active" : ""))
                a(href='helpers.html') Helpers
              li(class=(page == "Media CSS" ? "active" : ""))
                a(href='media-css.html') Media
              li(class=(page == "Pulse" ? "active" : ""))
                a(href='pulse.html') Pulse
              li(class=(page == "Sass" ? "active" : ""))
                a(href='sass.html') Sass
              li(class=(page == "Shadow" ? "active" : ""))
                a(href='shadow.html') Shadow
              li(class=(page == "Table" ? "active" : ""))
                a(href='table.html') Table
              li(class=(page == "CSS Transitions" ? "active" : ""))
                a(href='css-transitions.html') Transitions
              li(class=(page == "Typography" ? "active" : ""))
                a(href='typography.html') Typography
        li.bold
          a.collapsible-header(class=(page == "Forms" || page == "Buttons" || page == "Navbar" || page == "Cards" || page == "Chips" || page == "Preloader" || page == "Pagination" || page == "Collections" || page == "Badges" || page == "Breadcrumbs" || page == "Footer" ? "active" : "" || page == "Icons" ? "active" : "")+" waves-effect waves-teal")
            | Components
          .collapsible-body
            ul
              li(class=(page == "Badges" ? "active" : ""))
                a(href='badges.html') Badges
              li(class=(page == "Buttons" ? "active" : ""))
                a(href='buttons.html') Buttons
              li(class=(page == "Breadcrumbs" ? "active" : ""))
                a(href='breadcrumbs.html') Breadcrumbs
              li(class=(page == "Cards" ? "active" : ""))
                a(href='cards.html') Cards
              li(class=(page == "Chips" ? "active" : ""))
                a(href='chips.html') Chips
              li(class=(page == "Collections" ? "active" : ""))
                a(href='collections.html') Collections
              li(class=(page == "Footer" ? "active" : ""))
                a(href='footer.html') Footer
              li(class=(page == "Forms" ? "active" : ""))
                a(href='forms.html') Forms
              li(class=(page == "Icons" ? "active" : ""))
                a(href='icons.html') Icons
              li(class=(page == "Navbar" ? "active" : ""))
                a(href='navbar.html') Navbar
              li(class=(page == "Pagination" ? "active" : ""))
                a(href='pagination.html') Pagination
              li(class=(page == "Preloader" ? "active" : ""))
                a(href='preloader.html') Preloader
        li.bold
          a.collapsible-header(class=(page == "Dialogs" || page == "Modals" || page == "Dropdown" || page == "FeatureDiscovery" || page == "Tabs" || page == "ScrollFire" || page == "Scrollspy" || page == "SideNav" || page == "Pushpin" || page == "Waves" || page == "Media" || page == "Transitions" || page == "Parallax" || page == "Collapsible" ? "active" : "" || page == "Carousel" ? "active" : "")+" waves-effect waves-teal")
            | JavaScript
          .collapsible-body
            ul
              li(class=(page == "Carousel" ? "active" : ""))
                a(href='carousel.html') Carousel
              li(class=(page == "Collapsible" ? "active" : ""))
                a(href='collapsible.html') Collapsible
              li(class=(page == "Dialogs" ? "active" : ""))
                a(href='dialogs.html') Dialogs
              li(class=(page == "Dropdown" ? "active" : ""))
                a(href='dropdown.html') Dropdown
              li(class=(page == "FeatureDiscovery" ? "active" : ""))
                a(href='feature-discovery.html') FeatureDiscovery
              li(class=(page == "Media" ? "active" : ""))
                a(href='media.html') Media
              li(class=(page == "Modals" ? "active" : ""))
                a(href='modals.html') Modals
              li(class=(page == "Parallax" ? "active" : ""))
                a(href='parallax.html') Parallax
              li(class=(page == "Pushpin" ? "active" : ""))
                a(href='pushpin.html') Pushpin
              li(class=(page == "ScrollFire" ? "active" : ""))
                a(href='scrollfire.html') ScrollFire
              li(class=(page == "Scrollspy" ? "active" : ""))
                a(href='scrollspy.html') Scrollspy
              li(class=(page == "SideNav" ? "active" : ""))
                a(href='side-nav.html') SideNav
              li(class=(page == "Tabs" ? "active" : ""))
                a(href='tabs.html') Tabs
              li(class=(page == "Transitions" ? "active" : ""))
                a(href='transitions.html') Transitions
              li(class=(page == "Waves" ? "active" : ""))
                a(href='waves.html') Waves

    li.bold(class=(page == "Mobile" ? "active" : ""))
      a.waves-effect.waves-teal(href='mobile.html') Mobile
    li.bold(class=(page == "Showcase" ? "active" : ""))
      a.waves-effect.waves-teal(href='showcase.html') Showcase
    li.bold(class=(page == "Themes" ? "active" : ""))
      a.waves-effect.waves-teal(href='themes.html') Themes
        span.new.badge