Tweak the header

client/layouts/Github.tsx

@@ -1,44 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import React from 'react';
-
-const Github: React.FC<{}> = () => {
-    return (
-        <a href="https://github.com/phuoc-ng/csslayout" rel="noopener noreferrer" target="_blank">
-            <svg
-                className="z-10"
-                width="80"
-                height="80"
-                viewBox="0 0 250 250"
-                style={{
-                    position: 'fixed',
-                    right: 0,
-                    top: 0,
-                }}
-                aria-hidden={true}
-            >
-                <path d={`M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z`} fill="#00449E" />
-                <path
-                    d={`M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6
-                        C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2`}
-                    fill="#ffffff"
-                    style={{ transformOrigin: '130px 106px' }}
-                />
-                <path
-                    d={`M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6
-                        C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1
-                        C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6
-                        C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5
-                        C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5
-                        C139.8,137.7 141.6,141.9 141.8,141.8 Z`}
-                    fill="#ffffff"
-                />
-            </svg>
-        </a>
-    );
-};
-
-export default Github;

client/layouts/Header.tsx

@@ -0,0 +1,27 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+import './header.css';
+
+const Header: React.FC<{}> = () => {
+    return (
+        <header className="header">
+            <div className="container">
+                <div className="header__nav">
+                    <Link to="/">
+                        <img src="/assets/logo.svg" />
+                    </Link>
+                    <Link to="/patterns">Patterns</Link>
+                    <a href="https://github.com/phuoc-ng/csslayout">GitHub</a>
+                </div>
+            </div>
+        </header>
+    );
+};
+
+export default Header;

client/layouts/Layout.tsx

@@ -3,22 +3,20 @@
  * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-import React, { useEffect } from 'react';
+import * as React from 'react';
 
 import Footer from './Footer';
-import Github from './Github';
+import Header from './Header';
 
 const Layout: React.FC<{}> = ({ children }) => {
-    useEffect(() => {
+    React.useEffect(() => {
         window.scrollTo(0, 0);
     }, []);
 
     return (
         <>
-            <Github />
-            <div className="ml-auto mr-auto max-w-4xl mb-12">
-                {children}
-            </div>
+            <Header />
+            {children}
             <Footer />
         </>
     );

client/layouts/header.css

@@ -0,0 +1,16 @@
+.header {
+    background-color: var(--background-color);
+}
+.header__nav {
+    align-items: center;
+    display: flex;
+    font-size: 1.2rem;
+}
+.header__nav a:first-child {
+    margin-left: 0;
+    margin-right: auto;
+}
+.header__nav a {
+    color: var(--text-color);
+    margin-left: 1rem;
+}