Merge pull request #12 from jayfallon/responsive-header

added sideDrawer and toggle
jayfallon · Jul 30, 2019 · f5ca3fa · f5ca3fa · vercel · Jul 30, 2019
2 parents b86b598 + 8ed4a37
commit f5ca3fa
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 11 deletions.
diff --git a/components/Banner/styles.js b/components/Banner/styles.js
@@ -2,8 +2,8 @@ import styled from 'styled-components'
 import media from '../MediaQueries'
 
 const HomeBannerStyles = styled.section`
-    margin: 0 auto;
-    padding: 0 2rem 4rem;
+    margin: 16rem auto 0;
+    padding: 4rem 2rem 4rem;
     max-width: 96rem;
     color: ${props => props.theme.bannerHomeTextColor};
     text-align: center;
@@ -12,7 +12,7 @@ const HomeBannerStyles = styled.section`
     justify-content: center;
     align-items: center;
     ${media.brotherbear`
-    padding: 10rem 2rem;
+        padding: 10rem 2rem;
     `}
     
     p {

diff --git a/components/Header/drawerToggle.js b/components/Header/drawerToggle.js
@@ -0,0 +1,11 @@
+import {DrawerToggleButtonStyles} from './styles'
+
+const DrawerToggleButton = props => (
+    <DrawerToggleButtonStyles className="toggleButton" onClick={props.click}>
+        <div className="toggleButtonLine"></div>
+        <div className="toggleButtonLine"></div>
+        <div className="toggleButtonLine"></div>
+    </DrawerToggleButtonStyles>
+)
+
+export default DrawerToggleButton
diff --git a/components/Header/index.js b/components/Header/index.js
@@ -1,7 +1,8 @@
 import Link from 'next/link';
 import HeaderStyles from './styles'
+import DrawerToggleButton from './drawerToggle'
 
-const Header = () => (
+const Header = (props) => (
 
     <HeaderStyles id="pageTop">
         <section className="header__content">
@@ -10,7 +11,8 @@ const Header = () => (
             </h1>
             <nav>
                 <h3>Digital Design &amp; Development</h3>
-                <ul>
+                <DrawerToggleButton click={props.drawerClickHandler}/>
+                <ul className="header__nav">
                     <li>
                         <Link href="/about"><a title="">About</a></Link>
                     </li>

diff --git a/components/Header/styles.js b/components/Header/styles.js
@@ -3,10 +3,15 @@ import media from '../MediaQueries'
 
 const HeaderStyles = styled.header`
     background-color: ${props => props.theme.headerBgColor};
+    width: 100%;
+    position: fixed;
     section.header__content {
         margin: 0 auto;
-        padding: 4rem 2rem 12rem;
+        padding: 1rem 2rem 1rem;
         max-width: 96rem;
+        ${media.brotherbear`
+            padding: 4rem 2rem 1rem;
+        `}
     }
     h1 {
         padding-bottom: 2rem;
@@ -30,9 +35,12 @@ const HeaderStyles = styled.header`
             color: ${props => props.theme.headerTextColor};
             font-size: 2rem;
         }
-        ul {
-            display: flex;
-            justify-content: space-between;
+        ul.header__nav {
+            display: none;
+            ${media.brotherbear`
+                display: flex;
+                justify-content: space-between;
+            `}
         }
         li {
             margin-left: 3.5rem;
@@ -45,3 +53,31 @@ const HeaderStyles = styled.header`
     }
 `
 export default HeaderStyles
+
+const DrawerToggleButtonStyles = styled.button`
+    background: transparent;
+    margin-right: 2rem;
+    width: 3rem;
+    height: 2.4rem;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    ${media.brotherbear`
+        display: none;
+    `}
+    &:focus {
+        outline: none;
+    }
+
+    div.toggleButtonLine {
+        background-color: #fff;
+        width: 3rem;
+        height: 0.3rem;
+    }
+`
+
+export {DrawerToggleButtonStyles}
+
diff --git a/components/Page.js b/components/Page.js
@@ -5,20 +5,33 @@ import Header from './Header';
 import Theme from './Theme';
 import Footer from './Footer';
 import GlobalStyle from './Global';
+import SideDrawer from './SideDrawer'
 
 const StyledPage = styled.div`
   height: 100%;
 `
 
 class Page extends Component {
+
+  state = {
+    sideDrawerOpen: false
+  }
+
+  drawerToggleClickHandler = () => {
+    this.setState(prevState => {
+      return { sideDrawerOpen: !prevState.sideDrawerOpen };
+    });
+  }
+
   render() {
     return(
       <ThemeProvider theme={Theme}>
         <StyledPage>
           <GlobalStyle />
           <Meta/>
+          <SideDrawer show={this.state.sideDrawerOpen}/>
           <a href="#main__content" className="main__content--link">Skip to main content</a>
-          <Header/>
+          <Header drawerClickHandler={this.drawerToggleClickHandler}/>
           <main id="main__content" role="main">
             {this.props.children}
           </main>

diff --git a/components/Resume/styles.js b/components/Resume/styles.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 const ResumeStyles = styled.section`
     background-color: ${props => props.theme.resumeBgColor};
     margin: 0 auto;
-    padding: 0 2rem 4rem;
+    padding: 17rem 2rem 4rem;
     color: ${props => props.theme.resumeTextColor};
 
     article {

diff --git a/components/SideDrawer/index.js b/components/SideDrawer/index.js
@@ -0,0 +1,32 @@
+import Link from 'next/link';
+import SideDrawerStyles from './styles'
+
+const SideDrawer = props => {
+    let drawerClasses = [''];
+    if(props.show) {
+        drawerClasses = ['open'];
+    }
+    return (
+        <SideDrawerStyles className={drawerClasses}>
+            <ul className="sideDrawer__nav">
+                <li>
+                    <Link href="/"><a title="Jay's home page">Home Page</a></Link>
+                </li>
+                <li>
+                    <Link href="/about"><a title="More about Jay">About</a></Link>
+                </li>
+                <li>
+                    <Link href="/projects"><a title="Jay's recent projects">Projects</a></Link>
+                </li>
+                <li>
+                    <Link href="/resume"><a title="Jay's cummulative experience">Experience</a></Link>
+                </li>
+                <li>
+                <Link href="/static/resume/jayfallon-resume-2019.pdf"><a target="_blank" title="Download Jay's resume">Download Resume</a></Link>
+                </li>
+            </ul>
+        </SideDrawerStyles>
+    )
+}
+
+export default SideDrawer
diff --git a/components/SideDrawer/styles.js b/components/SideDrawer/styles.js
@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+const SideDrawerStyles = styled.nav`
+    transform: translateX(-100%);
+    transition: transform 0.2 ease-in-out;
+    &.open {
+        transform: translateX(0);
+    }
+    z-index: 300;
+    height: 100%;
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 4rem 2rem;
+    ul {
+        padding-top: 4rem;
+    }
+    li {
+        padding-bottom: 2rem;
+    }
+    a {
+        color: #333;
+        font-size: 2rem;
+        font-weight: bold;
+        text-decoration: none;
+    }
+`
+
+export default SideDrawerStyles