Hide external links behind hamburger button at certain sizes

This commit is contained in:
Chuck Dries 2022-07-12 12:32:26 -07:00
parent e3a088a0fc
commit a51ead0b83
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
4 changed files with 114 additions and 71 deletions

View File

@ -58,6 +58,7 @@
"postcss-nested": "^5.0.5", "postcss-nested": "^5.0.5",
"ramda": "^0.27.1", "ramda": "^0.27.1",
"react": "^17.0.1", "react": "^17.0.1",
"react-cool-dimensions": "^2.0.7",
"react-div-100vh": "^0.7.0", "react-div-100vh": "^0.7.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",

View File

@ -4,7 +4,10 @@ const R = require('ramda')
const resolveConfig = require('tailwindcss/resolveConfig'); const resolveConfig = require('tailwindcss/resolveConfig');
const tailwindConfig = require('../tailwind.config.js'); const tailwindConfig = require('../tailwind.config.js');
const {theme} = resolveConfig(tailwindConfig); 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; export default themeBreakpoints;

View File

@ -1,6 +1,9 @@
import React from "react"; import React, { useState } from "react";
import classnames from "classnames"; import classnames from "classnames";
import { Link } from "gatsby"; import { Link } from "gatsby";
import useDimensions from "react-cool-dimensions";
import ShowMenu from "@spectrum-icons/workflow/ShowMenu";
const getNavClasses = (isClient) => const getNavClasses = (isClient) =>
classnames( classnames(
@ -8,80 +11,111 @@ const getNavClasses = (isClient) =>
isClient ? "text-vibrant-light" : "text-gray-200" isClient ? "text-vibrant-light" : "text-gray-200"
); );
const Nav = ({ isClient, internalLinks, className }) => ( const Nav = ({ isClient, internalLinks, className }) => {
<nav const { observe, currentBreakpoint } = useDimensions({
className={classnames( breakpoints: { XS: 0, LG: 670 },
"m-2 flex justify-center font-sans", updateOnBreakpointChange: true,
isClient ? "text-vibrant-light" : "text-gray-200", });
className const [linksMenu, setLinksMenu] = useState(false);
)}
style={{ zIndex: 100 }} return (
> <nav
<div
className={classnames( className={classnames(
"rounded-full p-2 ]", "m-2 flex justify-center font-sans w-full",
isClient isClient ? "text-vibrant-light" : "text-gray-200",
? "bg-vibrant-dark cool-border-small-light" className
: "border border-white"
)} )}
ref={observe}
style={{ zIndex: 100 }}
> >
<ul className="inline-flex flex-wrap justify-center"> <div
{internalLinks && className={classnames(
internalLinks.map(({ href, label }) => ( "rounded-full p-2",
<li key={href}> isClient
<Link ? "bg-vibrant-dark cool-border-small-light"
activeClassName="font-bold underline" : "border border-white"
)}
>
<ul className="inline-flex flex-wrap justify-center">
{internalLinks &&
internalLinks.map(({ href, label }) => (
<li key={href}>
<Link
activeClassName="font-bold underline"
className={getNavClasses(isClient)}
to={href}
>
{label}
</Link>
</li>
))}
</ul>
{internalLinks && currentBreakpoint === "LG" && <>|</>}
{currentBreakpoint === "XS" && (
<button
className="ml-2 hover:underline inline-flex align-middle"
onClick={() => setLinksMenu(!linksMenu)}
>
<ShowMenu
UNSAFE_className="mr-2"
aria-label="show external links"
size="S"
/>
</button>
)}
{(currentBreakpoint === "LG" || linksMenu) && (
<ul
className={classnames(
currentBreakpoint === "LG"
? "inline-flex flex-wrap justify-center"
: "fixed bg-vibrant-dark p-2 rounded-md cool-border-small-light right-4"
)}
>
<li>
<a
className={getNavClasses(isClient)} className={getNavClasses(isClient)}
to={href} href="https://twitter.com/chuckletmilk"
> >
{label} Twitter
</Link> </a>
</li> </li>
))} <li>
{internalLinks && <>|</>} <a
<li> className={getNavClasses(isClient)}
<a href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/"
className={getNavClasses(isClient)} >
href="https://twitter.com/chuckletmilk" Instagram
> </a>
Twitter </li>
</a> <li>
</li> <a
<li> className={getNavClasses(isClient)}
<a href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg"
className={getNavClasses(isClient)} >
href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/" YouTube
> </a>
Instagram </li>
</a> <li>
</li> <a
<li> className={getNavClasses(isClient)}
<a href="https://github.com/chuckdries"
className={getNavClasses(isClient)} >
href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg" GitHub
> </a>
YouTube </li>
</a> <li>
</li> <a
<li> className={getNavClasses(isClient)}
<a href="mailto:chuck@chuckdries.com"
className={getNavClasses(isClient)} >
href="https://github.com/chuckdries" chuck@chuckdries.com
> </a>
GitHub </li>
</a> </ul>
</li> )}
<li> </div>
<a </nav>
className={getNavClasses(isClient)} );
href="mailto:chuck@chuckdries.com" };
>
chuck@chuckdries.com
</a>
</li>
</ul>
</div>
</nav>
);
export default Nav; export default Nav;

View File

@ -12362,6 +12362,11 @@ rc@^1.2.7, rc@^1.2.8:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" strip-json-comments "~2.0.1"
react-cool-dimensions@^2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==
react-dev-utils@^12.0.1: react-dev-utils@^12.0.1:
version "12.0.1" version "12.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"