<% 
var menu_gettingstarted = {
  labelheading:true,
  backlink:true,
  label: 'Getting Started', 
  link: 'gettingstarted',
  linkclass:'icon icon-tv',
  links:[{
    label:'Other Frameworks',
    link:'gettingstarted-otherframeworks',
    linkclass:'icon icon-tv'
  },{
    label:'Methodology',
    link:'gettingstarted-methodology',
    linkclass:'icon icon-tv'
  }]
};
var menu_color = {
  labelheading:true,
  backlink:true,
  label: 'Colors', 
  link: 'colors',
  linkclass:'icon icon-tv',
  links:[{
    label:'Borders',
    link:'colors-borders',
    linkclass:'icon icon-tv'
  },{
    label:'Backgrounds',
    link:'colors-backgrounds',
    linkclass:'icon icon-tv'
  },{
    label:'Text',
    link:'colors-text',
    linkclass:'icon icon-tv'
  },{
    label:'Shadows',
    link:'colors-shadows',
    linkclass:'icon icon-tv'
  }]
};

var menu_type = {
  labelheading:true,
  backlink:true,
  label: 'Typograpy', 
  link: 'typography',
  linkclass:'icon icon-tv',
  links:[{
    label:'Text Size',
    link:'typography-textsize',
    linkclass:'icon icon-tv'
  },{
    label:'Body Copy',
    link:'typography-bodycopy',
    linkclass:'icon icon-tv'
  },{
    label:'Font Classes',
    link:'typography-fontclasses',
    linkclass:'icon icon-tv'
  },{
    label:'Alignment Classes',
    link:'typography-alignmentclasses',
    linkclass:'icon icon-tv'
  },{
    label:'Line Height',
    link:'typography-lineheight',
    linkclass:'icon icon-tv'
  },{
    label:'Lists Classes',
    link:'typography-listclasses',
    linkclass:'icon icon-tv'
  }]
};

var menu_layout = {
  labelheading:true,
  backlink:true,
  label: 'Layout', 
  link: 'layout',
  linkclass:'icon icon-tv',
  links:[{
    labelheading:true,
    backlink:true,
    label:'Grid',
    link:'layout-grid',
    linkclass:'icon icon-tv',
    links:[{
      label:'Basic Grid',
      link:'layout-grid-basicgrid',
      linkclass:'icon icon-tv'
    },{
      label:'Nested Grid',
      link:'layout-grid-nestedgrid',
      linkclass:'icon icon-tv'
    },{
      label:'Responsive Grid',
      link:'layout-grid-responsivegrid',
      linkclass:'icon icon-tv'
    }]
  },{
    labelheading:true,
    backlink:true,
    label:'Positioning',
    link:'layout-positioning',
    linkclass:'icon icon-tv',
    links:[{
      label:'Floats',
      link:'layout-positioning-floats',
      linkclass:'icon icon-tv'
    },{
      label:'Z-index',
      link:'layout-positioning-zindex',
      linkclass:'icon icon-tv'
    },{
      label:'Positions',
      link:'layout-positioning-positions',
      linkclass:'icon icon-tv'
    }]
  },{
    labelheading:true,
    backlink:true,
    label:'Box Sizing',
    link:'layout-boxsizing',
    linkclass:'icon icon-tv',
    links:[{
      label:'Margins',
      link:'layout-boxsizing-margins',
      linkclass:'icon icon-tv'
    },{
      label:'Paddings',
      link:'layout-boxsizing-paddings',
      linkclass:'icon icon-tv'
    }]
  },{
    labelheading:true,
    backlink:true,
    label:'Height & Width',
    link:'layout-heightwidth',
    linkclass:'icon icon-tv',
    links:[{
      label:'Height',
      link:'layout-heightwidth-height',
      linkclass:'icon icon-tv'
    },{
      label:'Width',
      link:'layout-heightwidth-width',
      linkclass:'icon icon-tv'
    }]
  },{
    labelheading:true,
    backlink:true,
    label:'Containers',
    link:'layout-containers',
    linkclass:'icon icon-tv',
    links:[{
      label:'Height Containers',
      link:'layout-containers-height',
      linkclass:'icon icon-tv'
    },{
      label:'Width Containers',
      link:'layout-containers-width',
      linkclass:'icon icon-tv'
    },{
      label:'Content Containers',
      link:'layout-containers-content',
      linkclass:'icon icon-tv'
    },{
      label:'Other Containers',
      link:'layout-containers-other',
      linkclass:'icon icon-tv'
    }]
  }]
};
var menu_responsive = {
  labelheading:true,
  backlink:true,
  label: 'Responsive', 
  link: 'responsive',
  linkclass:'icon icon-tv',
  links:[{
    label:'Visibility',
    link:'responsive-visibility',
    linkclass:'icon icon-tv'
  },{
    label:'Grid',
    link:'responsive-grid',
    linkclass:'icon icon-tv'
  },{
    label:'Layout',
    link:'responsive-layout',
    linkclass:'icon icon-tv'
  },{
    label:'Nav Elements',
    link:'responsive-navelements',
    linkclass:'icon icon-tv'
  }]
};

var menu_customize = {
  labelheading:false,
  backlink:false,
  label: 'Customize', 
  link: 'customize',
  linkclass:'icon icon-tv'
};

var menu_styleguide = {
  labelheading:false,
  backlink:false,
  label: 'Style Guide', 
  link: 'styleguide',
  // linkclass:'icon icon-tv',
  // links:[{
  //   label:'Borders',
  //   link:'colors-borders',
  //   linkclass:'icon icon-tv'
  // },{
  //   label:'Backgrounds',
  //   link:'colors-backgrounds',
  //   linkclass:'icon icon-tv'
  // },{
  //   label:'Text',
  //   link:'colors-text',
  //   linkclass:'icon icon-tv'
  // },{
  //   label:'Shadows',
  //   link:'colors-shadows',
  //   linkclass:'icon icon-tv'
  // }]
};

var heading = { 
  labelheading:true,
  label: 'Home', 
  link: 'top',
  linkclass:'navlinks-section',
  links:[
    menu_gettingstarted,
    menu_color,
    menu_type,
    menu_layout,
    menu_responsive,
    menu_customize,
    menu_styleguide
  ] 
} ;

  var getNavHtml = function(nav){ %>
<div class="ts-pushmenu-mp-level">
  <%if(nav.labelheading == true){%>
    <h4 class="" data-href="#<%- nav.link %>" ><%- nav.label %></h4>
  <%}%>
  <% if(typeof nav !=='undefined' && nav.links && nav.links.length>0){%>
  <%if(nav.backlink == true){%>
          <a class="ts-pushmenu-mp-back" href="#color">Back</a>
  <%}%>
  <ul>
    <%nav.links.forEach(function(navlinkobj,i){ %>
        <li class="icon icon-arrow-left"><a class="" 

<% if(!navlinkobj.backlink){%>data-href="#<%- navlinkobj.link %>"<%}%> ><%- navlinkobj.label%></a>
        <%if(navlinkobj.links){
            getNavHtml(navlinkobj);
          }%>
        </li>
        <%
      })%>
  </ul>
  <%}%>
</div>
  <%};

  getNavHtml(heading);
 %>