NavBar styling

Author: CodeStix

components/NavBar.tsx

@@ -1,17 +1,29 @@
 import { CenterContainer } from "./CenterContainer";
 import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub, faGithubAlt, faGithubSquare } from "@fortawesome/free-brands-svg-icons";
+import Link from "next/link";
+import { faBook } from "@fortawesome/free-solid-svg-icons";
 
 const Name = styled.span`
-    margin: 0.8em 0;
+    cursor: pointer;
+    padding: 0.8em;
     font-weight: bold;
     font-size: 1.5rem;
     color: #2065af;
     margin-right: auto;
 `;
 
-const NavItem = styled.div`
-    padding: 1em;
+const NavItem = styled.a`
+    display: block;
+    padding: 0.8em;
     color: #195daa;
+    cursor: pointer;
+
+    &:hover {
+        transition: 100ms;
+        color: black;
+    }
 `;
 
 const Container = styled.div`
@@ -20,13 +32,29 @@ const Container = styled.div`
     border-bottom: 1px solid #0002;
 `;
 
+const Icon = styled(FontAwesomeIcon)`
+    font-size: 2em;
+    /* color: #195daa; */
+`;
+
 export function NavBar() {
     return (
         <CenterContainer>
             <Container>
-                <Name>Typed React form</Name>
-                <NavItem>Test</NavItem>
-                <NavItem>GitHub</NavItem>
+                <Link href="/">
+                    <Name>
+                        <FontAwesomeIcon icon={faBook} />
+                        &nbsp;Typed React Form
+                    </Name>
+                </Link>
+                <Link href="https://github.com/codestix/typed-react-form" passHref>
+                    <NavItem>GitHub</NavItem>
+                </Link>
+                <Link href="https://github.com/codestix/typed-react-form" passHref>
+                    <NavItem>
+                        <Icon icon={faGithub} />
+                    </NavItem>
+                </Link>
             </Container>
         </CenterContainer>
     );

package.json

@@ -8,6 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "next": "10.0.8",
     "react": "17.0.1",
     "react-dom": "17.0.1",

yarn.lock

@@ -159,6 +159,39 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@fortawesome/fontawesome-common-types@^0.2.34":
+  version "0.2.34"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz#0a8c348bb23b7b760030f5b1d912e582be4ec915"
+  integrity sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==
+
+"@fortawesome/fontawesome-svg-core@^1.2.34":
+  version "1.2.34"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz#1d1a7c92537cbc2b8a83eef6b6d824b4b5b46b26"
+  integrity sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/free-brands-svg-icons@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz#d74e2540b5552b915d6bef719f17e361b70a8d65"
+  integrity sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/free-solid-svg-icons@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz#25bb035de57cf85aee8072965732368ccc8e8943"
+  integrity sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/react-fontawesome@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
+  integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/[email protected]":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10"