From d84a3381ecc120ec9853f877398f68a7f934e48c Mon Sep 17 00:00:00 2001
From: Erasmus Cedernaes <erasmus.cedernaes@gmail.com>
Date: Mon, 24 Feb 2025 20:46:44 +0100
Subject: [PATCH 1/2] Revert "Improve look of navbar."

This reverts commit 7e35929db1d3e1527e2b1c18d9cd764bb10ba941.
---
 admin/dist/css/default.css | 18 ------------------
 admin/src/app.jsx          |  2 +-
 admin/src/nav.jsx          | 19 ++++++++++---------
 3 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/admin/dist/css/default.css b/admin/dist/css/default.css
index df08b8ea..db0f0dca 100644
--- a/admin/dist/css/default.css
+++ b/admin/dist/css/default.css
@@ -362,21 +362,3 @@ button > svg {
     margin-right: 30px;
     font-size: 0.9em;
 }
-
-.ms-navbar-left,
-.ms-navbar-right {
-    flex: 1 0 0%;
-}
-
-.ms-navbar-right {
-    flex: 1 1 0%;
-}
-
-.ms-navbar-center {
-    flex-grow: 0;
-
-    li {
-        /* Prevent menu items from having their text wrapped if the screen is too small */
-        flex-shrink: 0;
-    }
-}
diff --git a/admin/src/app.jsx b/admin/src/app.jsx
index 2aada40d..6e150cbf 100644
--- a/admin/src/app.jsx
+++ b/admin/src/app.jsx
@@ -201,8 +201,8 @@ const App = () => {
                 <Route path="*">
                     {isLoggedIn && (
                         <div style={{ marginBottom: "2em" }}>
-                            <Nav nav={nav} className="uk-margin-top" />
                             <div className="uk-container uk-margin-top">
+                                <Nav nav={nav} className="uk-margin-top" />
                                 <div className="uk-grid">
                                     <div className="uk-width-1-4@m">
                                         <SideNav nav={nav} />
diff --git a/admin/src/nav.jsx b/admin/src/nav.jsx
index 66380244..9e44b38d 100644
--- a/admin/src/nav.jsx
+++ b/admin/src/nav.jsx
@@ -26,20 +26,21 @@ export const NavItem = (props) => {
 export const Nav = ({ nav: { brand, items } }) => (
     <nav className="uk-navbar-container">
         <div data-uk-navbar>
-            <div className="ms-navbar-left uk-margin-left uk-margin-right uk-navbar-left">
+            <div className="uk-navbar-left">
                 <Link to="/" className="uk-navbar-item uk-logo">
                     {brand}
                 </Link>
-            </div>
-            <ul className="ms-navbar-center uk-navbar-nav">
+
+                {/* Using a <ul> each with a _single_ <li> sounds insane,
+                    but that's apparently the way UI-kit is built */}
                 {items.map((item, i) => (
-                    <NavItem key={i} to={item.target} icon={item.icon}>
-                        {item.text}
-                    </NavItem>
+                    <ul className="uk-navbar-nav" key={i}>
+                        <NavItem to={item.target} icon={item.icon}>
+                            {item.text}
+                        </NavItem>
+                    </ul>
                 ))}
-            </ul>
-            {/* Used to compensate for the left side, to make the center truly centered */}
-            <div className="ms-navbar-right"></div>
+            </div>
         </div>
     </nav>
 );

From 39dff963ed1b9bfab67e734e93dd6e3a11729889 Mon Sep 17 00:00:00 2001
From: Erasmus Cedernaes <erasmus.cedernaes@gmail.com>
Date: Mon, 24 Feb 2025 21:35:54 +0100
Subject: [PATCH 2/2] Break navbar into multiple rows on mobile

---
 admin/src/app.jsx |  8 +++++---
 admin/src/nav.jsx | 28 +++++++++++++---------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/admin/src/app.jsx b/admin/src/app.jsx
index 6e150cbf..bbadec2b 100644
--- a/admin/src/app.jsx
+++ b/admin/src/app.jsx
@@ -200,9 +200,11 @@ const App = () => {
                 <Route path="/password-reset" component={PasswordReset} />
                 <Route path="*">
                     {isLoggedIn && (
-                        <div style={{ marginBottom: "2em" }}>
-                            <div className="uk-container uk-margin-top">
-                                <Nav nav={nav} className="uk-margin-top" />
+                        <div className="uk-margin-left uk-margin-right">
+                            <div className="uk-container-expand">
+                                <Nav nav={nav} />
+                            </div>
+                            <div className="uk-container">
                                 <div className="uk-grid">
                                     <div className="uk-width-1-4@m">
                                         <SideNav nav={nav} />
diff --git a/admin/src/nav.jsx b/admin/src/nav.jsx
index 9e44b38d..f3d477fb 100644
--- a/admin/src/nav.jsx
+++ b/admin/src/nav.jsx
@@ -24,23 +24,21 @@ export const NavItem = (props) => {
 };
 
 export const Nav = ({ nav: { brand, items } }) => (
-    <nav className="uk-navbar-container">
-        <div data-uk-navbar>
-            <div className="uk-navbar-left">
-                <Link to="/" className="uk-navbar-item uk-logo">
-                    {brand}
-                </Link>
+    <nav data-uk-navbar>
+        <div className="uk-navbar-center" style={{ gap: "0 2em" }}>
+            <Link to="/" className="uk-navbar-item uk-logo">
+                {brand}
+            </Link>
 
-                {/* Using a <ul> each with a _single_ <li> sounds insane,
+            {/* Using a <ul> each with a _single_ <li> sounds insane,
                     but that's apparently the way UI-kit is built */}
-                {items.map((item, i) => (
-                    <ul className="uk-navbar-nav" key={i}>
-                        <NavItem to={item.target} icon={item.icon}>
-                            {item.text}
-                        </NavItem>
-                    </ul>
-                ))}
-            </div>
+            {items.map((item, i) => (
+                <ul className="uk-navbar-nav" key={i}>
+                    <NavItem to={item.target} icon={item.icon}>
+                        {item.text}
+                    </NavItem>
+                </ul>
+            ))}
         </div>
     </nav>
 );