Sengi-Windows-MacOS-Linux/src/app/components/left-side-bar/left-side-bar.component.html

<div class="left-bar">
    <a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message"
        (click)="createNewStatus()" (contextmenu)="createNewStatus()" *ngIf="hasAccounts">
        <fa-icon [icon]="faCommentAlt"></fa-icon>
    </a>
    <a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="openSearch()"
        (contextmenu)="openSearch()" *ngIf="hasAccounts">
        <fa-icon [icon]="faSearch"></fa-icon>
    </a>

    <div *ngIf="!iconMenuIsDraggable">
        <div *ngFor="let account of accounts">
            <app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)"
                (openMenuNotify)="onOpenMenuNotify($event)">
            </app-account-icon>
        </div>
    </div>

    <div *ngIf="iconMenuIsDraggable" cdkDropList [cdkDropListData]="accounts" (cdkDropListDropped)="onDrop($event)">
        <div *ngFor="let account of accounts" cdkDrag class="draggable">
            <fa-icon class="draggable__icon" [icon]="faArrowsAltV"></fa-icon>
            <img class="draggable__avatar" src="{{ account.avatar }}" />
        </div>
    </div>


    <a class="left-bar-button left-bar-button--add left-bar-link" [ngClass]="{'no-accounts': hasAccounts === false }"
        href title="add new account" (click)="addNewAccount()" (contextmenu)="addNewAccount()">
        <fa-icon [icon]="faPlus"></fa-icon>
    </a>


    <a class="left-bar-button left-bar-button--scheduled left-bar-button--bottom left-bar-link" href
        title="scheduled statuses" *ngIf="hasAccounts && hasScheduledStatuses" (click)="openScheduledStatuses()"
        (contextmenu)="openScheduledStatuses()">
        <fa-icon [icon]="faCalendarAlt"></fa-icon>
    </a>

    <a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings"
        (click)="openSettings()" (contextmenu)="openSettings()">
        <fa-icon [icon]="faCog"></fa-icon>
    </a>
</div>