diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 4f99dc0..8d3f0ae 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -1,19 +1,20 @@ import React, { useState, useEffect, useRef, useLayoutEffect } from "react"; import { css, cx } from "emotion"; -import { Link, useHistory } from "react-router-dom"; +import { useHistory } from "react-router-dom"; import { ReactComponent as Logo } from "../assets/logo.svg"; import { ReactComponent as Right } from "../assets/arrow-right.svg"; import { getTimeout } from "../util"; import Menu from "./Menu"; +import useMediaQuery from "../util/useMediaQuery"; const flash = css` span& { - width: 5.4rem; - height: 5.4rem; - opacity: 100%; + width: 5.6rem; + height: 5.6rem; top: -0.2rem; - left: -0.2rem; + left: -0.05rem; + opacity: 1; } `; @@ -35,7 +36,9 @@ const Container: React.FunctionComponent<{ }) => { const history = useHistory(); - const logoContainer = useRef(null); + const mobile = useMediaQuery("(max-width: 50rem)"); + + const logoContainer = useRef(null); const logo = useRef(null); const highlightCircle = useRef(null); const containerChild = useRef(null); @@ -127,25 +130,27 @@ const Container: React.FunctionComponent<{ position: relative; `}> {!hideNav && ( - setShowMenu(true)} - onMouseOut={() => setShowMenu(false)}> + onMouseOver={() => !mobile && setShowMenu(true)} + onMouseOut={() => !mobile && setShowMenu(false)}> (mobile ? setShowMenu(true) : history.push("/"))} /> - - + + )} {next && ( )}
= ({ show = false }) => ( -
-
    li { - margin-left: 1rem; - - & > a { - text-decoration: none; - } - } - `}> - - {menu.map(item => ( - {item.name} - ))} - -
-
-); +const desktopNav = css` + float: right; + padding-left: 6rem; + height: 5rem; +`; + +const offscreenNav = css` + height: 100vh; + width: 100vw; + position: fixed; + top: 0; + left: 0; + z-index: 900; + background: var(--background-colour); + padding: 6rem; + opacity: 0; + top: -100%; +`; + +const menuList = css` + z-index: 1000; + display: flex; + padding: 0; + list-style: none; + height: 100%; + margin: 0; + align-items: center; + font-weight: 800; + + & > li { + margin-left: 1rem; + + & > a { + text-decoration: none; + } + } +`; + +const mobileMenu = css` + flex-direction: column; + justify-content: center; + font-size: 2rem; + + & > li + li { + margin-top: 2rem; + margin-left: 0; + } +`; + +const Menu: React.FunctionComponent<{ show?: boolean; setShowMenu: (show: boolean) => void }> = ({ + show = false, + setShowMenu, +}) => { + const mobile = useMediaQuery("(max-width: 50rem)"); + + const menuItems = menu.map(item => ( + + {item.name} + + )); + + // TODO(mkr): refactor + return ( + +
    + + {mobile + ? menuItems.concat( +
    setShowMenu(false)} + className={css` + background: 0; + border: 0; + font-size: 3rem; + color: var(--text-colour); + cursor: pointer; + + &:hover { + color: var(--primary-colour); + } + `}> + ← +
    , + ) + : menuItems} +     +
+ + ); +}; export default Menu; diff --git a/src/components/RevealChildren.tsx b/src/components/RevealChildren.tsx index 7bf3538..04b9c21 100644 --- a/src/components/RevealChildren.tsx +++ b/src/components/RevealChildren.tsx @@ -14,6 +14,7 @@ const RevealChildren: React.FunctionComponent<{ <> {items.map((item, i) => ( + * It also monitor the document changes to detect when it matches or stops matching the media query.
+ * Returns the validity state of the given media query. + * + */ +const useMediaQuery = (mediaQuery: string) => { + const [isVerified, setIsVerified] = useState(!!window.matchMedia(mediaQuery).matches); + + useEffect(() => { + const mediaQueryList = window.matchMedia(mediaQuery); + const documentChangeHandler = () => setIsVerified(!!mediaQueryList.matches); + + try { + mediaQueryList.addEventListener("change", documentChangeHandler); + } catch (e) { + //Safari isn't supporting mediaQueryList.addEventListener + console.error(e); + mediaQueryList.addListener(documentChangeHandler); + } + + documentChangeHandler(); + + return () => { + try { + mediaQueryList.removeEventListener("change", documentChangeHandler); + } catch (e) { + //Safari isn't supporting mediaQueryList.removeEventListener + console.error(e); + mediaQueryList.removeListener(documentChangeHandler); + } + }; + }, [mediaQuery]); + + return isVerified; +}; + +export default useMediaQuery;