Split client into frontend website and server

frontend/website/src/toolbars/commandmodetoolbar.ts

@@ -0,0 +1,5 @@
+import { Toolbar } from "./toolbar";
+
+export class CommandModeToolbar extends Toolbar {
+    // TODO move here all code about the command mode toolbar
+}

frontend/website/src/toolbars/primarytoolbar.ts

@@ -0,0 +1,17 @@
+import { Dropdown } from "../controls/dropdown";
+import { Toolbar } from "./toolbar";
+
+export class PrimaryToolbar extends Toolbar {
+    #mainDropdown: Dropdown; 
+
+    constructor(ID: string) {
+        super(ID);
+
+        /* The content of the dropdown is entirely defined in the .ejs file */ 
+        this.#mainDropdown = new Dropdown("app-icon", () => { });
+    }
+
+    getMainDropdown() {
+        return this.#mainDropdown;
+    }
+}

frontend/website/src/toolbars/toolbar.ts

@@ -0,0 +1,38 @@
+export class Toolbar {
+    #element: HTMLElement
+    #visible: boolean = true;
+
+    /**
+     * 
+     * @param ID - the ID of the HTML element which will contain the context menu
+     */
+    constructor(ID: string){
+        this.#element = document.getElementById(ID) as HTMLElement;
+    }
+
+    show() {
+        this.#element.classList.toggle("hide", false);
+        this.#visible = true;
+    }
+
+    hide() {
+        this.#element.classList.toggle("hide", true);
+        this.#visible = false;
+    }
+
+    toggle() {
+        // Simple way to track if currently visible
+        if (this.#visible)
+            this.hide();
+        else 
+            this.show();
+    }
+
+    getElement() {
+        return this.#element;
+    }
+
+    getVisible(){
+        return this.#visible;
+    }
+}