<!-- 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">

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

            <li class="treeview {% if pageselected in " outlets lan mqtt ups syslog backup " %}active menu-open{% endif %}">

                <a href="#">
                    <i class="fa fa-sliders"></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 {% if pageselected=="outlets" %}class="active" {% endif %}>
                        <a href="/outlets"><i class="fa fa-circle-o"></i> Outlets</a>
                    </li>

                    <li {% if pageselected=="lan" %}class="active" {% endif %}>
                        <a href="/lan"><i class="fa fa-circle-o"></i> LAN</a>
                    </li>

                    <li {% if pageselected=="mqtt" %}class="active" {% endif %}>
                        <a href="/mqtt"><i class="fa fa-circle-o"></i> MQTT</a>
                    </li>

                    <li {% if pageselected=="ups" %}class="active" {% endif %}>
                        <a href="/ups"><i class="fa fa-circle-o"></i> UPS</a>
                    </li>

                    <li {% if pageselected=="syslog" %}class="active" {% endif %}>
                        <a href="/syslog"><i class="fa fa-circle-o"></i> Syslog</a>
                    </li>

                    <li {% if pageselected=="backup" %}class="active" {% endif %}>
                        <a href="/backup"><i class="fa fa-circle-o"></i> Backup/Restore</a>
                    </li>

                </ul>
            </li>
        </ul>
    </section>
    <!-- /.sidebar -->
</aside>