chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Hide external links behind hamburger button at certain sizes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

5
src/breakpoints.js
View File

@ -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;

174
src/components/Nav.js
View File

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

5
yarn.lock
View File

@ -12362,6 +12362,11 @@ rc@^1.2.7, rc@^1.2.8:
minimist "^1.2.0"
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:
version "12.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"