54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
<aside class="h-full flex flex-row
|
|
bg-white border-r border-gray-200
|
|
transition-all duration-300 p-1" [class.w-82]="!collapsed()" [class.w-14]="collapsed()">
|
|
|
|
<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]="collapsed()">
|
|
|
|
<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 class="bi bi-lightning-charge-fill text-indigo-500 text-xl cursor-pointer enabled p-2"
|
|
(click)="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">
|
|
<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>
|
|
<app-flows-list></app-flows-list>
|
|
</app-group-holder>
|
|
}
|
|
@case ('blocks') {
|
|
<app-group-holder title="Blocks" icon="bi-boxes">
|
|
<div class="space-y-2 overflow-auto">
|
|
<div class="block-item">Input</div>
|
|
<div class="block-item">Transform</div>
|
|
<div class="block-item">Output</div>
|
|
</div>
|
|
</app-group-holder>
|
|
}
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
</aside> |