64 lines
2.2 KiB
HTML
64 lines
2.2 KiB
HTML
<div
|
|
class="transition-all duration-300 ease-in-out overflow-hidden h-[calc(100vh-104px)]"
|
|
[class.w-14]="collapsed()"
|
|
[class.w-72]="!collapsed()"
|
|
>
|
|
<aside class="h-full w-72 bg-white border-r border-gray-200 flex">
|
|
<div class="flex flex-col h-full">
|
|
|
|
<button (click)="collapse()" class="relative
|
|
w-6 h-6 rounded-full
|
|
bg-white border shadow
|
|
flex items-center justify-center
|
|
hover:bg-gray-50 z-10" [class.invisible]="open == null">
|
|
|
|
<i class="bi bi-chevron-left text-xs transition-transform"></i>
|
|
</button>
|
|
|
|
<!-- ICON MODE -->
|
|
<div class="flex flex-col gap-4 items-center pt-6 flex-1">
|
|
<i [ngClass]="{'cursor-none bg-gray-200' : open == 'flows'}"
|
|
[ngClass]="{'cursor-pointer enabled' : open != 'flows'}"
|
|
class="bi bi-lightning-charge-fill text-indigo-500 text-xl p-2"
|
|
(click)="open != 'flows' && openSide('flows')"></i>
|
|
<i [ngClass]="{'cursor-pointer text-gray-600 enabled' : !blockDisabled()}"
|
|
class="bi bi-boxes text-gray-200 text-xl p-2" (click)="!blockDisabled() && openSide('blocks')"></i>
|
|
</div>
|
|
</div>
|
|
|
|
@if (!collapsed()) {
|
|
<!-- CONTENT -->
|
|
<div class="h-full bg-white flex-1">
|
|
|
|
<div class="space-y-6 h-full">
|
|
@switch (open) {
|
|
@case ('flows') {
|
|
<app-group-holder title="Flows" icon="bi-lightning-charge-fill">
|
|
@if (!creatingFlow()) {
|
|
<i ngProjectAs="header-button"
|
|
class="bi bi-plus-circle-fill text-blue-600 hover:cursor-pointer hover:text-blue-400 text-lg"
|
|
(click)="createNewFlow()"></i>
|
|
} @else {
|
|
<span ngProjectAs="header-button" class="spinner-border spinner-border-sm text-blue-600" role="status">
|
|
<span class="visually-hidden">Creating flow...</span>
|
|
</span>
|
|
}
|
|
<app-flows-list></app-flows-list>
|
|
</app-group-holder>
|
|
}
|
|
@case ('blocks') {
|
|
<app-group-holder title="Blocks" icon="bi-boxes">
|
|
<i ngProjectAs="header-button"
|
|
class="bi bi-plus-circle-fill text-blue-600 hover:cursor-pointer hover:text-blue-400 text-lg"
|
|
(click)="createNewBlock()"></i>
|
|
<app-blocks-list></app-blocks-list>
|
|
</app-group-holder>
|
|
}
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
</aside>
|
|
</div>
|