diff --git a/src/main/angular/src/app/editor/circuit/circuit.component.less b/src/main/angular/src/app/editor/circuit/circuit.component.less
index 54b0239..18b0f1c 100644
--- a/src/main/angular/src/app/editor/circuit/circuit.component.less
+++ b/src/main/angular/src/app/editor/circuit/circuit.component.less
@@ -1,5 +1,4 @@
.circuit {
- position: absolute;
width: 100%;
height: 100%;
diff --git a/src/main/angular/src/app/editor/editor.component.html b/src/main/angular/src/app/editor/editor.component.html
index 1ec69b1..907f644 100644
--- a/src/main/angular/src/app/editor/editor.component.html
+++ b/src/main/angular/src/app/editor/editor.component.html
@@ -1,3 +1,13 @@
-
+
diff --git a/src/main/angular/src/app/editor/editor.component.less b/src/main/angular/src/app/editor/editor.component.less
index e69de29..fdb13d6 100644
--- a/src/main/angular/src/app/editor/editor.component.less
+++ b/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;
+ }
+
+}
diff --git a/src/main/angular/src/app/editor/editor.component.ts b/src/main/angular/src/app/editor/editor.component.ts
index 3dd91b1..eb55fb8 100644
--- a/src/main/angular/src/app/editor/editor.component.ts
+++ b/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'
diff --git a/src/main/angular/src/app/editor/menubar/menubar.component.html b/src/main/angular/src/app/editor/menubar/menubar.component.html
new file mode 100644
index 0000000..0cc65d1
--- /dev/null
+++ b/src/main/angular/src/app/editor/menubar/menubar.component.html
@@ -0,0 +1,3 @@
+
diff --git a/src/main/angular/src/app/editor/menubar/menubar.component.less b/src/main/angular/src/app/editor/menubar/menubar.component.less
new file mode 100644
index 0000000..2eb798a
--- /dev/null
+++ b/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;
+ }
+
+}
diff --git a/src/main/angular/src/app/editor/menubar/menubar.component.ts b/src/main/angular/src/app/editor/menubar/menubar.component.ts
new file mode 100644
index 0000000..d83e976
--- /dev/null
+++ b/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 = new EventEmitter();
+
+ circuits: Circuit[] = [DEMO_001, DEMO_002];
+
+}
diff --git a/src/main/angular/src/styles.less b/src/main/angular/src/styles.less
index 358b8a4..0c71651 100644
--- a/src/main/angular/src/styles.less
+++ b/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;
}