From 469b499db1ab1b699043390e91f0452b08057841 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 8 Apr 2025 09:40:35 -0700
Subject: [PATCH] refactor: enhance navigation structure in Main.php by
 improving template usage and updating CSS for better layout and alignment

---
 .../DefaultPageLayout/Navigation/Main.php     | 118 ++++++++++++------
 .../plugins/dynamix/styles/default-base.css   |   6 +-
 2 files changed, 83 insertions(+), 41 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Navigation/Main.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Navigation/Main.php
index 762c6c653..2b248b534 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Navigation/Main.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Navigation/Main.php
@@ -1,44 +1,84 @@
 <?
-// Build page menus
-echo "<div id='menu'>";
-if ($themeHelper->isSidebarTheme()) echo "<div id='nav-block'>";
-echo "<div class='nav-tile'>";
-foreach ($taskPages as $button) {
-  $page = $button['name'];
-  $play = $task==$page ? " active" : "";
-  echo "<div class='nav-item{$play}'>";
-  echo "<a href=\"/$page\" onclick=\"initab('/$page')\">"._(_var($button,'Name',$page))."</a></div>";
-}
-unset($taskPages);
-echo "</div>";
-echo "<div class='nav-tile right'>";
-if (isset($myPage['Lock'])) {
-  $title = $themeHelper->isSidebarTheme() ?  "" : _('Unlock sortable items');
-  echo "<div class='nav-item LockButton util'><a href='#' class='hand' onclick='LockButton();return false;' title=\"$title\"><b class='icon-u-lock system green-text'></b><span>"._('Unlock sortable items')."</span></a></div>";
-}
-if ($display['usage']) my_usage();
+/**
+ * Template is used for both top navigation and sidebar navigation.
+ *
+ * @var $themeHelper ThemeHelper
+ * @var $taskPages array
+ * @var $buttonPages array
+ * @var $display array
+ * @var $task string
+ */
+?>
+<div id="menu">
+    <? if ($themeHelper->isSidebarTheme()): ?>
+        <div id="nav-block">
+    <? endif; ?>
 
-foreach ($buttonPages as $button) {
-  if (empty($button['Link'])) {
-    $icon = $button['Icon'];
-    if (substr($icon,-4)=='.png') {
-      $icon = "<img src='/{$button['root']}/icons/$icon' class='system'>";
-    } elseif (substr($icon,0,5)=='icon-') {
-      $icon = "<b class='$icon system'></b>";
-    } else {
-      if (substr($icon,0,3)!='fa-') $icon = "fa-$icon";
-      $icon = "<b class='fa $icon system'></b>";
-    }
-    $title = $themeHelper->isSidebarTheme() ? "" : " title=\""._($button['Title'])."\"";
-    echo "<div class='nav-item {$button['name']} util'><a href='"._var($button,'Href','#')."' onclick='{$button['name']}();return false;'{$title}>$icon<span>"._($button['Title'])."</span></a></div>";
-  } else {
-    echo "<div class='{$button['Link']}'></div>";
-  }
-}
+    <div class="nav-tile">
+        <? foreach ($taskPages as $button): ?>
+            <? $pageName = $button['name']; ?>
+            <? $pageActive = $task == $pageName ? " active" : ""; ?>
+            <div class="nav-item<?= $pageActive ?>">
+                <a href="/<?= $pageName ?>" onclick="initab('/<?= $pageName ?>')">
+                    <?= _(_var($button, 'Name', $pageName)) ?>
+                </a>
+            </div>
+        <? endforeach; ?>
+        <? unset($taskPages); ?>
+    </div>
 
-echo "<div class='nav-user show'><a id='board' href='#' class='hand'><b id='bell' class='icon-u-bell system'></b></a></div>";
+    <div class="nav-tile right">
+        <? if (isset($myPage['Lock'])): ?>
+            <div class="nav-item LockButton util">
+                <a href="#" class="hand" onclick="LockButton();return false;" title="<?= _('Unlock sortable items') ?>">
+                    <b class="icon-u-lock system green-text"></b>
+                    <span><?= _('Unlock sortable items') ?></span>
+                </a>
+            </div>
+        <? endif; ?>
 
-if ($themeHelper->isSidebarTheme()) echo "</div>";
-echo "</div></div>";
+        <? if ($display['usage']): ?>
+            <? my_usage(); ?>
+        <? endif; ?>
 
-unset($buttonPages,$button);
+        <? foreach ($buttonPages as $button): ?>
+            <? if (empty($button['Link'])): ?>
+                <? $icon = $button['Icon']; ?>
+                <? if (substr($icon, -4) == '.png'): ?>
+                    <? $icon = "<img src='/{$button['root']}/icons/$icon' class='system'>"; ?>
+                <? elseif (substr($icon, 0, 5) == 'icon-'): ?>
+                    <? $icon = "<b class='$icon system'></b>"; ?>
+                <? else: ?>
+                    <? if (substr($icon, 0, 3) != 'fa-'): ?>
+                        <? $icon = "fa-$icon"; ?>
+                    <? endif; ?>
+                    <? $icon = "<b class='fa $icon system'></b>"; ?>
+                <? endif; ?>
+
+                <div class="nav-item <?= $button['name'] ?> util">
+                    <a
+                        href="<?= _var($button, 'Href', '#') ?>"
+                        onclick="<?= $button['name'] ?>();return false;"
+                        title="<?= _($button['Title']) ?>"
+                    >
+                        <?= $icon ?>
+                        <span><?= _($button['Title']) ?></span>
+                    </a>
+                </div>
+            <? else: ?>
+                <div class="<?= $button['Link'] ?>"></div>
+            <? endif; ?>
+        <? endforeach; ?>
+        <? unset($buttonPages, $button); ?>
+
+        <div class="nav-user show">
+            <a id="board" href="#" class="hand">
+                <b id="bell" class="icon-u-bell system"></b>
+            </a>
+        </div>
+
+        <? if ($themeHelper->isSidebarTheme()): ?>
+            </div>
+        <? endif; ?>
+    </div>
+</div>
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 263d71659..2b8c91faf 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -447,7 +447,7 @@ div.title.shift {
 .nav-tile {
     height: 4rem;
     line-height: 4rem;
-    display: block;
+    display: flex;
     padding: 0;
     margin: 0;
     font-size: 1.2rem;
@@ -463,11 +463,13 @@ div.title.shift {
 }
 .nav-tile.right {
     text-align: right;
+    justify-content: flex-end;
 }
 .nav-item,
 .nav-user {
     position: relative;
-    display: inline-block;
+    display: flex;
+    align-items: center;
     text-align: center;
     margin: 0;
 }