Get server listing design working mostly correct

resources/scripts/components/NavigationBar.tsx

@@ -1,51 +1,76 @@
 import * as React from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLayerGroup } from '@fortawesome/free-solid-svg-icons/faLayerGroup';
-import { faUserCircle } from '@fortawesome/free-solid-svg-icons/faUserCircle';
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
-import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
-import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
+import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
-import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import SearchContainer from '@/components/dashboard/search/SearchContainer';
+import tw from 'twin.macro';
+import styled from 'styled-components/macro';
+import * as config from '@/../../tailwind.config.js';
+
+const Navigation = styled.div`
+    ${tw`w-full bg-neutral-900 shadow-md`};
+    
+    & > div {
+        ${tw`mx-auto w-full flex items-center`};
+    }
+    
+    & #logo {
+        ${tw`flex-1`};
+        
+        & > a {
+            ${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`};
+        }
+    }
+`;
+
+const RightNavigation = styled.div`
+    ${tw`flex h-full items-center justify-center`};
+    
+    & > a, & > .navigation-link {
+        ${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
+        
+        &:active, &:hover {
+            ${tw`text-neutral-100 bg-black`};
+        }
+        
+        &:active, &:hover, &.active {
+            box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']};
+        }
+    }
+`;
 
 export default () => {
     const user = useStoreState((state: ApplicationStore) => state.user.data!);
     const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
 
     return (
-        <div id={'navigation'}>
-            <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
+        <Navigation>
+            <div css={tw`mx-auto w-full flex items-center`} style={{ maxWidth: '1200px', height: '3.5rem' }}>
                 <div id={'logo'}>
                     <Link to={'/'}>
                         {name}
                     </Link>
                 </div>
-                <div className={'right-navigation'}>
+                <RightNavigation>
                     <SearchContainer/>
-                    <NavLink to={'/'} exact={true}>
+                    <NavLink to={'/'} exact>
                         <FontAwesomeIcon icon={faLayerGroup}/>
                     </NavLink>
                     <NavLink to={'/account'}>
                         <FontAwesomeIcon icon={faUserCircle}/>
                     </NavLink>
                     {user.rootAdmin &&
-                    <a href={'/admin'} target={'_blank'}>
+                    <a href={'/admin'} target={'_blank'} rel={'noreferrer'}>
                         <FontAwesomeIcon icon={faCogs}/>
                     </a>
                     }
-                    {process.env.NODE_ENV !== 'production' &&
-                    <NavLink to={'/design'}>
-                        <FontAwesomeIcon icon={faSwatchbook}/>
-                    </NavLink>
-                    }
                     <a href={'/auth/logout'}>
                         <FontAwesomeIcon icon={faSignOutAlt}/>
                     </a>
-                </div>
+                </RightNavigation>
             </div>
-        </div>
+        </Navigation>
     );
 };