diff --git a/web/package-lock.json b/web/package-lock.json index 1169ba277..478343c22 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -23,6 +23,7 @@ "react-feather": "^2.0.10", "react-modal": "^3.14.3", "react-syntax-highlighter": "^15.5.0", + "react-transition-group": "^4.4.5", "tailwindcss": "^3.2.4" }, "devDependencies": { @@ -5462,6 +5463,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -9834,6 +9844,21 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -16717,6 +16742,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -19794,6 +19828,17 @@ "use-latest": "^1.2.1" } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/web/package.json b/web/package.json index cb90c18a9..1439b244c 100644 --- a/web/package.json +++ b/web/package.json @@ -29,6 +29,7 @@ "react-feather": "^2.0.10", "react-modal": "^3.14.3", "react-syntax-highlighter": "^15.5.0", + "react-transition-group": "^4.4.5", "tailwindcss": "^3.2.4" }, "devDependencies": { diff --git a/web/src/components/Nav/index.js b/web/src/components/Nav/index.js index 2e1410405..cfce05977 100644 --- a/web/src/components/Nav/index.js +++ b/web/src/components/Nav/index.js @@ -1,11 +1,14 @@ -import React from 'react' +import React, { useState } from 'react' import Link from '@docusaurus/Link' import { Star, Twitter } from 'react-feather' +import Transition from '../../lib/Transition' import { DiscordIcon, TwitterIcon } from './SocialIcons' const Nav = () => { + const [open, setOpen] = useState(false) + const Logo = () => (
@@ -57,8 +60,11 @@ const Nav = () => { ) - const HamburgerButton = () => ( -
+ const HamburgerButton = ({ toggleFlyOut }) => ( +
toggleFlyOut()} + >
+
+ + {/* Mobile Nav Menu */} + +
+
+
+ +
+
+ +
+ {/* Docs */} +
+ + + Docs + + +
+ + {/* Docs */} +
+ + + Blog + + +
+ + {/* FAQ */} +
+ setOpen(false)}> + + FAQ + + +
+ + {/* Join the list */} +
+ setOpen(false)}> + + 📬 Join the list + + +
+ + {/* GitHub */} +
+ + + ⭐️ GitHub + + +
+ + {/* Discord */} +
+ + + 👾 Discord + + +
+ + {/* Twitter */} +
+ + + 🐦 Twitter + + +
+ +
+
+ + + -
diff --git a/web/src/lib/Transition.js b/web/src/lib/Transition.js new file mode 100644 index 000000000..72135b217 --- /dev/null +++ b/web/src/lib/Transition.js @@ -0,0 +1,108 @@ +// From: https://gist.github.com/adamwathan/3b9f3ad1a285a2d1b482769aeb862467 + +import { CSSTransition as ReactCSSTransition } from 'react-transition-group' +import React, { useRef, useEffect, useContext } from 'react' + +const TransitionContext = React.createContext({ + parent: {}, +}) + +function useIsInitialRender() { + const isInitialRender = useRef(true) + useEffect(() => { + isInitialRender.current = false + }, []) + return isInitialRender.current +} + +function CSSTransition({ + show, + enter = '', + enterFrom = '', + enterTo = '', + leave = '', + leaveFrom = '', + leaveTo = '', + appear, + children, +}) { + const enterClasses = enter.split(' ').filter((s) => s.length) + const enterFromClasses = enterFrom.split(' ').filter((s) => s.length) + const enterToClasses = enterTo.split(' ').filter((s) => s.length) + const leaveClasses = leave.split(' ').filter((s) => s.length) + const leaveFromClasses = leaveFrom.split(' ').filter((s) => s.length) + const leaveToClasses = leaveTo.split(' ').filter((s) => s.length) + + function addClasses(node, classes) { + classes.length && node.classList.add(...classes) + } + + function removeClasses(node, classes) { + classes.length && node.classList.remove(...classes) + } + + return ( + { + node.addEventListener('transitionend', done, false) + }} + onEnter={(node) => { + addClasses(node, [...enterClasses, ...enterFromClasses]) + }} + onEntering={(node) => { + removeClasses(node, enterFromClasses) + addClasses(node, enterToClasses) + }} + onEntered={(node) => { + removeClasses(node, [...enterToClasses, ...enterClasses]) + }} + onExit={(node) => { + addClasses(node, [...leaveClasses, ...leaveFromClasses]) + }} + onExiting={(node) => { + removeClasses(node, leaveFromClasses) + addClasses(node, leaveToClasses) + }} + onExited={(node) => { + removeClasses(node, [...leaveToClasses, ...leaveClasses]) + }} + > + {children} + + ) +} + +function Transition({ show, appear, ...rest }) { + const { parent } = useContext(TransitionContext) + const isInitialRender = useIsInitialRender() + const isChild = show === undefined + + if (isChild) { + return ( + + ) + } + + return ( + + + + ) +} + +export default Transition