From f60725ce98572328a5921796b915f9071fe2f75a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 8 Dec 2023 16:56:22 +0000
Subject: [PATCH 1/3] Bump emoji-picker-element from 1.18.3 to 1.20.1 in /gui

Bumps [emoji-picker-element](https://github.com/nolanlawson/emoji-picker-element) from 1.18.3 to 1.20.1.
- [Changelog](https://github.com/nolanlawson/emoji-picker-element/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nolanlawson/emoji-picker-element/compare/v1.18.3...v1.20.1)

---
updated-dependencies:
- dependency-name: emoji-picker-element
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 gui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/package.json b/gui/package.json
index f50a9962..dd228cb9 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -46,7 +46,7 @@
     "chartjs-plugin-annotation": "3.0.1",
     "electron-log": "5.0.0",
     "electron-updater": "6.1.6",
-    "emoji-picker-element": "1.18.3",
+    "emoji-picker-element": "1.20.1",
     "emoji-picker-element-data": "1.4.0",
     "file-saver": "2.0.5",
     "gridstack": "10.0.0",

From ae6d69ac2ee4d34f1943ec77f22937bc03ad1e02 Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Fri, 8 Dec 2023 22:20:11 +0100
Subject: [PATCH 2/3] adjusted grid item selection

---
 gui/src/components/dynamic_components2.vue | 185 +++++++++++++--------
 gui/src/components/main.vue                |   2 +
 2 files changed, 115 insertions(+), 72 deletions(-)

diff --git a/gui/src/components/dynamic_components2.vue b/gui/src/components/dynamic_components2.vue
index 0586edba..ec57658f 100644
--- a/gui/src/components/dynamic_components2.vue
+++ b/gui/src/components/dynamic_components2.vue
@@ -151,8 +151,8 @@ function quickfill() {
 </script>
 
 <template>
-  <button type="button" @click="showModal">Add Widget pos [0,0]</button>
-  <button type="button" @click="quickfill">Quickfill</button>
+<button class="btn btn-secondary fixed-middle-right rounded-0 rounded-start-4 p-1 pt-4 pb-4" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasGridItems" aria-controls="offcanvasGridItems"><i class="bi bi-grip-vertical h1"></i></button>
+
   <div class="grid-container vh-100">
     <div class="grid-stack">
       <div
@@ -177,81 +177,122 @@ function quickfill() {
       </div>
     </div>
   </div>
-  <div class="modal fade" id="tileModal" tabindex="-1">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Add grid tile</h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="modal-body">
-          <div
-            class="btn-group"
-            role="group"
-            aria-label="Basic outlined example"
-          >
-            <button
-              type="button"
-              @click="addNewWidget2(gridWidgets[0])"
-              class="btn btn-outline-secondary"
-              data-bs-dismiss="modal"
-            >
-              Heard station list
-            </button>
-            <button
-              type="button"
-              @click="addNewWidget2(gridWidgets[1])"
-              class="btn btn-outline-secondary"
-              data-bs-dismiss="modal"
-            >
-              Stats (waterfall, etc)
-            </button>
-            <button
-              type="button"
-              @click="addNewWidget2(gridWidgets[2])"
-              class="btn btn-outline-secondary"
-              data-bs-dismiss="modal"
-            >
-              Audio
-            </button>
-            <button
-              type="button"
-              @click="addNewWidget2(gridWidgets[4])"
-              class="btn btn-outline-secondary"
-              data-bs-dismiss="modal"
-            >
-              Broadcasts
-            </button>
-            <button
-              type="button"
-              @click="addNewWidget2(gridWidgets[3])"
-              class="btn btn-outline-secondary"
-              data-bs-dismiss="modal"
-            >
-              Rig Control
-            </button>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
-          <button type="button" class="btn btn-primary">Save changes</button>
-        </div>
+
+<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasGridItems" aria-labelledby="offcanvasGridItemsLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
+      <button class="btn btn-secondary" type="button" @click="quickfill">Quickfill grid</button>
+
+    </h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+<div class="accordion" id="accordionExample">
+  <!-- Heard Stations -->
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingHeardStations">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHeardStations" aria-expanded="true" aria-controls="collapseHeardStations">
+        <strong>Heard Stations</strong>
+      </button>
+    </h2>
+    <div id="collapseHeardStations" class="accordion-collapse collapse show" aria-labelledby="headingHeardStations" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <button type="button" @click="addNewWidget2(gridWidgets[0])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Heard station list</button>
       </div>
     </div>
   </div>
+
+  <!-- Activities -->
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingActivities">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseActivities" aria-expanded="false" aria-controls="collapseActivities">
+        <strong>Activities</strong>
+      </button>
+    </h2>
+    <div id="collapseActivities" class="accordion-collapse collapse" aria-labelledby="headingActivities" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <!-- Content for Activities -->
+      </div>
+    </div>
+  </div>
+
+  <!-- Radio Control -->
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingRadioControl">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRadioControl" aria-expanded="false" aria-controls="collapseRadioControl">
+        <strong>Radio Control</strong>
+      </button>
+    </h2>
+    <div id="collapseRadioControl" class="accordion-collapse collapse" aria-labelledby="headingRadioControl" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <button type="button" @click="addNewWidget2(gridWidgets[3])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Rig Control</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Audio Control -->
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingAudioControl">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAudioControl" aria-expanded="false" aria-controls="collapseAudioControl">
+        <strong>Audio Control</strong>
+      </button>
+    </h2>
+    <div id="collapseAudioControl" class="accordion-collapse collapse" aria-labelledby="headingAudioControl" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <button type="button" @click="addNewWidget2(gridWidgets[2])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Audio</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Statistics -->
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingStatistics">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStatistics" aria-expanded="false" aria-controls="collapseStatistics">
+        <strong>Statistics</strong>
+      </button>
+    </h2>
+    <div id="collapseStatistics" class="accordion-collapse collapse" aria-labelledby="headingStatistics" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <button type="button" @click="addNewWidget2(gridWidgets[1])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Stats (waterfall, etc)</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Broadcasts -->
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingBroadcasts">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBroadcasts" aria-expanded="false" aria-controls="collapseBroadcasts">
+        <strong>Broadcasts</strong>
+      </button>
+    </h2>
+    <div id="collapseBroadcasts" class="accordion-collapse collapse" aria-labelledby="headingBroadcasts" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <button type="button" @click="addNewWidget2(gridWidgets[4])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Broadcasts</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+  </div>
+</div>
+
+
 </template>
+
 <style>
+.fixed-middle-right {
+    position: fixed; /* Fixed/sticky position */
+    top: 50%;        /* Position at the middle of the viewport */
+    right: 0px;     /* Place the button 20px from the right */
+    transform: translateY(-50%); /* Adjust for exact vertical centering */
+    z-index: 999;    /* Ensure it's on top of other elements */
+}
+
 .grid-stack-item {
   text-align: center;
   overflow: auto;
diff --git a/gui/src/components/main.vue b/gui/src/components/main.vue
index d5f50394..f2b48024 100644
--- a/gui/src/components/main.vue
+++ b/gui/src/components/main.vue
@@ -145,7 +145,9 @@ function stopAllTransmissions() {
       <div class="col-sm min-vh-100 m-0 p-0">
         <!-- content -->
 
+      <!-- TODO: Remove the top navbar entirely if not needed
         <main_top_navbar />
+      -->
 
         <div class="tab-content" id="nav-tabContent-settings">
           <div

From ed7dc955c88c40a5b76f82ded3f5daa90fce7be9 Mon Sep 17 00:00:00 2001
From: codefactor-io <support@codefactor.io>
Date: Fri, 8 Dec 2023 21:20:41 +0000
Subject: [PATCH 3/3] [CodeFactor] Apply fixes to commit ae6d69a

---
 gui/src/components/dynamic_components2.vue | 332 ++++++++++++++-------
 gui/src/components/main.vue                |   2 +-
 2 files changed, 227 insertions(+), 107 deletions(-)

diff --git a/gui/src/components/dynamic_components2.vue b/gui/src/components/dynamic_components2.vue
index ec57658f..f3d3f9ac 100644
--- a/gui/src/components/dynamic_components2.vue
+++ b/gui/src/components/dynamic_components2.vue
@@ -151,7 +151,15 @@ function quickfill() {
 </script>
 
 <template>
-<button class="btn btn-secondary fixed-middle-right rounded-0 rounded-start-4 p-1 pt-4 pb-4" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasGridItems" aria-controls="offcanvasGridItems"><i class="bi bi-grip-vertical h1"></i></button>
+  <button
+    class="btn btn-secondary fixed-middle-right rounded-0 rounded-start-4 p-1 pt-4 pb-4"
+    type="button"
+    data-bs-toggle="offcanvas"
+    data-bs-target="#offcanvasGridItems"
+    aria-controls="offcanvasGridItems"
+  >
+    <i class="bi bi-grip-vertical h1"></i>
+  </button>
 
   <div class="grid-container vh-100">
     <div class="grid-stack">
@@ -178,119 +186,231 @@ function quickfill() {
     </div>
   </div>
 
-<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasGridItems" aria-labelledby="offcanvasGridItemsLabel">
-  <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
-      <button class="btn btn-secondary" type="button" @click="quickfill">Quickfill grid</button>
+  <div
+    class="offcanvas offcanvas-end"
+    data-bs-scroll="true"
+    data-bs-backdrop="true"
+    tabindex="-1"
+    id="offcanvasGridItems"
+    aria-labelledby="offcanvasGridItemsLabel"
+  >
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
+        <button class="btn btn-secondary" type="button" @click="quickfill">
+          Quickfill grid
+        </button>
+      </h5>
+      <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="offcanvas"
+        aria-label="Close"
+      ></button>
+    </div>
+    <div class="offcanvas-body">
+      <div class="accordion" id="accordionExample">
+        <!-- Heard Stations -->
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="headingHeardStations">
+            <button
+              class="accordion-button"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseHeardStations"
+              aria-expanded="true"
+              aria-controls="collapseHeardStations"
+            >
+              <strong>Heard Stations</strong>
+            </button>
+          </h2>
+          <div
+            id="collapseHeardStations"
+            class="accordion-collapse collapse show"
+            aria-labelledby="headingHeardStations"
+            data-bs-parent="#accordionExample"
+          >
+            <div class="accordion-body">
+              <button
+                type="button"
+                @click="addNewWidget2(gridWidgets[0])"
+                class="btn btn-outline-secondary"
+                data-bs-dismiss="modal"
+              >
+                Heard station list
+              </button>
+            </div>
+          </div>
+        </div>
 
-    </h5>
-    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-  </div>
-  <div class="offcanvas-body">
-<div class="accordion" id="accordionExample">
-  <!-- Heard Stations -->
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="headingHeardStations">
-      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHeardStations" aria-expanded="true" aria-controls="collapseHeardStations">
-        <strong>Heard Stations</strong>
-      </button>
-    </h2>
-    <div id="collapseHeardStations" class="accordion-collapse collapse show" aria-labelledby="headingHeardStations" data-bs-parent="#accordionExample">
-      <div class="accordion-body">
-        <button type="button" @click="addNewWidget2(gridWidgets[0])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Heard station list</button>
+        <!-- Activities -->
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="headingActivities">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseActivities"
+              aria-expanded="false"
+              aria-controls="collapseActivities"
+            >
+              <strong>Activities</strong>
+            </button>
+          </h2>
+          <div
+            id="collapseActivities"
+            class="accordion-collapse collapse"
+            aria-labelledby="headingActivities"
+            data-bs-parent="#accordionExample"
+          >
+            <div class="accordion-body">
+              <!-- Content for Activities -->
+            </div>
+          </div>
+        </div>
+
+        <!-- Radio Control -->
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="headingRadioControl">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseRadioControl"
+              aria-expanded="false"
+              aria-controls="collapseRadioControl"
+            >
+              <strong>Radio Control</strong>
+            </button>
+          </h2>
+          <div
+            id="collapseRadioControl"
+            class="accordion-collapse collapse"
+            aria-labelledby="headingRadioControl"
+            data-bs-parent="#accordionExample"
+          >
+            <div class="accordion-body">
+              <button
+                type="button"
+                @click="addNewWidget2(gridWidgets[3])"
+                class="btn btn-outline-secondary"
+                data-bs-dismiss="modal"
+              >
+                Rig Control
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Audio Control -->
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="headingAudioControl">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseAudioControl"
+              aria-expanded="false"
+              aria-controls="collapseAudioControl"
+            >
+              <strong>Audio Control</strong>
+            </button>
+          </h2>
+          <div
+            id="collapseAudioControl"
+            class="accordion-collapse collapse"
+            aria-labelledby="headingAudioControl"
+            data-bs-parent="#accordionExample"
+          >
+            <div class="accordion-body">
+              <button
+                type="button"
+                @click="addNewWidget2(gridWidgets[2])"
+                class="btn btn-outline-secondary"
+                data-bs-dismiss="modal"
+              >
+                Audio
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Statistics -->
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="headingStatistics">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseStatistics"
+              aria-expanded="false"
+              aria-controls="collapseStatistics"
+            >
+              <strong>Statistics</strong>
+            </button>
+          </h2>
+          <div
+            id="collapseStatistics"
+            class="accordion-collapse collapse"
+            aria-labelledby="headingStatistics"
+            data-bs-parent="#accordionExample"
+          >
+            <div class="accordion-body">
+              <button
+                type="button"
+                @click="addNewWidget2(gridWidgets[1])"
+                class="btn btn-outline-secondary"
+                data-bs-dismiss="modal"
+              >
+                Stats (waterfall, etc)
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Broadcasts -->
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="headingBroadcasts">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseBroadcasts"
+              aria-expanded="false"
+              aria-controls="collapseBroadcasts"
+            >
+              <strong>Broadcasts</strong>
+            </button>
+          </h2>
+          <div
+            id="collapseBroadcasts"
+            class="accordion-collapse collapse"
+            aria-labelledby="headingBroadcasts"
+            data-bs-parent="#accordionExample"
+          >
+            <div class="accordion-body">
+              <button
+                type="button"
+                @click="addNewWidget2(gridWidgets[4])"
+                class="btn btn-outline-secondary"
+                data-bs-dismiss="modal"
+              >
+                Broadcasts
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-
-  <!-- Activities -->
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="headingActivities">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseActivities" aria-expanded="false" aria-controls="collapseActivities">
-        <strong>Activities</strong>
-      </button>
-    </h2>
-    <div id="collapseActivities" class="accordion-collapse collapse" aria-labelledby="headingActivities" data-bs-parent="#accordionExample">
-      <div class="accordion-body">
-        <!-- Content for Activities -->
-      </div>
-    </div>
-  </div>
-
-  <!-- Radio Control -->
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="headingRadioControl">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRadioControl" aria-expanded="false" aria-controls="collapseRadioControl">
-        <strong>Radio Control</strong>
-      </button>
-    </h2>
-    <div id="collapseRadioControl" class="accordion-collapse collapse" aria-labelledby="headingRadioControl" data-bs-parent="#accordionExample">
-      <div class="accordion-body">
-        <button type="button" @click="addNewWidget2(gridWidgets[3])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Rig Control</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Audio Control -->
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="headingAudioControl">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAudioControl" aria-expanded="false" aria-controls="collapseAudioControl">
-        <strong>Audio Control</strong>
-      </button>
-    </h2>
-    <div id="collapseAudioControl" class="accordion-collapse collapse" aria-labelledby="headingAudioControl" data-bs-parent="#accordionExample">
-      <div class="accordion-body">
-        <button type="button" @click="addNewWidget2(gridWidgets[2])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Audio</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Statistics -->
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="headingStatistics">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStatistics" aria-expanded="false" aria-controls="collapseStatistics">
-        <strong>Statistics</strong>
-      </button>
-    </h2>
-    <div id="collapseStatistics" class="accordion-collapse collapse" aria-labelledby="headingStatistics" data-bs-parent="#accordionExample">
-      <div class="accordion-body">
-        <button type="button" @click="addNewWidget2(gridWidgets[1])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Stats (waterfall, etc)</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Broadcasts -->
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="headingBroadcasts">
-      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBroadcasts" aria-expanded="false" aria-controls="collapseBroadcasts">
-        <strong>Broadcasts</strong>
-      </button>
-    </h2>
-    <div id="collapseBroadcasts" class="accordion-collapse collapse" aria-labelledby="headingBroadcasts" data-bs-parent="#accordionExample">
-      <div class="accordion-body">
-        <button type="button" @click="addNewWidget2(gridWidgets[4])" class="btn btn-outline-secondary" data-bs-dismiss="modal">Broadcasts</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-
-
-
-
-  </div>
-</div>
-
-
 </template>
 
 <style>
 .fixed-middle-right {
-    position: fixed; /* Fixed/sticky position */
-    top: 50%;        /* Position at the middle of the viewport */
-    right: 0px;     /* Place the button 20px from the right */
-    transform: translateY(-50%); /* Adjust for exact vertical centering */
-    z-index: 999;    /* Ensure it's on top of other elements */
+  position: fixed; /* Fixed/sticky position */
+  top: 50%; /* Position at the middle of the viewport */
+  right: 0px; /* Place the button 20px from the right */
+  transform: translateY(-50%); /* Adjust for exact vertical centering */
+  z-index: 999; /* Ensure it's on top of other elements */
 }
 
 .grid-stack-item {
diff --git a/gui/src/components/main.vue b/gui/src/components/main.vue
index f2b48024..4feb0f57 100644
--- a/gui/src/components/main.vue
+++ b/gui/src/components/main.vue
@@ -145,7 +145,7 @@ function stopAllTransmissions() {
       <div class="col-sm min-vh-100 m-0 p-0">
         <!-- content -->
 
-      <!-- TODO: Remove the top navbar entirely if not needed
+        <!-- TODO: Remove the top navbar entirely if not needed
         <main_top_navbar />
       -->