menubar + disable text-selection

src/main/angular/src/app/editor/circuit/circuit.component.less

@@ -1,5 +1,4 @@
 .circuit {
-  position: absolute;
   width: 100%;
   height: 100%;
 

src/main/angular/src/app/editor/editor.component.html

@@ -1,3 +1,13 @@
-<app-circuit [circuit]="circuit"></app-circuit>
+<div class="layout">
+
+  <div class="menubar">
+    <app-menubar [current]="circuit" (load)="circuit = $event"></app-menubar>
+  </div>
+
+  <div class="circuit">
+    <app-circuit [circuit]="circuit"></app-circuit>
+  </div>
+
+</div>
 
 <app-messages></app-messages>

src/main/angular/src/app/editor/editor.component.less

@@ -0,0 +1,19 @@
+.layout {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  .menubar {
+
+  }
+
+  .circuit {
+    flex: 1;
+  }
+
+}

src/main/angular/src/app/editor/editor.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {CircuitComponent} from './circuit/circuit.component';
 import {MessagesComponent} from './message/messages/messages.component';
+import {MenubarComponent} from './menubar/menubar.component';
 import {Circuit} from './circuit/Circuit';
 import {DEMO_002} from './circuit/DEMO_002';
 
@@ -8,7 +9,8 @@ import {DEMO_002} from './circuit/DEMO_002';
   selector: 'app-editor',
   imports: [
     CircuitComponent,
-    MessagesComponent
+    MessagesComponent,
+    MenubarComponent
   ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.less'

src/main/angular/src/app/editor/menubar/menubar.component.html

@@ -0,0 +1,3 @@
+<div class="bar">
+  <div *ngFor="let circuit of circuits" class="item itemLeft" [class.active]="current === circuit" (click)="load.emit(circuit)">{{ circuit.name }}</div>
+</div>

src/main/angular/src/app/editor/menubar/menubar.component.less

@@ -0,0 +1,15 @@
+.bar {
+  border-bottom: 1px solid black;
+  background-color: lightgray;
+
+  .itemLeft {
+    float: left;
+    border-right: 1px solid black;
+    padding: 0.5em
+  }
+
+  .active {
+    background-color: palegreen;
+  }
+
+}

src/main/angular/src/app/editor/menubar/menubar.component.ts

@@ -0,0 +1,25 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgForOf} from '@angular/common';
+import {Circuit} from '../circuit/Circuit';
+import {DEMO_001} from '../circuit/DEMO_001';
+import {DEMO_002} from '../circuit/DEMO_002';
+
+@Component({
+  selector: 'app-menubar',
+  imports: [
+    NgForOf
+  ],
+  templateUrl: './menubar.component.html',
+  styleUrl: './menubar.component.less'
+})
+export class MenubarComponent {
+
+  @Input()
+  current!: Circuit;
+
+  @Output()
+  load: EventEmitter<Circuit> = new EventEmitter();
+
+  circuits: Circuit[] = [DEMO_001, DEMO_002];
+
+}

src/main/angular/src/styles.less

@@ -3,8 +3,13 @@ body {
   font-family: sans-serif;
   width: 100vw;
   height: 100vh;
+
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-* {
+div {
   box-sizing: border-box;
+  overflow: hidden;
 }