Improve look of navbar.

Author: HalfVoxel

admin/dist/css/default.css

@@ -362,3 +362,21 @@ 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;
+    }
+}

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} />

admin/src/nav.jsx

@@ -26,21 +26,20 @@ export const NavItem = (props) => {
 export const Nav = ({ nav: { brand, items } }) => (
     <nav className="uk-navbar-container">
         <div data-uk-navbar>
-            <div className="uk-navbar-left">
+            <div className="ms-navbar-left uk-margin-left uk-margin-right uk-navbar-left">
                 <Link to="/" className="uk-navbar-item uk-logo">
                     {brand}
                 </Link>
-
-                {/* Using a <ul> each with a _single_ <li> sounds insane,
-                    but that's apparently the way UI-kit is built */}
+            </div>
+            <ul className="ms-navbar-center uk-navbar-nav">
                 {items.map((item, i) => (
-                    <ul className="uk-navbar-nav" key={i}>
-                        <NavItem to={item.target} icon={item.icon}>
-                            {item.text}
-                        </NavItem>
-                    </ul>
+                    <NavItem key={i} to={item.target} icon={item.icon}>
+                        {item.text}
+                    </NavItem>
                 ))}
-            </div>
+            </ul>
+            {/* Used to compensate for the left side, to make the center truly centered */}
+            <div className="ms-navbar-right"></div>
         </div>
     </nav>
 );