From 2cd1f36b60e191a0e3cdc1117f552c6dd5d4fcc7 Mon Sep 17 00:00:00 2001
From: kaotisk <kaotisk@arching-kaos.org>
Date: Sat, 30 Nov 2024 16:13:00 +0200
Subject: create navigation header for all pages

---
 src/js/ui/sections/akNodeInfoSection.js      | 21 +++++++++----
 src/js/ui/sections/commentsSection.js        | 11 ++++++-
 src/js/ui/sections/myPageSection.js          | 44 ++++++++++++++++++----------
 src/js/ui/sections/stellarBalancesSection.js | 28 ++++++++++--------
 4 files changed, 70 insertions(+), 34 deletions(-)

(limited to 'src/js/ui')

diff --git a/src/js/ui/sections/akNodeInfoSection.js b/src/js/ui/sections/akNodeInfoSection.js
index e6f82ac..88e77ed 100644
--- a/src/js/ui/sections/akNodeInfoSection.js
+++ b/src/js/ui/sections/akNodeInfoSection.js
@@ -9,15 +9,26 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function akNodeInfoSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Stellar"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText: "Balances" }
+        ]
+    };
     var akNodeInfoSection = {
         element: "div",
         id: "arching-kaos-node-info",
-        innerHTML: `
-        <h2>Node Info</h2>
-        <em id="node-info-not-found">No data found (yet?)!</em>
-    `
+        innerHTML: [
+            whereAmI,
+            { element: "h2", innerText:"Node Info" },
+            { element: "em", id:"node-info-not-found", innerText:"No data found (yet?)!"}
+        ]
     };
-
     makeElement(akNodeInfoSection, document.querySelector('.main'));
 }
 // @license-end
diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js
index 5d520cf..00ec8fe 100644
--- a/src/js/ui/sections/commentsSection.js
+++ b/src/js/ui/sections/commentsSection.js
@@ -9,11 +9,20 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function commentsSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Comments"}
+        ]
+    };
     var commentsSection = {
         element: 'div',
         id: 'comments-section',
         innerHTML: [
-            { element: "h2", innerText: "Comments" },
+            whereAmI,
             { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"}
         ]
     };
diff --git a/src/js/ui/sections/myPageSection.js b/src/js/ui/sections/myPageSection.js
index 2cabcd5..4976691 100644
--- a/src/js/ui/sections/myPageSection.js
+++ b/src/js/ui/sections/myPageSection.js
@@ -9,25 +9,37 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function myPageSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Stellar"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText: "My Page" }
+        ]
+    };
     var myPageSection = {
         element: "div",
         id: "mypage-section",
-        innerHTML: `
-        <h2>My page</h2>
-        <button id="stellar-freigher-connect-address-button" onclick="connect()">Connect with Freighter wallet</button>
-        <div id="my-news">
-            <h3>My news</h3>
-            <em id="my-news-sec-not-found">No data found (yet?)!</em>
-        </div>
-        <div id="my-mixtapes">
-            <h3>My mixtapes</h3>
-            <em id="my-mixtapes-sec-not-found">No data found (yet?)!</em>
-        </div>
-        <div id="my-zchain">
-            <h3>My zchain</h3>
-            <em id="my-zchain-sec-not-found">No data found (yet?)!</em>
-        </div>
-    `
+        innerHTML: [
+            whereAmI,
+            { element: "h2", innerText: "My page" },
+            { element: "button", id: "stellar-freigher-connect-address-button", onclick:"connect()", innerText:"Connect with Freighter wallet" },
+            { element: "div", id:"my-news", innerHTML:[
+                { element: "h3", innerText:"My news"},
+                { element: "em", id:"my-news-sec-not-found", innerText:"No data found (yet?)!" }
+            ]},
+            { element: "div", id:"my-mixtapes", innerHTML:[
+                { element: "h3", innerText:"My mixtapes"},
+                { element: "em", id:"my-mixtapes-sec-not-found", innerText:"No data found (yet?)!" }
+            ]},
+            { element: "div", id:"my-zchain", innerHTML:[
+                { element: "h3", innerText:"My zchain"},
+                { element: "em", id:"my-zchain-sec-not-found", innerText:"No data found (yet?)!" }
+            ]}
+        ]
     };
 
     makeElement(myPageSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarBalancesSection.js b/src/js/ui/sections/stellarBalancesSection.js
index 867599f..9b68b5a 100644
--- a/src/js/ui/sections/stellarBalancesSection.js
+++ b/src/js/ui/sections/stellarBalancesSection.js
@@ -9,22 +9,26 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function stellarBalancesSection()
 {
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Stellar"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText: "Balances" }
+        ]
+    };
     var stellarBalancesSection = {
         element: "div",
         id: "stellar-balances",
-        innerHTML: `
-        <div class="where-am-i">
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>Stellar</h2>
-            <span>&gt;</span>
-            <h2>Balances</h2>
-        </div>
-        <em id="stellar-balances-not-found">No data found (yet?)!</em>
-        <table id="stellar-balances-table"></table>
-        `
+        innerHTML: [
+            whereAmI,
+            { element: "em", id: "stellar-balances-not-found", innerText: "No data found (yet?)!" },
+            { element: "table", id:"stellar-balances-table" }
+        ]
     };
-
     makeElement(stellarBalancesSection, document.querySelector('.main'));
 }
 // @license-end
-- 
cgit v1.2.3