New navbar in progress

src/components/navbar.tsx

@@ -1,26 +1,68 @@
+'use client'
+import React, { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { FiSearch, FiUser } from 'react-icons/fi';
+import { HiShoppingBag } from "react-icons/hi2";
+import styles from './navbar.module.css';
+
 // components/Navbar.tsx
 export default function Navbar() {
+  const prevScrollY = useRef(0);
+  const [navBarStyle, setNavBarStyle] = useState('initial');
+  
+  useEffect(() => {
+    const handleScroll = () => {
+    const currentScrollY = window.scrollY;
+    if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
+      // Scrolling down and scrolled past 100px
+      setNavBarStyle('initial');
+    } else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
+      // Scrolling up and scrolled past 100px
+      setNavBarStyle('scrolledUp');
+    } else if (currentScrollY <= 100) {
+      setNavBarStyle('initial');
+    }
+    prevScrollY.current = currentScrollY;
+  };
+  window.addEventListener('scroll', handleScroll);
+
+  return () => window.removeEventListener('scroll', handleScroll);
+}, []); // Empty dependency array
+
+const navClasses =
+navBarStyle === 'scrolledUp'
+  ? 'bg-white text-black rounded-b-lg shadow-lg fixed'
+  : 'bg-transparent text-white';
+
   return (
-    <nav className='navbar'>
-      <div className='left'>
-        <a href='#about-us'>About Us</a>
-        <a href='#shop'>Shop</a>
-      </div>
-      <div className='center'>
-        <a href='/' className='mx-0'>
-          <img src='/images/logo.png' alt='Logo' className='logo' />
-        </a>
-      </div>
-      <div className='right'>
-        <a href='#search'>
-          <span className='material-symbols-outlined'>search</span>
-        </a>
-        <a href='#shopping'>
-          <span className='material-symbols-outlined'>shopping_bag</span>
-        </a>
-        <a href='#profile'>
-          <span className='material-symbols-outlined'>person</span>
-        </a>
+    <nav       className={`navbar fixed top-6 left-6 right-6 transition-all duration-300 ${navClasses} z-50`}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Left side */}
+          <div className="flex items-center">
+            <Link href="/about" className="text-sm font-medium hover:underline">
+              About Us
+            </Link>
+          </div>
+          {/* Middle */}
+          <div className="flex-shrink-0">
+            <Link href="/" className="text-lg font-bold">
+              <img src='/images/logo.png' alt='Logo' className='logo' />
+            </Link>
+          </div>
+          {/* Right side */}
+          <div className="flex items-center space-x-4">
+            <button aria-label="Search">
+              <FiSearch size={20} />
+            </button>
+            <button aria-label="Profile">
+              <FiUser size={20} />
+            </button>
+            <button aria-label="Shopping Cart">
+              <HiShoppingBag size={20} />
+            </button>
+          </div>
+        </div>
       </div>
     </nav>
   );