diff --git a/package.json b/package.json index d2554ab..77fd518 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "postcss-nested": "^5.0.5", "ramda": "^0.27.1", "react": "^17.0.1", + "react-cool-dimensions": "^2.0.7", "react-div-100vh": "^0.7.0", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", diff --git a/src/breakpoints.js b/src/breakpoints.js index 97aca46..4729111 100644 --- a/src/breakpoints.js +++ b/src/breakpoints.js @@ -4,7 +4,10 @@ const R = require('ramda') const resolveConfig = require('tailwindcss/resolveConfig'); const tailwindConfig = require('../tailwind.config.js'); const {theme} = resolveConfig(tailwindConfig); -module.exports = R.map(size => parseInt(size, 10), theme.screens); +module.exports = R.pipe( + R.map(size => parseInt(size, 10)), + R.filter(Boolean) +)(theme.screens); `; export default themeBreakpoints; diff --git a/src/components/Nav.js b/src/components/Nav.js index 839855e..9825df4 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -1,87 +1,116 @@ -import React from "react"; +import React, { useState } from "react"; import classnames from "classnames"; import { Link } from "gatsby"; +import useDimensions from "react-cool-dimensions"; -const getNavClasses = (isClient) => - classnames( +import Menu from "@spectrum-icons/workflow/Menu"; + +const Nav = ({ isClient, internalLinks, className }) => { + const { observe, currentBreakpoint } = useDimensions({ + breakpoints: { XS: 0, LG: 690 }, + updateOnBreakpointChange: true, + }); + const [linksMenu, setLinksMenu] = useState(false); + + const navClasses = classnames( "hover:underline mx-2 md:mx-3", isClient ? "text-vibrant-light" : "text-gray-200" ); - -const Nav = ({ isClient, internalLinks, className }) => ( - -); +
  • + + Instagram + +
    • +
  • + + YouTube + +
    • +
  • + + GitHub + +
    • +
  • + + chuck@chuckdries.com + +
    • + + )} + + + ); +}; export default Nav; diff --git a/src/pages/index.js b/src/pages/index.js index ee55db5..114a5a3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -137,7 +137,7 @@ const IndexPage = ({