From a759f3f9d44d4bd6d8c481a4eb5c1657a811b1a4 Mon Sep 17 00:00:00 2001 From: Dan Beddows Date: Sat, 30 Jan 2021 14:30:33 +0000 Subject: [PATCH] added styled-components and refactored nav component --- .babelrc | 4 + components/Sidebar.js | 384 -------------------- components/Sidebar.module.css | 293 --------------- components/Springboard.js | 64 ++++ components/Springboard/ContentWrapper.js | 63 ++++ components/Springboard/Footer.js | 89 +++++ components/Springboard/Footer/SocialLink.js | 29 ++ components/Springboard/Header.js | 130 +++++++ components/Springboard/MobileButton.js | 115 ++++++ components/Springboard/Nav.js | 56 +++ components/Springboard/Nav/Item.js | 95 +++++ package-lock.json | 85 ++++- package.json | 3 +- pages/_app.js | 4 +- pages/_document.js | 26 +- 15 files changed, 755 insertions(+), 685 deletions(-) create mode 100644 .babelrc delete mode 100644 components/Sidebar.js create mode 100644 components/Springboard.js create mode 100644 components/Springboard/ContentWrapper.js create mode 100644 components/Springboard/Footer.js create mode 100644 components/Springboard/Footer/SocialLink.js create mode 100644 components/Springboard/Header.js create mode 100644 components/Springboard/MobileButton.js create mode 100644 components/Springboard/Nav.js create mode 100644 components/Springboard/Nav/Item.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..854cb73 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["next/babel"], + "plugins": [["styled-components", { "ssr": true }]] +} diff --git a/components/Sidebar.js b/components/Sidebar.js deleted file mode 100644 index f5d277b..0000000 --- a/components/Sidebar.js +++ /dev/null @@ -1,384 +0,0 @@ -import { - faGithub, - faLinkedin, - faTwitter, -} from "@fortawesome/free-brands-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { motion, useReducedMotion } from "framer-motion"; -import Image from "next/image"; -import Link from "next/link"; -import React, { useEffect, useState } from "react"; -import useWindowDimensions from "../util/hooks/useWindowDimensions.js"; -import styles from "./Sidebar.module.css"; - -const Sidebar = () => { - const [isDisplayMobile, setIsDisplayMobile] = useState(true); - const shouldReduceMotion = useReducedMotion(); - - const [menuOpen, setMenuOpen] = useState(false); - - let windowDimensions = useWindowDimensions(); - - const closeMobileMenu = () => { - setMenuOpen(false); - }; - - const toggleMenu = () => { - setMenuOpen(!menuOpen); - }; - - /** - * useEffect to track changes to the window dimensions and update the state that tracks - * whether the user is on mobile or larger - * - * the sidebar interactions behave differently for mobile vs desktop, so we must track - * window size changes - */ - useEffect(() => { - if (windowDimensions) { - let mobileBreakpoint = 768; - let isMobile = windowDimensions.width <= mobileBreakpoint; - - // Only update state if the new state value has changed - if (isMobile != isDisplayMobile) { - setIsDisplayMobile(isMobile); - setMenuOpen(!isMobile); - } - } - }, [windowDimensions]); - - return ( - - -
- - ); -}; - -const MobileButton = (props) => { - const buttonVariantsMotion = { - open: (height = 1000) => ({ - clipPath: `circle(${height * 2 + 200}px at calc(100% - 65px) 65px)`, - pointerEvents: "none", - transition: { - type: "spring", - stiffness: 20, - restDelta: 2, - }, - }), - closed: { - clipPath: "circle(36px at calc(100% - 65px) 65px)", - pointerEvents: "auto", - transition: { - delay: 0.3, - type: "spring", - stiffness: 400, - damping: 40, - }, - }, - }; - - const buttonVariantsNoMotion = { - open: (height = 1000) => ({ - clipPath: `circle(${height * 2 + 200}px at calc(100% - 65px) 65px)`, - pointerEvents: "none", - opacity: 1, - transition: { - duration: 0.3, - }, - }), - closed: (height = 1000) => ({ - clipPath: `circle(${height * 2 + 200}px at calc(100% - 65px) 65px)`, - pointerEvents: "auto", - opacity: 0, - transition: { - delay: 0.2, - duration: 0.3, - }, - }), - }; - - return ( -
- -
- -
-
- ); -}; - -const Header = (props) => { - let headerVariants = { - open: { display: "flex" }, - closed: { - transition: { delay: 1 }, - display: "none", - }, - }; - - const headerIntroVariantsMotion = { - open: { - opacity: 1, - transition: { - delay: 0.2, - }, - }, - closed: { - opacity: 0, - transition: { - delay: 0.2, - }, - }, - }; - - const headerIntroVariantsNoMotion = { - open: { - opacity: 1, - transition: { - delay: 0.2, - duration: 0.2, - }, - }, - closed: { - opacity: 0, - transition: { - duration: 0.2, - }, - }, - }; - - const closeIfMobile = () => { - if (props.isMobile) { - props.closeMenu(); - } - }; - - return ( - - - - - - - - - -
Dan Beddows
-
Full Stack Web Developer
- - - - -