From 35c088e112c465845a553d562012f58c92045d97 Mon Sep 17 00:00:00 2001
From: pkurto16 <ptkurto3@gmail.com>
Date: Sun, 10 Nov 2024 20:50:02 -0500
Subject: [PATCH] Navigation modernization and scroll effect

---
 src/Nav.css | 152 ++++++++++++++++++++-------------------------
 src/Nav.jsx | 175 ++++++++++++++++++++++++++++++++++++----------------
 2 files changed, 189 insertions(+), 138 deletions(-)

diff --git a/src/Nav.css b/src/Nav.css
index 6d114cb..a300f9b 100644
--- a/src/Nav.css
+++ b/src/Nav.css
@@ -1,134 +1,118 @@
-.gpt3__navbar {
-    display: flex;
-    align-items: center;
-    background: rgb(113, 144, 189);
-    padding: 1rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
+:root {
+    --navbar-height: 6rem;
+    --navbar-height-scrolled: 4rem;
+    --primary-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
+    --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.nav-wrapper {
+    height: var(--navbar-height);
+    margin-bottom: 1rem;
     position: sticky;
-    top: 2px;
-    left: 2.5vw;
+    top: 0;
     z-index: 999;
-    width: 95vw;
+    width: 100%;
 }
-.gpt3__navbar-links {
-    flex: 1;
+
+.navbar {
     display: flex;
-    justify-content: flex-start;
     align-items: center;
+    justify-content: space-between;
+    background: var(--primary-gradient);
+    position: fixed;
+    box-shadow: var(--shadow-subtle);
+    backdrop-filter: blur(8px);
+    padding: 0 2rem;
 }
 
-.gpt3__navbar-links_logo {
+.navbar-links {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
 }
 
-.gpt3__navbar-links_logo img {
-    width: 12vw;
-    height: auto;
+.navbar-links_logo img {
+    height: 2.5rem;
+    width: auto;
+    transition: height 0.3s ease;
 }
 
-.gpt3__navbar-links_container {
+.navbar-links_container {
     display: flex;
     flex-direction: row;
     margin-left: auto;
+    gap: 1rem;
 }
 
-.gpt3__navbar-sign {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
+.navbar-links_container p,
+.navbar-menu_container p {
+    margin: 0;
 }
 
-.gpt3__navbar-links_container p,
-.gpt3__navbar-sign p,
-.gpt3__navbar-menu_container p {
-    color: #007bff; /* Blue text color */
-    font-family: var(--font-family);
+.navbar-links_container a,
+.navbar-menu_container a {
+    color: white;
+    text-decoration: none;
     font-weight: 500;
-    font-size: 18px;
-    line-height: 25px;
-    text-transform: capitalize;
-    margin: 0 1rem;
-    cursor: pointer;
+    font-size: 1.125rem;
+    padding: 0.75rem 1.25rem;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    transition: background 0.2s ease;
 }
 
-.gpt3__navbar-sign button,
-.gpt3__navbar-menu_container button {
-    padding: 0.5rem 1rem;
-    color: #fff;
-    background: #007bff; /* Blue button background color */
-    font-family: var(--font-family);
-    font-weight: 500;
-    font-size: 18px;
-    line-height: 25px;
-    border-radius: 5px;
-    border: 0;
-    outline: none;
-    cursor: pointer;
+.navbar-links_container a:hover,
+.navbar-menu_container a:hover {
+    background: rgba(255, 255, 255, 0.2);
 }
 
-.gpt3__navbar-menu {
+.navbar-menu {
     margin-left: 1rem;
     display: none;
     position: relative;
 }
 
-.gpt3__navbar-menu svg {
-    cursor: pointer;
-}
-
-.gpt3__navbar-menu_container {
+.navbar-menu_container {
     display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
     flex-direction: column;
-    text-align: end;
-    background: #f0f5fb; /* Light blue background color */
-    padding: 2rem;
+    background: var(--primary-gradient);
+    padding: 1rem;
     position: absolute;
-    top: 40px;
+    top: calc(100% + 0.5rem);
     right: 0;
-    margin-top: 1rem;
-    min-width: 210px;
-    border-radius: 10px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.gpt3__navbar-menu_container p {
-    margin: 1rem 0;
-}
-
-.gpt3__navbar-menu_container-links-sign {
-    display: none;
+    min-width: 220px;
+    border-radius: 16px;
+    box-shadow: var(--shadow-elevated);
+    gap: 0.5rem;
 }
 
 @media screen and (max-width: 1050px) {
-    .gpt3__navbar-links_container {
+    .navbar-links_container {
         display: none;
     }
 
-    .gpt3__navbar-menu {
+    .navbar-menu {
         display: flex;
     }
 }
 
 @media screen and (max-width: 700px) {
-    .gpt3__navbar {
-        padding: 1rem 2rem;
+    .navbar {
+        padding: 0 1.5rem;
     }
 }
 
 @media screen and (max-width: 550px) {
-    .gpt3__navbar {
-        padding: 1rem;
-    }
-    .gpt3__navbar-sign {
-        display: none;
-    }
-    .gpt3__navbar-menu_container {
-        top: 20px;
+    .navbar {
+        padding: 0 1rem;
     }
 
-    .gpt3__navbar-menu_container-links-sign {
-        display: block;
+    .navbar-links_logo img {
+        height: 2rem;
     }
-}
+}
\ No newline at end of file
diff --git a/src/Nav.jsx b/src/Nav.jsx
index 7a9155b..1a7f268 100644
--- a/src/Nav.jsx
+++ b/src/Nav.jsx
@@ -1,68 +1,135 @@
-import React, { useState } from "react";
-import { RiMenu3Line, RiCloseLine } from "react-icons/ri";
+import React, { useState, useEffect } from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { Menu, X, Building2, Users, Home, Database } from 'lucide-react';
 import "./Nav.css";
-import logo from "./riselogo.png"
+import logo from "./riselogo.png";
 
-const Menu = () => (
+const NavLinks = () => (
     <>
-        <p>
-            <a style={{color: "#ffffff", textDecoration: "none"}} href="company">Company</a>
-        </p>
-        <p>
-            <a style={{color: "#ffffff", textDecoration: "none"}} href="club">Club</a>
-        </p>
-        <p>
-            <a style={{color: "#ffffff", textDecoration: "none"}} href="lab">Lab</a>
-        </p>
-        <p>
-            <a style={{color: "#ffffff", textDecoration: "none"}} href="viewer">View Data</a>
-        </p>
+        <motion.p whileHover={{ scale: 1.02 }}>
+            <a href="company">
+                <Building2 size={18} />
+                Company
+            </a>
+        </motion.p>
+        <motion.p whileHover={{ scale: 1.02 }}>
+            <a href="club">
+                <Users size={18} />
+                Club
+            </a>
+        </motion.p>
+        <motion.p whileHover={{ scale: 1.02 }}>
+            <a href="lab">
+                <Home size={18} />
+                Lab
+            </a>
+        </motion.p>
+        <motion.p whileHover={{ scale: 1.02 }}>
+            <a href="viewer">
+                <Database size={18} />
+                View Data
+            </a>
+        </motion.p>
     </>
 );
 
 const Navbar = () => {
-    const [toggleMenu, setToggleMenu] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const { scrollY } = useScroll();
+
+    // Transform values based on scroll with a longer range
+    const borderRadius = useTransform(
+        scrollY,
+        [20, 220], // Increased range for more gradual effect
+        [0, 10]   // Max border radius slightly reduced
+    );
+
+    const width = useTransform(
+        scrollY,
+        [20, 220],
+        ["100vw", "94vw"]
+    );
+
+    const height = useTransform(
+        scrollY,
+        [20, 220],
+        ["6rem", "5rem"]
+    );
+
+    const xOffset = useTransform(
+        scrollY,
+        [20, 220],
+        ["0vw", "3vw"] // This controls the left position
+    );
+
+    const yOffset = useTransform(
+        scrollY,
+        [20, 220],
+        ["0vh", "0.8vh"] // This controls the left position
+    );
+
     return (
-        <div className="gpt3__navbar">
-            <div className="gpt3__navbar-links">
-                <div className="gpt3__navbar-links_logo">
-                    <img
-                        src={logo} alt={"RISE_Logo"}
-                        />
+        <div className="nav-wrapper">
+            <motion.div
+                className="navbar"
+                style={{
+                    borderRadius,
+                    width,
+                    height,
+                    left: xOffset,
+                    top: yOffset
+                }}
+                initial={{ y: -100 }}
+                animate={{ y: 0 }}
+                transition={{
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 30
+                }}
+            >
+                <div className="navbar-links">
+                    <motion.div
+                        className="navbar-links_logo"
+                        whileHover={{ scale: 1.02 }}
+                    >
+                        <img src={logo} alt="RISE_Logo" />
+                    </motion.div>
+                    <motion.div
+                        className="navbar-links_container"
+                        initial={{ opacity: 0, x: 20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.2 }}
+                    >
+                        <NavLinks />
+                    </motion.div>
                 </div>
-                <div className="gpt3__navbar-links_container">
-                    <Menu />
-                </div>
-            </div>
-            <div className="gpt3__navbar-sign">
-            </div>
-            <div className="gpt3__navbar-menu">
-                {toggleMenu ?
-                    <RiCloseLine
-                        color="#fff"
-                        size={27}
-                        onClick={() => setToggleMenu(false)}
-                    />
-                    :
-                    <RiMenu3Line
-                        color="#fff"
-                        size={27}
-                        onClick={() => setToggleMenu(true)}
-                    />
-                }
-
-                {toggleMenu && (
-                    <div className="gpt3__navbar-menu_container scale-up-center">
-                        <div className="gpt3__navbar-menu_container-links"></div>
-                        <Menu />
+                <div className="navbar-menu">
+                    <motion.div
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
+                        {isOpen ? (
+                            <X color="#fff" size={27} onClick={() => setIsOpen(false)} />
+                        ) : (
+                            <Menu color="#fff" size={27} onClick={() => setIsOpen(true)} />
+                        )}
+                    </motion.div>
 
-                        <div className="gpt3__navbar-menu-container-links-sign">
-                        </div>
-                    </div>
-                )}
-            </div>
+                    {isOpen && (
+                        <motion.div
+                            className="navbar-menu_container"
+                            initial={{ opacity: 0, y: -20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -20 }}
+                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                        >
+                            <NavLinks />
+                        </motion.div>
+                    )}
+                </div>
+            </motion.div>
         </div>
     );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file