Header changes

src/components/Header/Header.jsx

@@ -1,5 +1,6 @@
 import icon from './icon.png'
 import styled from 'styled-components'
+import { Link } from 'wouter'
 
 function Header() {
 
@@ -8,12 +9,16 @@ function Header() {
         height: 15vh;
 
         display: flex;
+        justify-content: space-between;
         align-items: center;
 
         padding: 0px 2vw;
 
         border-bottom: 1px solid #eee;
 
+        user-select: none;
+        cursor: pointer;
+
         .logotype {
             display: flex;
             align-items: center;
@@ -40,16 +45,41 @@ function Header() {
             }
         }
 
+        .links {
+            display: flex;
+            flex-direction: column;
+
+            a {
+                color: #000;
+                font-weight: bold;
+                text-decoration: none;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+
     `
-    
+
     return (
         <HeaderStyles>
-            <div className='logotype'>
+            <Link href='/'>
-                <img src={icon} alt="Page icon"></img>
+                <div className='logotype'>
-                <h1>Telegram to Notion Bot</h1>
+                    <img src={icon} alt="Page icon"></img>
-            </div>
+                    <h1>Telegram to Notion Bot</h1>
-            <div>
+                </div>
-
+            </Link>
+            <div className="links">
+                <Link href="/about">
+                    About
+                </Link>
+                <Link href="/privacy-policy">
+                    Privacy policy
+                </Link>
+                <Link href="/terms-of-use">
+                    Terms of use
+                </Link>
             </div>
         </HeaderStyles>
     )