Merge pull request #14 from jayfallon/responsive-header

Responsive header
jayfallon · Jul 30, 2019 · 1da2923 · 1da2923 · vercel · Jul 30, 2019
2 parents ed8ed93 + f078602
commit 1da2923
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 6 deletions.
diff --git a/components/Footer/index.js b/components/Footer/index.js
@@ -27,7 +27,7 @@ const Footer = props => (
                     </li>
                 </ul>
                 <p className="footer__link--top">
-                    <Link href="#pageTop"><a title="hello">Back to top</a></Link>
+                    <a title="hello" href="#pageTop">Back to top</a>
                 </p>
             </nav>
 

diff --git a/components/Header/index.js b/components/Header/index.js
@@ -4,7 +4,7 @@ import DrawerToggleButton from './drawerToggle'
 
 const Header = (props) => (
 
-    <HeaderStyles id="pageTop">
+    <HeaderStyles>
         <section className="header__content">
             <h1>
                 <Link href="/"><a title="Link to home page">Jay Fallon</a></Link>

diff --git a/components/Meta/index.js b/components/Meta/index.js
@@ -6,7 +6,7 @@ const Meta = () => (
     <meta charSet="utf-8" />
     <link rel="shortcut icon" href="/static/favicon.png" />
     <link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
-    <title>Jay Fallon - UX Designer &amp; Engineer</title>
+    <title>Jay Fallon - Digital Designer, Developer & Data Nerd</title>
   </Head>
 );
 

diff --git a/components/Page.js b/components/Page.js
@@ -36,6 +36,7 @@ class Page extends Component {
           <SideDrawer show={this.state.sideDrawerOpen} hide={this.drawerCloseClickHandler}/>
           <a href="#main__content" className="main__content--link">Skip to main content</a>
           <Header drawerClickHandler={this.drawerToggleClickHandler}/>
+          <a name="pageTop" id="pageTop"/>
           <main id="main__content" role="main">
             {this.props.children}
           </main>

diff --git a/components/Resume/index.js b/components/Resume/index.js
@@ -87,7 +87,6 @@ const Resume = props => (
         {resumeData.map((elem, i) => (
             <article key={i}>
             <>
-
                 <h3>{elem.sectionTitle}</h3>
 
                     {

diff --git a/components/SideDrawer/index.js b/components/SideDrawer/index.js
@@ -25,6 +25,7 @@ const SideDrawer = props => {
                 <Link href="/static/resume/jayfallon-resume-2019.pdf"><a target="_blank" title="Download Jay's resume">Download Resume</a></Link>
                 </li>
             </ul>
+            <div className="sideDrawer__close"><i class="fal fa-times"></i></div>
         </SideDrawerStyles>
     )
 }

diff --git a/components/SideDrawer/styles.js b/components/SideDrawer/styles.js
@@ -1,21 +1,25 @@
 import styled from 'styled-components'
 
 const SideDrawerStyles = styled.nav`
+padding-top: 4rem;
     transform: translateX(-100%);
-    transition: transform 0.2s ease-in-out;
+    transition: transform 0.2s ease-out;
     &.open {
         transform: translateX(0);
     }
     z-index: 300;
+    width: 100%;
     height: 100%;
     background-color: #fff;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 4rem 2rem;
+    display: flex;
+    justify-content: space-between;
     ul {
-        padding-top: 4rem;
+        
     }
     li {
         padding-bottom: 2rem;
@@ -26,6 +30,12 @@ const SideDrawerStyles = styled.nav`
         font-weight: bold;
         text-decoration: none;
     }
+
+    div.sideDrawer__close {
+        margin-right: 2rem;
+        cursor: pointer;
+        font-size: 3rem;
+    }
 `
 
 export default SideDrawerStyles
diff --git a/pages/_document.js b/pages/_document.js
@@ -113,6 +113,7 @@ export default class MyDocument extends Document {
             rel="apple-touch-startup-image"
           />
           <link rel="stylesheet" href="https://use.typekit.net/dwo1agu.css" />
+          <script src="https://kit.fontawesome.com/6fe37eaa4f.js"></script>
         </Head>
         <body>
           <Main />
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ const Footer = props => ( @@
                         </li>
                     </ul>
                     <p className="footer__link--top">
-                        <Link href="#pageTop"><a title="hello">Back to top</a></Link>
+                        <a title="hello" href="#pageTop">Back to top</a>
                     </p>
                 </nav>
@@ Expand Down @@