Skip to content

Commit

Permalink
add hamburger menu and remove oversized panels
Browse files Browse the repository at this point in the history
  • Loading branch information
leobauza committed Jul 18, 2018
1 parent d6a827c commit 53ad183
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 31 deletions.
96 changes: 80 additions & 16 deletions packages/microcosm-www-next/src/layouts/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Link from 'gatsby-link'
import Helmet from 'react-helmet'
Expand All @@ -12,21 +12,85 @@ if (isBrowser) {
require('lazysizes') //lazy loading images
}

const Navigation = () => (
<nav className="navigation">
<div className="wrapper">
<h1>
<span className="screenreader-only">Microcosm</span>
<img src={microcosmLogo} alt="" />
</h1>

{/*
@TODO add menu back in later
<img src={menu} alt="menu" />
*/}
</div>
</nav>
)
class Navigation extends Component {
constructor(props) {
super(props)

this.state = {
hidden: true
}
}

handleHamburger = () => {
const { hidden } = this.state

this.setState({
hidden: !hidden
})
}

closeHamburger = () => {
this.setState({
hidden: true
})
}

render() {
const { hidden } = this.state

return (
<nav onMouseLeave={this.closeHamburger} className="navigation">
<div className="wrapper">
<h1>
<span className="screenreader-only">Microcosm</span>
<img src={microcosmLogo} alt="" />
</h1>

<button
onClick={this.handleHamburger}
aria-controls="menu"
className="hamburger"
>
Open Navigation
</button>
<ul
id="menu"
aria-hidden={hidden || null}
className="hamburger-dropdown"
>
<li>
<a
href="http://code.viget.com/microcosm/guides/quickstart.html"
target="_blank"
rel="noopener noreferrer"
>
Microcosm Guides
</a>
</li>
<li>
<a
href="http://code.viget.com/microcosm/api/"
target="_blank"
rel="noopener noreferrer"
>
Microcosm API
</a>
</li>
<li>
<a
href="https://github.com/vigetlabs/microcosm"
target="_blank"
rel="noopener noreferrer"
>
Microcosm Github
</a>
</li>
</ul>
</div>
</nav>
)
}
}

const Footer = () => (
<footer className="footer">
Expand Down
49 changes: 49 additions & 0 deletions packages/microcosm-www-next/src/stylesheets/structure/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,54 @@
display: flex;
height: inherit;
justify-content: space-between;
position: relative;
}
}

.hamburger {
background: none;
border-bottom: 3px solid white;
border-top: 3px solid white;
height: 23px;
position: relative;
text-indent: -9999px;
width: 28px;

&::after {
background: white;
border-top: 3px solid white;
content: "";
display: block;
height: 0;
left: 0;
position: absolute;
top: 50%;
transform: translate(0, -1px);
width: 100%;
}
}

.hamburger-dropdown {
background: #aaa;
border: 1px solid #aaa;
position: absolute;
right: 0;
top: 100%;

border-top: none;

&[aria-hidden] {
display: none;
}

a {
display: block;
padding: 20px;
text-decoration: none;

&:hover, &:focus {
background: white;
color: #aaa;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,13 @@ $split-bg-height-desktop: 291px;

.section {
background-color: color(bg-0-bottom);
min-height: 140vh;
min-height: 100vh;
padding-bottom: 60px;
padding-top: $section-top-padding-mobile;
position: -webkit-sticky;
position: sticky;
top: 0;

&:last-child {
min-height: 100vh;
}

@include breakpoint(medium-desktop-up) {
@media (max-height: 900px) { //from desktop up, if the screen is long enough (i.e. enough space), fix footer to bottom
min-height: 100vh;
}
}

@include breakpoint(small-desktop-down) {
min-height: 100vh;
}

@include breakpoint(medium-desktop-up) {
padding-top: $section-top-padding-desktop;
}
Expand Down

0 comments on commit 53ad183

Please sign in to comment.