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>
            <input #deviceName cancelable
                   class="pane-title__name"
                   type="text"
                   (change)="editDeviceName($event.target.value)"
                   (keyup.enter)="deviceName.blur()"
                   (keyup)="calculateHeaderTextWidth($event.target.value)">
            <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">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/mouse-speed']"
                               [class.disabled]="updatingFirmware$ | async">Mouse speed</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/led-brightness']"
                               [class.disabled]="updatingFirmware$ | async">LED brightness</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/configuration']"
                               [class.disabled]="updatingFirmware$ | async">Configuration</a>
                        </div>
                    </li>
                    <li class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/device/firmware']"
                               [class.disabled]="updatingFirmware$ | async">Firmware</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="sidebar__level-1--item">
                <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 keymaps$ | async" class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/keymap', keymap.abbreviation]"
                               [class.disabled]="updatingFirmware$ | async">{{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">
                <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]="updatingFirmware$ | async">
                        <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 macros$ | async" class="sidebar__level-2--item">
                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
                            <a [routerLink]="['/macro', macro.id]"
                               [class.disabled]="updatingFirmware$ | async">{{macro.name}}</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="sidebar__level-1--item" *ngIf="showAddonMenu$ | async">
                <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]="updatingFirmware$ | async">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]="updatingFirmware$ | async">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]="updatingFirmware$ | async">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]="updatingFirmware$ | async">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']">Settings</a>
                </div>
            </li>
            <li class="sidebar__level-2--item">
                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                    <a [routerLink]="['/about']">About</a>
                </div>
            </li>
        </ul>
    </li>
</ul>