🔨 create Header component

EuCarlos · Nov 16, 2022 · ff51b5c · ff51b5c
1 parent c2f3bc7
commit ff51b5c
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,12 +2,14 @@ import axios from 'axios'
 import { useEffect, useState } from 'react'
 
 import { Report } from './components/Report'
+import { Header } from './components/Header'
+
 import { UID } from './utils/uid'
+import { trucateString } from './utils/trucate_string'
 
 import './styles/globals.sass'
 import './styles/search_reports.sass'
 import { setSearchHistory, getSearchHistory, removeSearchHistory } from './utils/search_history'
-import { trucateString } from './utils/trucate_string'
 
 function App() {
   const getURL = new URL(location.href)
@@ -59,6 +61,7 @@ function App() {
 
   return (
     <div className="App">
+      <Header />
       <div className={'forms'}>
         <input 
           type="url"
@@ -82,7 +85,7 @@ function App() {
       <h2>📝 {numberOfReports} Reports</h2>
       {numberOfReports <= 0 ? <div className={'report--not-found'}>No reports found</div>: reports}
 
-      <footer>Created by <a href="https://github.com/EuCarlos/pa11y-viewer">Carlos Alves</a></footer>
+      <footer>Created by <a href="http://carlosalves.now.sh/" target={'_blank'}>Carlos Alves</a></footer>
     </div>
   )
 }

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import '../../styles/menu.sass'
+
+export function Header() {
+    const [toggle, setToggle] = useState(false)
+
+    const handleToggle = () => setToggle(!toggle)
+
+    return (
+        <header>
+            <nav className="navbar">
+                <a href="/" className="nav-logo">
+                    <img 
+                        src={`http://${location.host}/assets/Pa11y-Viewer-Logo.svg`} 
+                        alt="Logo Pa11y Viewer"
+                        width={50}
+                    />
+                </a>
+                <ul className={`nav-menu ${toggle ? 'active' : ''}`}>
+                    <li className="nav-item">
+                        <a
+                            href="https://github.com/EuCarlos/pa11y-viewer"
+                            target={'_blank'} 
+                            className="nav-link">💻 Contribute
+                        </a>
+                    </li>
+                    <li className="nav-item">
+                        <a
+                            href="https://github.com/EuCarlos/pa11y-viewer/wiki/Pa11y-Viewer:-How-to-Use"
+                            target={'_blank'} 
+                            className="nav-link">📚 How to use
+                        </a>
+                    </li>
+                </ul>
+                <div className={`hamburger ${toggle ? 'active' : ''}`} onClick={() => handleToggle()}>
+                    <span className="bar"></span>
+                    <span className="bar"></span>
+                    <span className="bar"></span>
+                </div>
+            </nav>
+        </header>
+    )
+}
diff --git a/src/styles/menu.sass b/src/styles/menu.sass
@@ -0,0 +1,88 @@
+header
+    border-bottom: 1px solid #BCC3CC
+    li 
+        list-style: none
+    a 
+        text-decoration: none
+
+    .navbar 
+        display: flex
+        justify-content: space-between
+        align-items: center
+        padding: 1rem 1.5rem
+        width: 55rem
+
+        .nav-menu 
+            display: flex
+            justify-content: space-between
+            align-items: center
+
+            .nav-item 
+                margin-left: 3rem
+
+                .nav-link
+                    font-size: 1rem
+                    font-weight: 700
+                    color: #293241
+
+                    &:hover
+                        color: #ef233c
+
+    .hamburger 
+        display: none
+
+        .bar 
+            display: block
+            width: 25px
+            height: 3px
+            margin: 5px auto
+            -webkit-transition: all 0.3s ease-in-out
+            transition: all 0.3s ease-in-out
+            background-color: #293241
+
+// Laptops
+@media screen and (max-width: 992px)
+    header .navbar
+        width: 45rem
+// Tablets
+@media only screen and (max-width: 768px) 
+    header .navbar
+        width: 35rem 
+        .nav-menu 
+            position: absolute
+            left: -108%
+            top: 4rem
+            flex-direction: column
+            background-color: #fff
+            width: 100%
+            border-radius: 10px
+            text-align: center
+            transition: 0.3s
+            box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05)
+            z-index: 10
+
+            &.active 
+                left: 0
+                border-radius: 0
+
+            & .nav-item 
+                margin: 1.5rem 0
+
+    header .hamburger 
+        display: block
+        cursor: pointer
+
+        &.active .bar
+            &:nth-child(2) 
+                opacity: 0
+
+            &:nth-child(1) 
+                transform: translateY(8px) rotate(45deg)
+
+            &:nth-child(3) 
+                transform: translateY(-8px) rotate(-45deg)
+
+// Phones
+@media screen and (max-width: 600px)
+    header .navbar
+        width: 25rem