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 = () => ( <> -

- Company -

-

- Club -

-

- Lab -

-

- View Data -

+ + + + Company + + + + + + Club + + + + + + Lab + + + + + + View Data + + ); 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 ( -
-
-
- {"RISE_Logo"} +
+ +
+ + RISE_Logo + + + +
-
- -
-
-
-
-
- {toggleMenu ? - setToggleMenu(false)} - /> - : - setToggleMenu(true)} - /> - } - - {toggleMenu && ( -
-
- +
+ + {isOpen ? ( + setIsOpen(false)} /> + ) : ( + setIsOpen(true)} /> + )} + -
-
-
- )} -
+ {isOpen && ( + + + + )} +
+
); }; -export default Navbar; +export default Navbar; \ No newline at end of file