YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Built out (functional) hamburger menu

Browse Source
This commit is contained in:
Dominic Masters
2018-06-12 08:34:59 +10:00
parent 9dd724a8d4
commit 13614d2cdc
11 changed files with 166 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/footer/Footer.jsx
View File

@ -22,14 +22,15 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { NavLink } from 'react-router-dom'
import { PageBoundary } from './../page/Page';
const FooterLink = function(props) {
return (
<span className="c-footer__link">
<a href="#">
<NavLink to="/about">
Link
</a>
</NavLink>
</span>
);
}

8
public/images/icons/hamburger.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version='1.0' encoding='iso-8859-1'?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24">
<g fill="#FFFFFF">
<path d="M24,3c0-0.6-0.4-1-1-1H1C0.4,2,0,2.4,0,3v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V3z"/>
<path d="M24,11c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V11z"/>
<path d="M24,19c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V19z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 548 B

80
public/nav/menu/HamburgerMenu.jsx Normal file
View File

@ -0,0 +1,80 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { NavLink } from 'react-router-dom';
const HamburerMenuItem = function(props) {
return (
<li className="o-hamburger-menu__link">
<NavLink to={ props.to }>Home</NavLink>
</li>
);
}
class HamburgerMenu extends React.Component {
constructor(props) {
super(props);
this.state ={
open: false
}
this.toggleMenuBound = this.toggleMenu.bind(this);
}
toggleMenu() {
this.setState({
open: !this.state.open
});
}
render() {
let clazz = "o-hamburger-menu";
if(this.state && this.state.open) clazz += " is-open";
if(this.props.className) clazz += " " + this.props.className;
return (
<div className={clazz}>
<button
type="button"
className="o-hamburger-menu__button"
onClick={this.toggleMenuBound}
>
<img
src={ require('./../../images/icons/hamburger.svg') }
className="o-hamburger-menu__icon"
/>
</button>
<ul className="o-hamburger-menu__menu">
<HamburerMenuItem to="/" />
<HamburerMenuItem to="/" />
<HamburerMenuItem to="/" />
</ul>
</div>
);
}
}
export default HamburgerMenu;

6
public/nav/navbar/Navbar.jsx
View File

@ -27,6 +27,7 @@ import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom'
import PageBoundary from './../../page/PageBoundary';
import Language from './../../language/Language';
import HamburgerMenu from './../menu/HamburgerMenu';
const NavbarLink = function(props) {
return (
@ -48,6 +49,7 @@ class Navbar extends React.Component {
<PageBoundary>
<nav className="o-navbar__nav">
{/* Logo */}
<NavLink to="/" className="o-navbar__logo-container" activeClassName="is-active">
<img
src={ require('./../../images/logo.svg') }
@ -56,9 +58,13 @@ class Navbar extends React.Component {
/>
</NavLink>
{/* Desktop / Tablet Screen Links */}
<NavbarLink to="/" title="home" exact />
<NavbarLink to="/about" title="about" />
<NavbarLink to="/contact" title="contact" exact />
{/* Hamburger Menu for smaller screens */}
<HamburgerMenu className="o-navbar__hamburger" />
</nav>
</PageBoundary>
</section>

1
public/page/Routes.jsx
View File

@ -39,7 +39,6 @@ const RouteWrapper = (props) => {
return (
<Route {...props} render={() => {
let CustomTag = props.page;
console.log(props);
return (
<main className="o-main">
<CustomTag />

4
public/page/about/AboutPage.jsx
View File

@ -65,9 +65,9 @@ const AboutPage = (props) => {
<Split className="u-text-center" padded>
<ElementScrollFader from="bottom">
<Heading1>
<Title>
{ Language.get("pages.about.video.heading") }
</Heading1>
</Title>
<Paragraph>
{ Language.get("pages.about.video.paragraph") }
</Paragraph>

1
public/styles/index.scss
View File

@ -66,6 +66,7 @@
@import './objects/_element-scroll-fader.scss';
@import './objects/_floating-content-box.scss';
@import './objects/_form.scss';
@import './objects/_hamburger-menu.scss';
@import './objects/_input.scss';
@import './objects/_loader.scss';
@import './objects/_navbar.scss';

52
public/styles/objects/_hamburger-menu.scss Normal file
View File

@ -0,0 +1,52 @@
/*
* Hamburger Menu
* Mobile-Centric openable menu with a hamburger icon to toggle.
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/z.scss
*
* Version:
* 1.0.0 - 2018/06/12
*/
.o-hamburger-menu {
border: 1px solid red;
&__menu {
@extend %t-list-blank;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $s-color--menu__background;
z-index: $s-z--menu;
}
&__link {
@extend %t-list-litem-blank;
}
&__button {
position: relative;//Helps us win the Z-Fight
width: 100%;
height: 100%;
padding: 0.5em;
cursor: pointer;
z-index: $s-z--menu-button;
}
&__icon {
display: block;
}
&.is-open {
.o-hamburger-menu__menu {
display: block;
}
}
}

10
public/styles/objects/_navbar.scss
View File

@ -37,7 +37,6 @@ $o-navbar--link-thickness: 5px;
&__logo-container {
width: 100%;
padding: 0.5em;
text-align: center;
}
&__logo {
@ -81,12 +80,12 @@ $o-navbar--link-thickness: 5px;
}
}
&__hamburger {
}
@include t-media-query($s-xsmall-up) {
//padding: 1em;
&__logo-container {
text-align: left;
&__hamburger {
display: none;
}
&__logo {
@ -99,6 +98,7 @@ $o-navbar--link-thickness: 5px;
}
@include t-media-query($s-small-up) {
&__logo {
width: 12em;
}

3
public/styles/settings/colors.scss
View File

@ -41,6 +41,9 @@ $s-color--navbar__text-hover: #CCC;
$s-color--navbar__bar-hover: $s-color--pastel-blue;
$s-color--navbar__bar-active: $s-color--pastel-green;
//Menu Colors
$s-color--menu__background: red;
//loader
$s-color--loader: $s-color--swatch-blue;

10
public/styles/settings/z.scss
View File

@ -3,9 +3,11 @@
* Provides Z-Index tracking, for use throughout the theme.
*
* Version:
* 1.0.0 - 2018/05/07
* 1.0.1 - 2018/06/12
*/
$s-z--background: -1;
$s-z--navbar: 10; //Navbar
$s-z--transition: 1;//The Z-Index of an element in transition
$s-z--background: -1; //Background Element
$s-z--navbar: 10; //Navbar
$s-z--menu: 15; //Hamburger Menu
$s-z--menu-button: 16; //Button to toggle menu.
$s-z--transition: 1; //The Z-Index of an element in transition