senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Mobile Menu, slideout, styling and component restructure

Browse Source
This commit is contained in:
Moris Zen
2018-07-05 16:49:34 +02:00
parent 3051a7d188
commit d6df2f0270
8 changed files with 187 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/Header.js
View File

@@ -2,47 +2,75 @@ import React from 'react'
import Link from 'gatsby-link'
import LogoSaburly from '../images/logo-saburly-white.svg'
import Button from './Button'
import Slideout from 'slideout'
import './Header.css'
let menuClasses =
'no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
'no-underline mt-4 lg:inline-block opacity-80 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
const Header = () => (
<header className="bg-saburly-indigo">
<nav className="container mx-auto flex justify-between lg:p-6 p-4">
<Link to="/">
<img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
</Link>
class Header extends React.Component {
componentDidMount() {
var Slideout = require('slideout')
<button className="menu_icon lg:invisible">
<span className="menu_bar-top" />
<span className="menu_bar-mid" />
<span className="menu_bar-bot" />
</button>
const slideout = new Slideout({
panel: document.querySelector('.side-panel'),
menu: document.querySelector('.side-menu'),
toggle: document.querySelector('.side-toggle'),
padding: 0,
tolerance: 70,
side: 'right',
})
<div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
<ul className="list-reset text-sm">
<Link to="/services">
<li className={menuClasses}>What We Do</li>
</Link>
<Link to="/about">
<li className={menuClasses}>Team</li>
</Link>
<Link to="/blog">
<li className={menuClasses}>Blog</li>
</Link>
document
.querySelector('.side-toggle')
.addEventListener('click', function() {
slideout.toggle()
})
}
<Button
text="Contact"
standard
classes="rounded-full text-white hover:shadow"
url="/contact"
/>
</ul>
render() {
return (
<div>
<header className="bg-saburly-indigo">
<nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
<Link to="/">
<img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
</Link>
<div className="side-toggle">
<button className="menu_icon visible lg:invisible">
<span className="menu_bar-top" />
<span className="menu_bar-mid" />
<span className="menu_bar-bot" />
</button>
</div>
<div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
<ul className="list-reset text-sm">
<Link to="/services">
<li className={menuClasses}>What We Do</li>
</Link>
<Link to="/about">
<li className={menuClasses}>Team</li>
</Link>
<Link to="/blog">
<li className={menuClasses}>Blog</li>
</Link>
<Button
text="Contact"
standard
classes="rounded-full text-white hover:shadow"
url="/contact"
/>
</ul>
</div>
</nav>
</header>
</div>
</nav>
</header>
)
)
}
}
export default Header