diff --git a/components/header.js b/components/header.js index caa250b39..b937a31d6 100644 --- a/components/header.js +++ b/components/header.js @@ -3,6 +3,7 @@ import Headroom from 'react-headroom'; import NProgress from 'nprogress'; import Router from 'next/router'; import Link from 'next/link'; +import FaEllipsisV from 'react-icons/lib/fa/ellipsis-v'; import GlobalStyles from './global-styles'; import Head from './head'; @@ -19,146 +20,182 @@ Router.onRouteChangeError = () => { NProgress.done(); }; -export default props => { - const title = - props.url.pathname === '/' - ? 'Home' - : props.url.pathname.split('/')[1].toUpperCase(); - const navItems = [ - { - title: 'Home', - path: '/', - external: false, - }, - { - title: 'Learn', - path: '/learn', - external: false, - }, - { - title: 'Space', - path: '/space', - external: false, - }, - { - title: 'Events', - path: '/events', - external: false, - }, - { - title: 'Blog', - path: 'https://medium.com/coderplex', - external: true, - }, - ]; - return ( - -
- - -
- -
-
- - - ); -}; + .nav__links { + margin: 0; + padding: 0; + list-style: none; + flex: 2; + display: flex; + align-items: center; + } + .nav__linkItem { + flex: 1; + text-align: center; + display: flex; + justify-content: center; + } + .nav__linkItem :global(.dropdown__linkItem) { + display: flex; + justify-content: center; + align-items: center; + } + .nav__linkItem img { + width: 30px; + height: 30px; + border-radius: 50%; + margin-right: 5px; + } + .nav__link { + text-decoration: none; + color: #666; + font-size: 14px; + padding-bottom: 4px; + } + .nav__link:hover { + color: #444; + } + .nav__link--active { + color: #444; + border-bottom: 2px solid #314159; + pointer-events: none; + } + @media (max-width: 700px) { + nav { + ${this.state.navToggled + ? ` + display: flex; + flex-flow: column wrap; + ` + : null}; + } + .nav__logo { + width: 100%; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + } + .nav__toggle { + display: flex; + z-index: 1000; + } + .nav__links { + display: ${this.state.navToggled ? 'flex' : 'none'}; + flex-flow: column; + justify-content: center; + } + } + `} + + ); + } +} diff --git a/package-lock.json b/package-lock.json index b17c4a45c..0f106c9ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2,7 +2,6 @@ "name": "coderplex-app", "version": "1.0.0", "lockfileVersion": 1, - "requires": true, "dependencies": { "@semantic-release/commit-analyzer": { "version": "3.0.7",