add basic link + route

3 files changed, 74 insertions, 26 deletions

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 17240f5..2f438e9 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,15 +1,48 @@
 import React from 'react';
-import Header from './Header'
 import PasteArea from './PasteArea'
 import Footer from './Footer'
+import styled from 'styled-components'
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
+const SpacedTitle = styled.div`
+    margin-top: 10vh
+`
+
+const Inline = styled.div`
+    display: inline-block
+`
+
+const Desc = () => {
+  return (
+    <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
+  );
+}
 
 function App() {
   return (
-    <div className="lt-content-column">
-      <Header />
-      <PasteArea />
-      <Footer />
-    </div>
+    <Router>
+      <div className="lt-content-column">
+        <SpacedTitle>
+          <nav>
+            <h1 className="mainLogo">
+              <span role="img" aria-label="clipboard">📋&nbsp;</span>
+              <Link to="/">ctrl-v</Link>
+            </h1>
+
+            <Desc />
+          </nav>
+        </SpacedTitle>
+
+        <PasteArea/>
+
+        <Footer />
+      </div>
+    </Router>
   );
 }
 
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
deleted file mode 100644
index a0c5ee8..0000000
--- a/frontend/src/components/Header.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import styled from 'styled-components'
-
-const SpacedTitle = styled.div`
-    margin-top: 10vh
-`
-
-const Header = () => {
-    return (
-        <SpacedTitle>
-            <h1>
-                <span role="img" aria-label="clipboard">📋&nbsp;</span>
-                ctrl-v
-            </h1>
-            <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
-        </SpacedTitle>
-    );
-}
-
-export default Header;
\ No newline at end of file
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 3d05fa0..3279aac 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -94,4 +94,39 @@ input[type=submit] {
   padding: 0.8em 2em;
   margin: 2em 0;
   outline: 0;
+}
+
+ul {
+  list-style-type: none;
+  display: inline-block;
+}
+
+li {
+  display: inline-block;
+  margin: 0 1em;
+}
+
+.mainLogo {
+  display: inline-block;
+}
+
+.mainLogo a {
+  text-decoration: none;
+  position: relative;
+  margin: 3px;
+}
+
+.mainLogo a::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    background-color: #111111;
+    width: 0;
+    transition: width 0.25s ease;
+}
+
+.mainLogo:hover a::after {
+  width: 100%;
 }
\ No newline at end of file