4 files changed, 175 insertions, 0 deletions
diff --git a/src/js/ui/header.js b/src/js/ui/header.js
new file mode 100644
index 0000000..51d48f6
--- /dev/null
+++ b/src/js/ui/header.js
@@ -0,0 +1,19 @@
+var header = {
+    element: "div",
+    id: 'header',
+    className: 'header',
+    innerHTML: [
+        { element: "a", id:"logo-button", innerHTML:[
+            {element: "img", src:"./img/header-logo.png" }
+        ]},
+        { element: "h1", style:"text-align: center;", innerText: "Arching Kaos"}
+    ]
+}
+
+function goHomeAction()
+{
+    menusel({id:"#/welcome-section"});
+}
+makeElement(header, document.querySelector('#logo-title-placeholder'));
+
+document.querySelector('#logo-button').addEventListener("click", goHomeAction);
diff --git a/src/js/ui/main.js b/src/js/ui/main.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/js/ui/main.js
diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js
index f7adeae..2c76177 100644
--- a/src/js/ui/mainLayout.js
+++ b/src/js/ui/mainLayout.js
@@ -5,6 +5,14 @@ var scripts = [
     },
     {
         element:"script",
+        src:"./js/ui/menu.js"
+    },
+    {
+        element:"script",
+        src:"./js/ui/main.js"
+    },
+    {
+        element:"script",
         src:"./js/ui/footer.js"
     }
 ]
diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js
new file mode 100644
index 0000000..b9cafaa
--- /dev/null
+++ b/src/js/ui/menu.js
@@ -0,0 +1,148 @@
+/* Arching Kaos Menu
+ *
+ * Kaotisk Hund - 2024
+ *
+ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+ *
+ */
+
+var menuButton = {
+    element: "button",
+    id:"mobile-menu",
+    innerText:"Show menu"
+};
+
+makeElement(menuButton, document.querySelector('#menu-placeholder'));
+
+document.querySelector('#mobile-menu').addEventListener("click", toggleMenu);
+
+var menuLayout = {
+    element: 'nav', id:"double-floor", innerHTML:[
+        { element: "div", id:"menu", className:"upper-floor", innerHTML: [
+            { element: "button", onclick:'menusel({id:"#/welcome-section"})', innerText:"Home"},
+            { element: "button", onclick:'modulesSubToggle()', innerText:"Modules"},
+            { element: "button", onclick:'exploreSubToggle()', innerText:"Explore"},
+            { element: "button", onclick:'menusel({id:"#/chat-section"})', innerText:"Chat"},
+            { element: "button", onclick:'menusel({id:"#/radio-section"})', innerText:"Radio"},
+            { element: "button", onclick:'menusel({id:"#/settings-section"})', innerText:"Settings"},
+            { element: "button", onclick:'stellarSubToggle()', innerText:"Stellar"},
+            { element: "button", onclick:'menusel({id:"#/about-section"})', innerText:"About"}
+        ]
+        },
+        { element: "div", id:"menu", className:"lower-floor"}
+    ]
+};
+
+makeElement(menuLayout, document.querySelector('#menu-placeholder'));
+
+var modulesSubmenuTemplate = {
+    element: 'div',
+    className:"dropdown",
+    id:"modules-submenu",
+    innerHTML: [
+        { element:'button', onclick:"modulesSubToggle()", innerText:".."},
+        { element:'button', onclick:'menusel({id:"#/mixtapes-section"})', innerText:"Mixtapes"},
+        { element:'button', onclick:'menusel({id:"#/news-section"})', innerText:"News"},
+        { element:'button', onclick:'menusel({id:"#/comments-section"})', innerText:"Comments"},
+        { element:'button', onclick:'menusel({id:"#/files-section"})', innerText:"Files"}
+    ]
+};
+
+makeElement(modulesSubmenuTemplate, document.querySelector('.lower-floor'));
+
+var exploreSubmenuTemplate = {
+    element: 'div',
+    className:"dropdown",
+    id:"explore-submenu",
+    innerHTML: [
+        { element:'button', onclick:"exploreSubToggle()", innerText:".."},
+        { element:'button', onclick:'menusel({id:"#/zchain-data-section"})', innerText:"zchain"},
+        { element:'button', onclick:'menusel({id:"#/stats-section"})', innerText:"Stats"}
+    ]
+};
+makeElement(exploreSubmenuTemplate, document.querySelector('.lower-floor'));
+
+var stellarSubmenuTemplate = {
+    element: 'div',
+    className:"dropdown",
+    id:"stellar-submenu",
+    innerHTML: [
+        { element:'button', onclick:"stellarSubToggle()", innerText:".."},
+        { element:'button', onclick:'menusel({id:"#/mypage-section"})', innerText:"My page"},
+        { element:'button', onclick:'menusel({id:"#/stellar-balances"})', innerText:"Balances"},
+        { element:'button', onclick:'menusel({id:"#/stellar-data-config"})', innerText:"Data"},
+        { element:'button', onclick:'menusel({id:"#/arching-kaos-node-info"})', innerText:"Node Info"}
+    ]
+};
+
+makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor'));
+
+
+/*
+ * Menu bar management
+ *
+ * We change the visible floor according to menu selection.
+ *
+ */
+var upperFloor = document.querySelector('.upper-floor');
+var lowerFloor = document.querySelector('.lower-floor');
+var doubleFloorMenu = document.querySelector('#double-floor'); 
+
+upperFloor.style.display = 'flex';
+lowerFloor.style.display = 'none';
+
+var modulesSubmenu = document.querySelector('#modules-submenu');
+modulesSubmenu.style.display = 'none';
+function modulesSubToggle(){
+    modulesSubmenu.style.display = modulesSubmenu.style.display === 'none' ? 'flex' : 'none';
+    upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
+    lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
+}
+
+var exploreSubmenu = document.querySelector('#explore-submenu');
+exploreSubmenu.style.display = 'none';
+function exploreSubToggle(){
+    exploreSubmenu.style.display = exploreSubmenu.style.display === 'none' ? 'flex' : 'none';
+    upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
+    lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
+}
+
+var stellarSubmenu = document.querySelector('#stellar-submenu');
+stellarSubmenu.style.display = 'none';
+function stellarSubToggle(){
+    stellarSubmenu.style.display = stellarSubmenu.style.display === 'none' ? 'flex' : 'none';
+    upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
+    lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
+}
+
+// Function to hide all the panes
+function menuinit(){
+    menuids.forEach(m=>document.querySelector(m).hidden=true);
+}
+
+/*
+ * Function called on clicks on the menu bar
+ * Unhides the pane connected to the clicked menu entry
+ */
+function menusel(m){
+    menuinit();
+    // document.querySelector(m.id.replace('/','')).hidden=false;
+    locationHashSetter(m.id);
+    
+    mainContainer.style.display = 'block';
+    if ( isMobile ) {
+        doubleFloorMenu.style.display = 'none';
+    }
+}
+
+function toggleMenu(){
+    mainContainer.style.display = 'none';
+    doubleFloorMenu.style.display = 'flex';
+}
+
+// And call
+menuinit();
+locationHashOnChange();
+
+isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex';
+// @license-end