AlexAegis/loreplotter

<mat-toolbar>
    <mat-toolbar-row id="mainBar">
        <app-hamburger
            (openChange)="storeFacade.setSidebarOpen($event)"
            *ngIf="!(mediaLarge$ | async)"
            @leave
            [open]="sidebarOpen$ | async"
        ></app-hamburger>
        <mat-menu #appMenu="matMenu" class="menu">
            <span
            ><button (click)="createLore()" aria-label="Create Project" class="create" color="accent" mat-menu-item>
                    <fa-icon [icon]="plusIcon" size="lg"></fa-icon> Create
                </button></span
            >
            <hr class="divider"/>
            <div *ngFor="let lore of loresButSelected$ | async" class="buttonRow">
                <button (click)="selectLore(lore)" aria-label="Select project" mat-flat-button>
                    {{ lore.name }}
                </button>
                <button (click)="removeLore(lore)" aria-label="Delete project" class="removeButton" mat-flat-button>
                    <fa-icon [icon]="removeIcon" size="lg"></fa-icon>
                </button>
            </div>

            <span class="buttonRow">
                <button (click)="exportDatabase()" aria-label="Export" class="exportImportButton" mat-stroked-button>
                    Export
                </button>
                <button (click)="navigateToRepo()" aria-label="Open Repo" class="repoButton" mat-icon-button>
                    <fa-icon [icon]="githubIcon" size="lg"></fa-icon>
                </button>
            </span>
        </mat-menu>

        <span class="menuButton">
            <button
                (click)="editLoreCurrent()"
                *ngIf="!!(selectedLore$ | async)"
                aria-label="Edit Current"
                mat-stroked-button
            >
                {{ (selectedLore$ | async).name }}
            </button>
            <button [matMenuTriggerFor]="appMenu" aria-label="Open Menu" mat-icon-button>
                <fa-icon [icon]="menuIcon" size="lg"></fa-icon>
            </button>
        </span>
    </mat-toolbar-row>
</mat-toolbar>