Add basic nav bar styling

web/src/components/Svg/Svg.js

@@ -0,0 +1,17 @@
+const Svg = ({name, className: className2}) => {
+
+  const svgs = {
+    "plus-circle": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>,
+    "plus":<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+    </svg>,
+  }
+
+  return <div className={"h-10 w-10 " + className2}>
+    {svgs[name]}
+  </div>
+}
+
+export default Svg

web/src/layouts/MainLayout/MainLayout.js

@@ -1,31 +1,36 @@
 import { Link, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
+import avatar from 'src/assets/harold.jpg'
+import Svg from 'src/components/Svg'
+import Tooltip from '@material-ui/core/Tooltip';
 
 const MainLayout = ({ children }) => {
   const { logIn, logOut, isAuthenticated } = useAuth()
   return (
     <>
       <header>
-        <nav>
-          <ul>
+        <nav className="flex justify-between h-20 bg-gray-900">
+          <ul className="flex items-center">
             <li>
-              <Link to={routes.about()}>About</Link>
+              <Link to={routes.home()}>
+                <Tooltip title="We need a logo!" >
+                  <div className="h-10 w-10 bg-indigo-500 rounded-full ml-12" data-tip="hello world" data-place="bottom"></div>
+                </Tooltip>
+              </Link>
             </li>
             <li>
-              <Link to={routes.home()}>Home</Link>
-            </li>
-            <li>
-              <Link to={routes.parts()}>Parts</Link>
-            </li>
-            <li>
-              <Link to={routes.contact()}>Contact</Link>
-            </li>
-            <li>
-              <a href="#" onClick={isAuthenticated ? logOut : logIn}>
-                {isAuthenticated ? 'Log Out' : 'Log In'}
-              </a>
+              <Tooltip title="Very alpha, there's lots of work todo" >
+                <div className="ml-8 flex">
+                  <h2 className="text-indigo-200 text-2xl">CadHub</h2>
+                  <div className="text-pink-500 pb-4 text-sm" >pre-alpha</div>
+                </div>
+              </Tooltip>
             </li>
           </ul>
+          <ul className="flex items-center">
+            <li className="mr-8 rounded-full border-2 border-indigo-300"><Svg name="plus" className="text-indigo-300" /></li>
+            <li className="mr-12 p-px border-2 rounded-full border-indigo-300"><img src={avatar} className="rounded-full h-10 w-10" /></li>
+          </ul>
         </nav>
       </header>
       <main>{children}</main>