From 8bb892a07d388fef30d278e5333746ad3488de8d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 21 Jul 2018 22:21:00 +0200 Subject: [PATCH] port over main menu --- package.json | 2 +- src/components/Layout.jsx | 2 +- src/components/Layout.module.scss | 11 ++- src/components/atoms/Hamburger.jsx | 14 ++++ src/components/atoms/Hamburger.module.scss | 77 ++++++++++++++++++ src/components/molecules/Header.jsx | 60 -------------- src/components/molecules/Menu.jsx | 79 +++++++++++++++++++ src/components/molecules/Menu.module.scss | 42 ++++++++++ src/components/organisms/Header.jsx | 58 ++++++++++++++ .../Header.module.scss | 54 ++++++++++++- src/styles/base.scss | 14 ++++ src/templates/Archive.module.scss | 5 +- 12 files changed, 345 insertions(+), 73 deletions(-) create mode 100644 src/components/atoms/Hamburger.jsx create mode 100644 src/components/atoms/Hamburger.module.scss delete mode 100644 src/components/molecules/Header.jsx create mode 100644 src/components/molecules/Menu.jsx create mode 100644 src/components/molecules/Menu.module.scss create mode 100644 src/components/organisms/Header.jsx rename src/components/{molecules => organisms}/Header.module.scss (63%) diff --git a/package.json b/package.json index c66bb79e..22cc9f26 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "prettier": "^1.13.7", "prettier-stylelint": "^0.4.2", "stylelint": "^9.2.1", - "stylelint-config-css-modules": "^1.2.0", + "stylelint-config-css-modules": "^1.3.0", "stylelint-config-recommended-scss": "^3.2.0", "stylelint-config-standard": "^18.2.0", "stylelint-scss": "^3.2.0" diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index f0648912..706709fc 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' import Container from './atoms/Container' import Head from './molecules/Head' -import Header from './molecules/Header' +import Header from './organisms/Header' import styles from './Layout.module.scss' const Layout = ({ children, location }) => { diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index be6fad1e..ff535144 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -9,7 +9,6 @@ } .site__content, -.header__content, .footer__content { padding: 0 $spacer; width: 100%; @@ -33,19 +32,19 @@ 0 -1px 4px rgba($brand-main, .2); transform: translate3d(0, 0, 0); - .has-menu-open & { - transform: translate3d(0, 0, 0); + :global(.has-menu-open) & { + transform: translate3d(0, ($spacer * 8), 0); } @media (min-width: $screen-sm) { @include transition; - margin-top: $spacer * 3; + margin-top: $spacer * 2.65; position: relative; z-index: 2; - .has-menu-open & { - transform: translate3d(0, ($spacer * 8), 0); + :global(.has-menu-open) & { + transform: translate3d(0, ($spacer * 5), 0); } } } diff --git a/src/components/atoms/Hamburger.jsx b/src/components/atoms/Hamburger.jsx new file mode 100644 index 00000000..f5c0d87f --- /dev/null +++ b/src/components/atoms/Hamburger.jsx @@ -0,0 +1,14 @@ +import React from 'react' +import styles from './Hamburger.module.scss' + +const Hamburger = props => ( + +) + +export default Hamburger diff --git a/src/components/atoms/Hamburger.module.scss b/src/components/atoms/Hamburger.module.scss new file mode 100644 index 00000000..35d0bb5f --- /dev/null +++ b/src/components/atoms/Hamburger.module.scss @@ -0,0 +1,77 @@ +@import 'variables'; +@import 'mixins'; + +.hamburgerLine { + @include transition; + + display: block; + position: absolute; + height: 3px; + width: 100%; + background: $text-color-light; + border-radius: 20px; + opacity: 1; + left: 0; + transform: rotate(0deg); + + &:nth-child(1) { + top: 0; + transform-origin: left center; + } + + &:nth-child(2) { + top: 5px; + transform-origin: left center; + } + + &:nth-child(3) { + top: 10px; + transform-origin: left center; + } + + // open state + :global(.has-menu-open) & { + &:nth-child(1) { + transform: rotate(45deg); + top: -1px; + } + + &:nth-child(2) { + width: 0%; + opacity: 0; + } + + &:nth-child(3) { + transform: rotate(-45deg); + top: 12px; + } + } +} + +.hamburgerButton { + padding: .65rem .85rem; + text-align: center; + line-height: 1; + vertical-align: middle; + display: inline-block; + margin: 0; + + &:hover, + &:focus { + outline: 0; + + .hamburgerLine { + background: $brand-cyan; + } + } +} + +.hamburger { + width: 18px; + height: 18px; + display: block; + position: relative; + transform: rotate(0deg); + cursor: pointer; + margin-top: 6px; +} diff --git a/src/components/molecules/Header.jsx b/src/components/molecules/Header.jsx deleted file mode 100644 index 449c5b89..00000000 --- a/src/components/molecules/Header.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react' -// import PropTypes from 'prop-types' -import { Link } from 'gatsby' -import styles from './Header.module.scss' -import layout from '../Layout.module.scss' - -const Header = () => { - return ( -
-
-

- - kremalicious - -

- - {/* */} - - {/*
- -
- - -
-
*/} - - {/* */} - - {/*
-
- -
-
*/} -
-
- ) -} - -Header.propTypes = {} - -export default Header diff --git a/src/components/molecules/Menu.jsx b/src/components/molecules/Menu.jsx new file mode 100644 index 00000000..023867b6 --- /dev/null +++ b/src/components/molecules/Menu.jsx @@ -0,0 +1,79 @@ +import React, { PureComponent, Fragment } from 'react' +import Helmet from 'react-helmet' +import { Link, StaticQuery, graphql } from 'gatsby' +import Hamburger from '../atoms/Hamburger' +import styles from './Menu.module.scss' + +class Menu extends PureComponent { + constructor() { + super() + + this.state = { + menuOpen: false + } + } + + toggleMenu = () => { + this.setState(prevState => ({ + menuOpen: !prevState.menuOpen + })) + } + + isMenuOpen = () => this.state.menuOpen === true + + render() { + return ( + + + + + { + const posts = data.allMarkdownRemark.edges + const categorySet = new Set() + + posts.forEach(post => { + if (post.node.frontmatter.category) { + categorySet.add(post.node.frontmatter.category) + } + }) + + const categoryList = Array.from(categorySet) + + const Categories = categoryList.map(category => ( +
  • + + {category} + +
    • + )) + + return ( + + +
      {Categories}
    +     + ) + }} + /> +     + ) + } +} + +export default Menu diff --git a/src/components/molecules/Menu.module.scss b/src/components/molecules/Menu.module.scss new file mode 100644 index 00000000..e435d202 --- /dev/null +++ b/src/components/molecules/Menu.module.scss @@ -0,0 +1,42 @@ +@import 'variables'; +@import 'mixins'; + +.menu { + position: absolute; + top: calc(100% + #{$spacer}); + left: 0; + display: flex; + flex-wrap: wrap; + width: 100%; + + li { + list-style: none; + flex: 0 0 100%; + + @media (min-width: $screen-sm) { + flex-basis: 33%; + } + + &::before { + display: none; + } + } + + opacity: 0; + + :global(.has-menu-open) & { + opacity: 1; + } + + a { + color: $text-color; + line-height: 1; + text-transform: uppercase; + margin: 0; + font-size: $font-size-small; + text-shadow: 0 1px 0 rgba(#fff, .5); + padding: $padding-base-horizontal; + display: block; + text-align: center; + } +} diff --git a/src/components/organisms/Header.jsx b/src/components/organisms/Header.jsx new file mode 100644 index 00000000..895c1800 --- /dev/null +++ b/src/components/organisms/Header.jsx @@ -0,0 +1,58 @@ +import React, { PureComponent } from 'react' +import { Link } from 'gatsby' +import Container from '../atoms/Container' +import Menu from '../molecules/Menu' +import Search from '../svg/MagnifyingGlass' + +import styles from './Header.module.scss' + +class Header extends PureComponent { + render() { + return ( +
    + +
    +

    + + kremalicious + +

    + + + + {/*
    +
    + + +
    +
    */} + + {/* */} + + {/*
    +
    + +
    +
    */} +
    +     +
    + ) + } +} + +Header.propTypes = {} + +export default Header diff --git a/src/components/molecules/Header.module.scss b/src/components/organisms/Header.module.scss similarity index 63% rename from src/components/molecules/Header.module.scss rename to src/components/organisms/Header.module.scss index e8a26e30..c1b636ad 100644 --- a/src/components/molecules/Header.module.scss +++ b/src/components/organisms/Header.module.scss @@ -6,8 +6,6 @@ margin-bottom: ($spacer/2); @media (min-width: $screen-sm) { - margin-top: $spacer; - margin-bottom: $spacer; position: fixed; width: 100%; z-index: 1; @@ -17,6 +15,19 @@ } } +.header__content { + @include breakoutviewport; + + position: relative; + display: flex; + justify-content: space-between; + padding: 0 $spacer; + + @media (min-width: $screen-md) { + padding: 0; + } +} + // Logo ///////////////////////////////////// @@ -44,7 +55,8 @@ } .title { - margin: 0; + margin-top: $spacer / 5; + margin-bottom: 0; // display toned down logo // by default @extend .logo; @@ -71,3 +83,39 @@ box-shadow: none; } } + +.nav { + display: inline-block; +} + +.search { + padding: .65rem .85rem; + text-align: center; + line-height: 1; + vertical-align: middle; + display: inline-block; + margin-right: $spacer / 4; + + &:focus { + outline: 0; + } + + svg { + fill: $text-color-light; + width: 21px; + height: 21px; + } + + &:hover, + &:focus { + svg { + fill: $brand-cyan; + } + } + + &:active { + svg { + fill: darken($brand-cyan, 30%); + } + } +} diff --git a/src/styles/base.scss b/src/styles/base.scss index d24ed792..39bb5437 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -61,6 +61,20 @@ textarea { line-height: inherit; } +// Reset default button element +button { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + + &:active { + transition: none; + text-shadow: none; + } +} + // Headings ///////////////////////////////////// diff --git a/src/templates/Archive.module.scss b/src/templates/Archive.module.scss index 9d7a71fd..01d5eadd 100644 --- a/src/templates/Archive.module.scss +++ b/src/templates/Archive.module.scss @@ -2,7 +2,8 @@ @import 'mixins'; .archiveTitle { - font-size: $font-size-h3; - @include heading-band(); + + font-size: $font-size-h3; + margin-top: 0; }