openpdu/templates/common/sidebar-menu.html

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

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

                            <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="/lan"><i class="fa fa-circle-o"></i> LAN</a></li>

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

                                    {% if pageselected == "ups" %}
                                    <li class="active">
                                        {% else %}
                                        <li>
                                            {% endif %}
                                            <a href="/ups"><i class="fa fa-circle-o"></i> UPS</a></li>
                                        <li><a href="/syslog"><i class="fa fa-circle-o"></i> syslog</a></li>
                                        <li><a href="/backup"><i class="fa fa-circle-o"></i> backup</a></li>
                                        <li><a href="/restore"><i class="fa fa-circle-o"></i> restore</a></li>
                            </ul>
                            </li>
        </ul>
    </section>
    <!-- /.sidebar -->
</aside>