  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">

        {% if pageselected == "status" %}
        <li class="active">
        {% else %}
        <li>
        {% endif %}
          <a href="/">
            <i class="fa fa-dashboard"></i> <span>Status</span>
          </a>
        </li>

        {% if pageselected == "boards" %}
        <li class="active">
        {% else %}
        <li>
        {% endif %}
            <a href="/boards">
              <i class="fa fa-sliders"></i> <span>Boards</span>
            </a>
        </li>
  
        <li class="treeview">
          <a href="#">
            <i class="fa fa-gears"></i> <span>Settings</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="/settings/lan"><i class="fa fa-circle-o"></i> LAN</a></li>
            <li><a href="/settings/mqtt"><i class="fa fa-circle-o"></i> MQTT</a></li>
            <li><a href="/settings/syslog"><i class="fa fa-circle-o"></i> syslog</a></li>
            <li><a href="/settings/backup"><i class="fa fa-circle-o"></i> backup</a></li>
            <li><a href="/settings/restore"><i class="fa fa-circle-o"></i> restore</a></li>
          </ul>
        </li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>
