From 13614d2cdc7aa1c874ead36abc09743a22fbae41 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Tue, 12 Jun 2018 08:34:59 +1000 Subject: [PATCH] Built out (functional) hamburger menu --- public/footer/Footer.jsx | 5 +- public/images/icons/hamburger.svg | 8 +++ public/nav/menu/HamburgerMenu.jsx | 80 ++++++++++++++++++++++ public/nav/navbar/Navbar.jsx | 6 ++ public/page/Routes.jsx | 1 - public/page/about/AboutPage.jsx | 4 +- public/styles/index.scss | 1 + public/styles/objects/_hamburger-menu.scss | 52 ++++++++++++++ public/styles/objects/_navbar.scss | 10 +-- public/styles/settings/colors.scss | 3 + public/styles/settings/z.scss | 10 +-- 11 files changed, 166 insertions(+), 14 deletions(-) create mode 100644 public/images/icons/hamburger.svg create mode 100644 public/nav/menu/HamburgerMenu.jsx create mode 100644 public/styles/objects/_hamburger-menu.scss diff --git a/public/footer/Footer.jsx b/public/footer/Footer.jsx index d974bca..277a675 100644 --- a/public/footer/Footer.jsx +++ b/public/footer/Footer.jsx @@ -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 ( - + Link - + ); } diff --git a/public/images/icons/hamburger.svg b/public/images/icons/hamburger.svg new file mode 100644 index 0000000..57f5a45 --- /dev/null +++ b/public/images/icons/hamburger.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/nav/menu/HamburgerMenu.jsx b/public/nav/menu/HamburgerMenu.jsx new file mode 100644 index 0000000..581127c --- /dev/null +++ b/public/nav/menu/HamburgerMenu.jsx @@ -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 ( +
  • + Home +
    • + ); +} + +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 ( +
    + + + +
    + ); + } +} + +export default HamburgerMenu; diff --git a/public/nav/navbar/Navbar.jsx b/public/nav/navbar/Navbar.jsx index 6dfc0fd..8d28a83 100644 --- a/public/nav/navbar/Navbar.jsx +++ b/public/nav/navbar/Navbar.jsx @@ -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 { diff --git a/public/page/Routes.jsx b/public/page/Routes.jsx index cdbfb5a..247bf05 100644 --- a/public/page/Routes.jsx +++ b/public/page/Routes.jsx @@ -39,7 +39,6 @@ const RouteWrapper = (props) => { return ( { let CustomTag = props.page; - console.log(props); return (
    diff --git a/public/page/about/AboutPage.jsx b/public/page/about/AboutPage.jsx index 53c2c6b..6056ed9 100644 --- a/public/page/about/AboutPage.jsx +++ b/public/page/about/AboutPage.jsx @@ -65,9 +65,9 @@ const AboutPage = (props) => { - + { Language.get("pages.about.video.heading") } - </Heading1> + { Language.get("pages.about.video.paragraph") } diff --git a/public/styles/index.scss b/public/styles/index.scss index 68853a7..c852e54 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -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'; diff --git a/public/styles/objects/_hamburger-menu.scss b/public/styles/objects/_hamburger-menu.scss new file mode 100644 index 0000000..581be5c --- /dev/null +++ b/public/styles/objects/_hamburger-menu.scss @@ -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; + } + } +} diff --git a/public/styles/objects/_navbar.scss b/public/styles/objects/_navbar.scss index bc50bc6..b5fd1d3 100644 --- a/public/styles/objects/_navbar.scss +++ b/public/styles/objects/_navbar.scss @@ -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; } diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss index 8dd3518..d3d4985 100644 --- a/public/styles/settings/colors.scss +++ b/public/styles/settings/colors.scss @@ -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; diff --git a/public/styles/settings/z.scss b/public/styles/settings/z.scss index c028b9e..a00d08a 100644 --- a/public/styles/settings/z.scss +++ b/public/styles/settings/z.scss @@ -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