agent/packages/uhk-web/src/app/components/side-menu/side-menu.component.html

<ul class="menu--top">
    <li class="sidebar__level-0--item">
        <div class="sidebar__level-0">
            <i class="uhk-icon uhk-icon-0401-usb-stick rotate-right"></i>
            <auto-grow-input [ngModel]="state.deviceName"
                             [maxParentWidthPercent]="0.65"
                             [css]="'side-menu-pane-title__name'"
                             [disabled]="state.restoreUserConfiguration || state.updatingFirmware"
                             (ngModelChange)="editDeviceName($event)"></auto-grow-input>
            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'device')"></i>
        </div>
        <ul [@toggler]="animation['device']">
            <li class="sidebar__level-1--item">
                <div class="sidebar__level-1">
                    <i class="fa fa-sliders"></i> Device
                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'configuration')"></i>
                </div>
                <ul [@toggler]="animation['configuration']">
                    <li class="sidebar__level-2--item"
                        *ngIf="!state.restoreUserConfiguration">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/mouse-speed']"
                               [class.disabled]="state.updatingFirmware">Mouse speed</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item"
                        *ngIf="!state.restoreUserConfiguration">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/led-brightness']"
                               [class.disabled]="state.updatingFirmware">LED brightness</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item"
                        *ngIf="!state.restoreUserConfiguration">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/configuration']"
                               [class.disabled]="state.updatingFirmware">Configuration</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item"
                        *ngIf="state.restoreUserConfiguration">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/restore-user-configuration']">Fix configuration</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/firmware']"
                               [class.disabled]="state.updatingFirmware">Firmware</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="sidebar__level-1--item"
                *ngIf="!state.restoreUserConfiguration">
                <div class="sidebar__level-1">
                    <i class="fa fa-keyboard-o"></i> Keymaps
                    <!--a [routerLink]="['/keymap/add']"
                       class="btn btn-default pull-right btn-sm"
                       [class.disabled]="updatingFirmware$ | async">
                        <i class="fa fa-plus"></i>
                    </a-->
                    <i class="fa fa-chevron-up pull-right"
                       (click)="toggleHide($event, 'keymap')"></i>
                </div>
                <ul [@toggler]="animation['keymap']">
                    <li *ngFor="let keymap of state.keymaps" class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/keymap', keymap.abbreviation]"
                               [class.disabled]="state.updatingFirmware">{{keymap.name}}</a>
                            <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"
                               title="This is the default keymap which gets activated when powering the keyboard."
                               data-toggle="tooltip" data-placement="bottom"></i>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="sidebar__level-1--item"
                *ngIf="!state.restoreUserConfiguration">
                <div class="sidebar__level-1">
                    <i class="fa fa-play"></i> Macros
                    <a (click)="addMacro()"
                       class="btn btn-default pull-right btn-sm"
                       [class.disabled]="state.updatingFirmware">
                        <i class="fa fa-plus"></i>
                    </a>
                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>
                </div>
                <ul [@toggler]="animation['macro']">
                    <li *ngFor="let macro of state.macros" class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/macro', macro.id]"
                               [class.disabled]="state.updatingFirmware">{{macro.name}}</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="sidebar__level-1--item" *ngIf="state.showAddonMenu">
                <div class="sidebar__level-1">
                    <i class="fa fa-puzzle-piece"></i> Add-on modules
                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'addon')"></i>
                </div>
                <ul [@toggler]="animation['addon']">
                    <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/add-on', 'Key cluster']"
                               [class.disabled]="state.updatingFirmware">Key cluster</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/add-on', 'Trackball']"
                               [class.disabled]="state.updatingFirmware">Trackball</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/add-on', 'Touchpad']"
                               [class.disabled]="state.updatingFirmware">Touchpad</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/add-on', 'Trackpoint']"
                               [class.disabled]="state.updatingFirmware">Trackpoint</a>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="sidebar__level-0--item" [routerLinkActive]="['active']">
        <div class="sidebar__level-0">
            <i class="uhk-icon uhk-icon-agent-icon"></i> Agent
            <i class="fa fa-chevron-up pull-right"
               (click)="toggleHide($event, 'agent')"></i>
        </div>
        <ul [@toggler]="animation['agent']">
            <!--li class="sidebar__level-2--item">
                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                    <a [routerLink]="['/settings']"
                       [class.disabled]="state.updatingFirmware">Settings</a>
                </div>
            </li-->
            <li class="sidebar__level-2--item">
                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                    <a [routerLink]="['/help']"
                       [class.disabled]="state.updatingFirmware">Help</a>
                </div>
            </li>
            <li class="sidebar__level-2--item">
                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                    <a [routerLink]="['/about']"
                       [class.disabled]="state.updatingFirmware">About</a>
                </div>
            </li>
        </ul>
    </li>
</ul>