diff --git a/data/mainnav.css b/data/mainnav.css
new file mode 100644
index 00000000..47eb6ddf
--- /dev/null
+++ b/data/mainnav.css
@@ -0,0 +1,133 @@
+/*
+ @title StarBase
+ @file mainnav.css
+ @date 20240720
+ @repo https://github.com/ewowi/StarBase, submit changes to this file as PRs to ewowi/StarBase
+ @Authors https://github.com/ewowi/StarBase/commits/main
+ @Copyright © 2024 Github StarBase Commit Authors
+ @license GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
+ @license For non GPL-v3 usage, commercial licenses must be purchased. Contact moonmodules@icloud.com
+*/
+
+/* HTML Elements */
+html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+body {
+ background: #000;
+ color: #fff;
+ font-family: sans-serif;
+}
+
+/* Colors */
+/* Common colors */
+.bg-success { background-color: #4CAF50; }
+.bg-info { background-color: #2196F3; }
+.bg-warn { background-color: #FFC107; }
+.bg-error { background-color: #FF5252; }
+
+/* App colors */
+#main-nav {
+ background-color: #333;
+}
+#footer {
+ background-color: #334;
+}
+
+/* Display */
+.d-block { display: block; }
+.d-flex { display: flex; }
+.d-none { display: none; }
+
+/* Flex */
+.flex-column { flex-direction: column; }
+.flex-grow-1 { flex-grow: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
+
+/* Overflow */
+.overflow-hidden { overflow: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+
+/* Size */
+.w-100 { width: 100%; }
+.h-100 { height: 100%; }
+
+/* Margins */
+.ma-0 { margin: 0; }
+.ma-2 { margin: 8px; }
+
+.my-2 { margin-top: 8px; margin-bottom: 8px; }
+
+.mr-auto { margin-right: auto; }
+
+/* Padding */
+.pa-2 { padding: 8px; }
+.pa-3 { padding: 12px; }
+.pa-4 { padding: 16px; }
+
+.py-3 { padding-top: 12px; padding-bottom: 12px; }
+
+/* Text */
+.text-center {
+ text-align: center;
+}
+.text-truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* Alignment */
+.align-center { align-items: center; }
+.align-stretch { align-items: stretch}
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+
+/* Common app classes */
+.selectable {
+ cursor: pointer;
+}
+.selectable:hover {
+ background-color: rgba(255,255,255,.2)
+}
+.icon {
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+.icon-menu {
+ background-image: url('data:image/svg+xml;charset=UTF-8, ');
+}
+
+/* Main app elements */
+#main-nav {
+ height: 53px;
+ font-size: 18px;
+ font-weight: bold;
+}
+#main-nav .menu-item.selected {
+ box-shadow: inset 0 -5px 0 #68F;
+}
+#second-nav {
+ width: 15%;
+ min-width: 150px;
+ max-width: 200px;
+ box-shadow: inset -1px 0 0 #FFF4;
+}
+
+#second-nav .menu-item.selected {
+ background-color: #68F4;
+ box-shadow: inset -5px 0 0 #68F;
+}
+
+#page h1.title {
+ margin: 0;
+ background-color: #68F4;
+ border-bottom: 1px solid #FFF4;
+ padding: 12px;
+}
\ No newline at end of file
diff --git a/data/mainnav.js b/data/mainnav.js
new file mode 100644
index 00000000..36936418
--- /dev/null
+++ b/data/mainnav.js
@@ -0,0 +1,171 @@
+// @title StarBase
+// @file newui.css
+// @date 20240720
+// @repo https://github.com/ewowi/StarBase, submit changes to this file as PRs to ewowi/StarBase
+// @Authors https://github.com/ewowi/StarBase/commits/main
+// @Copyright © 2024 Github StarBase Commit Authors
+// @license GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
+// @license For non GPL-v3 usage, commercial licenses must be purchased. Contact moonmodules@icloud.com
+
+/**
+ * The main application class
+ * Private pethods are prefixed with a '#' so they will be minimized by the bundler
+ */
+class MainNav {
+
+ addBody() {
+ let body = document.getElementById("body");//gId("body");
+
+ body.classList += "d-flex flex-column";
+
+ body.innerHTML += `
+
+
+
+
+
+
+
+
+
+
+`
+
+ // Update the copyright notice in the footer
+ document.querySelector('#footer .copy').innerText = new Date().getFullYear()
+ } //addBody
+
+
+ /**
+ * Set the active module
+ * @param {object} module - A module
+ */
+ set activeModule(module) {
+ if (!module) return
+
+ this.#activeModule = module
+
+ // Update the main navigation
+ document.querySelectorAll('#main-nav .menu-item').forEach(menuItem => {
+ if (menuItem.dataset.type == this.#activeModule.type) {
+ menuItem.classList.add('selected')
+ } else {
+ menuItem.classList.remove('selected')
+ }
+ })
+
+ // Update the secondary navigation menu
+ const modules = model.filter(module => module.type == this.#activeModule.type)
+
+ const html = modules
+ .map(module => {
+ const selected = module.id == this.#activeModule.id ? 'selected' : ''
+ return ``
+ })
+ .join('')
+ document.getElementById('second-nav').innerHTML = html
+
+ // Update the page content
+ // TODO: Real code needed, for now, just dump out the JSON with a header
+ if (this.#moduleFun) {
+ document.getElementById('page').innerHTML =
+ `
+
+
${this.#activeModule.id}
+
+
` + this.#moduleFun(this.#activeModule) +
+ `
+
`
+ }
+ }
+
+ /**
+ * Set the active module to the first one in the module list whose type matches
+ * @param {string} moduleType - The module type
+ */
+ set activeModuleType(moduleType) {
+ this.activeModule = model.find(module => module.type == moduleType)
+ }
+
+ /**
+ * Set the active module to the module specified by the id
+ * @param {string} id - The module id
+ */
+ set activeModuleId(id) {
+ this.activeModule = model.find(module => module.id == id)
+ }
+
+ /**
+ * Update the UI
+ */
+ //updateUI is made after all modules have been fetched, how to adapt to add one module?
+ updateUI(fun) {
+ this.#moduleFun = fun
+
+ // Get the unique list of module types
+ const uniqueTypes = model
+ .filter((module, index, modules) => {
+ return modules.findIndex(m => m.type === module.type) === index
+ })
+ .map(module => module.type)
+
+ // Each module type becomes a top level menu
+ const html = uniqueTypes
+ .map(type => {
+ return ``
+ })
+ .join('')
+ document.getElementById('main-nav').innerHTML = html
+
+ // If there is no active module set it to the first one
+ if (this.#activeModule == '' && model.length) {
+ this.activeModule = model[0]
+ }
+ }
+
+ /**
+ * Store the currently active module
+ */
+ #activeModule = ''
+
+ //stores the function to execute to display one module
+ #moduleFun = null;
+}
\ No newline at end of file
diff --git a/data/newnavbar.css b/data/newnavbar.css
deleted file mode 100644
index 6f5a332b..00000000
--- a/data/newnavbar.css
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- @title StarBase
- @file newnavbar.css
- @date 20240720
- @repo https://github.com/ewowi/StarBase, submit changes to this file as PRs to ewowi/StarBase
- @Authors https://github.com/ewowi/StarBase/commits/main
- @Copyright © 2024 Github StarBase Commit Authors
- @license GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
- @license For non GPL-v3 usage, commercial licenses must be purchased. Contact moonmodules@icloud.com
-*/
-
-body {
- font-family: Arial, sans-serif;
- margin: 0;
- padding: 0;
- }
-
- .navbar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: #333;
- padding: 10px;
- }
-
- .menu-toggle {
- display: none;
- flex-direction: column;
- cursor: pointer;
- }
-
- .menu-toggle .bar {
- width: 25px;
- height: 3px;
- background-color: #fff;
- margin: 4px 0;
- transition: 0.4s;
- }
-
- .nav-list {
- display: flex;
- list-style: none;
- padding: 0;
- }
-
- .nav-item {
- position: relative;
- }
-
- .nav-link {
- color: #fff;
- text-decoration: none;
- padding: 10px 15px;
- display: block;
- }
-
- .nav-link:hover {
- background-color: #575757;
- }
-
- .dropdown {
- display: none;
- position: absolute;
- top: 40px;
- left: 0;
- background-color: #333;
- list-style: none;
- padding: 0;
- margin: 0;
- }
-
- .dropdown-item {
- width: 200px;
- }
-
- .dropdown-link {
- color: #fff;
- text-decoration: none;
- padding: 10px;
- display: block;
- }
-
- .dropdown-link:hover {
- background-color: #575757;
- }
-
- .nav-item:hover .dropdown {
- display: block;
- }
-
- /* Mobile styles */
- @media (max-width: 700px) {
- .menu-toggle {
- display: flex;
- }
-
- .nav-list {
- flex-direction: column;
- width: 100%;
- background-color: #333;
- position: absolute;
- top: 60px;
- left: -100%;
- transition: left 0.4s;
- }
-
- .nav-list.active {
- left: 0;
- }
-
- .nav-link {
- padding: 15px;
- }
-
- .dropdown {
- position: relative;
- top: 0;
- }
-
- .dropdown-item {
- width: 100%;
- }
- }
-
\ No newline at end of file
diff --git a/data/newui.htm b/data/newui.htm
index da63bccd..7b37b89c 100644
--- a/data/newui.htm
+++ b/data/newui.htm
@@ -18,9 +18,10 @@
StarBase💫 by MoonModules 🌔
-
+
+