modified mobile navbar hebavior

AspectOfJerry · Dec 23, 2023 · 56a92ad · 56a92ad
1 parent 0bc7a52
commit 56a92ad
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 24 deletions.
diff --git a/src/pages/NotFound/NotFound.jsx b/src/pages/NotFound/NotFound.jsx
@@ -1,16 +1,14 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {motion, AnimatePresence} from "framer-motion";
 import "./NotFound.scss";
 import {Navbar} from "../components/index.js";
 
 const NotFound = ({toggleTheme, themes, theme}) => {
     const [fadeOut, setFadeOut] = useState(false);
+    const [buttonPos, setButtonPos] = useState({x: 0, y: 0});
 
     useEffect(() => {
-        // change title when component mounts
         document.title = "404 • jerrydev";
-
-        // reset the title when component unmounts
         return () => {
             document.title = "Jerry";
         };
@@ -20,7 +18,34 @@ const NotFound = ({toggleTheme, themes, theme}) => {
         setFadeOut(true);
         setTimeout(() => {
             window.location.href = "/";
-        }, 2350); // delay before redirecting
+        }, 2350);
+    };
+
+    const buttonRef = useRef(null);
+
+    const handleMouseMove = (e) => {
+        // Disable on mobile devices
+        if (window.innerWidth < 768) {
+            return;
+        }
+
+        const buttonRect = buttonRef.current.getBoundingClientRect();
+        const x = e.clientX - buttonRect.left - buttonRect.width / 2;
+        const y = e.clientY - buttonRect.top - buttonRect.height / 2;
+        const distance = Math.hypot(x, y);
+        const threshold = 150;
+
+        if (distance < threshold) {
+            const angle = Math.atan2(y, x);
+            const moveFactor = 5;
+            const moveDistance = (threshold - distance) * moveFactor;
+            setButtonPos({
+                x: -Math.cos(angle) * moveDistance,
+                y: -Math.sin(angle) * moveDistance
+            });
+        } else {
+            setButtonPos({x: 0, y: 0});
+        }
     };
 
     return (
@@ -32,8 +57,7 @@ const NotFound = ({toggleTheme, themes, theme}) => {
                 links={[{name: "Take me home", link: "/"}]}
                 extLinks={[{name: "Status page", link: "https://status.jerrydev.net"}]}
             />
-
-            <div id="NotFound" className="notfound">
+            <div id="NotFound" className="notfound" onMouseMove={handleMouseMove}>
                 <AnimatePresence>
                     {fadeOut && (
                         <motion.div
@@ -48,16 +72,25 @@ const NotFound = ({toggleTheme, themes, theme}) => {
                     )}
                 </AnimatePresence>
                 <h1 className="nf__nf-text ctext">
-                    Error 404 <br /> <br />
+                    oh no... Error 404 <br /> <br />
                     Whoops! It seems you've stumbled into the digital wilderness. <br />
                     The only way out is to press the mystical button below that says "Take me home". <br />
                     Rumor has it, it's the secret passage to a realm of bug-free adventures and endless wonders. <br />
                     Good luck, brave explorer!
                 </h1>
-                <p className="nf__redirect-text cext" onClick={handleRedirect}>&gt;&gt;&gt;&nbsp; Take me home &nbsp;&lt;&lt;&lt;</p>
+                <p
+                    className="nf__redirect-text"
+                    onClick={handleRedirect}
+                    ref={buttonRef}
+                    style={{
+                        transform: `translate(${buttonPos.x}px, ${buttonPos.y}px)`
+                    }}
+                >
+                    &gt;&nbsp;Take me home&nbsp;&lt;
+                </p>
             </div>
         </>
     );
 };
 
-export default NotFound;
+export default NotFound;
diff --git a/src/pages/NotFound/NotFound.scss b/src/pages/NotFound/NotFound.scss
@@ -8,7 +8,6 @@
 .nf__nf-text {
     margin: 3rem;
     font-size: 1.75rem;
-    color: var(--darkest-color);
     text-align: center;
 }
 
@@ -24,7 +23,6 @@
 
 .nf__fade-overlay-text {
     font-size: 1.75rem;
-    color: var(--light-color);
 
     // transition: color 0.50s;
     position: absolute;
@@ -35,9 +33,15 @@
 }
 
 .nf__redirect-text {
-    margin-top: 5rem;
+    margin-top: 3rem;
     font-size: 1.5rem;
     text-align: center;
-
     cursor: pointer;
+    color: var(--darkest-color);
+    line-height: 1.75;
+    transition: transform 1s ease-out, color 0.50s;
+
+    @media screen and (max-width: 480px) {
+        font-size: 1.10rem;
+    }
 }
diff --git a/src/pages/components/Navbar/Navbar.jsx b/src/pages/components/Navbar/Navbar.jsx
@@ -1,15 +1,17 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 
 import "./Navbar.scss";
 import {media} from "../../../constants/index.js";
-import {HiMenuAlt4, HiX} from "react-icons/hi"; // 49:42
+import {HiMenuAlt4, HiX} from "react-icons/hi";
 import {motion} from "framer-motion";
 
-const Navbar = ({toggleTheme, themes, theme, links, extLinks}) => { // 32:35
+const Navbar = ({toggleTheme, themes, theme, links, extLinks}) => {
     const [showMenu, setShowMenu] = useState(false);
     const [isShrunk, setShrunk] = useState(false);
     const scrollThreshold = 32;
 
+    const menuRef = useRef(null);
+
     useEffect(() => {
         let isScrolling = false;
 
@@ -34,6 +36,20 @@ const Navbar = ({toggleTheme, themes, theme, links, extLinks}) => { // 32:35
         };
     }, []);
 
+    // Add this useEffect hook
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setShowMenu(false);
+            }
+        }
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+
 
     return (
         <motion.nav
@@ -80,22 +96,26 @@ const Navbar = ({toggleTheme, themes, theme, links, extLinks}) => { // 32:35
                 </button>
             </div>
 
-            <div className={`${showMenu ? "app__navbar-menu" : "app__navbar-menu-hidden"}`}>
+            <div ref={menuRef} className={`${showMenu ? "app__navbar-menu" : "app__navbar-menu-hidden"}`}>
                 <HiMenuAlt4 onClick={() => setShowMenu(true)} />
 
                 <div>
                     <HiX onClick={() => setShowMenu(false)} />
                     <ul>
                         {links.map((dest, index) => (
                             <li className="app__flex text" key={index}>
-                                <a className="text-underline" href={dest.link}>{dest.name}</a>
+                                <a className="text-underline" onClick={() => setShowMenu(false)} href={dest.link}>
+                                    {dest.name}
+                                </a>
                             </li>
                         ))}
                     </ul>
                     <ul className="app__navbar-ext-links">
                         {extLinks.map((dest, index) => (
                             <li className="app__flex text" key={index}>
-                                <a className="text-underline" href={dest.link} target="_blank" rel="noreferrer">{dest.name}</a>
+                                <a className="text-underline" onClick={() => setShowMenu(false)} href={dest.link} target="_blank" rel="noreferrer">
+                                    {dest.name}
+                                </a>
                             </li>
                         ))}
                     </ul>

diff --git a/src/pages/components/Navbar/Navbar.scss b/src/pages/components/Navbar/Navbar.scss
@@ -184,7 +184,7 @@
         z-index: 5;
 
         width: 48%;
-        height: 65vh;
+        height: 55vh;
         border-radius: 25px;
 
         transition: all 0.70s;
@@ -222,7 +222,7 @@
             flex-direction: column;
 
             li {
-                margin: 1rem;
+                margin: 0.5rem;
 
                 a {
                     color: var(--dark-color);
@@ -260,13 +260,13 @@
     div {
         width: 0;
         opacity: 0;
-        transition: all 0.70s;
+        transition: all 0.60s;
 
         svg {
             // display: none;
             width: 0;
             height: 0;
-            transition: all 0.70s;
+            transition: all 0.60s;
         }
 
         @media screen and (min-width: 1024px) {