New navbar in progress

package.json

@@ -12,6 +12,7 @@
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.3.0",
     "sharp": "^0.33.5",
     "swiper": "^11.1.14"
   },

src/app/globals.css

@@ -29,92 +29,9 @@ body {
 body {
   margin: 0;
   margin-top: 8em;
+  margin-top: 0;
   padding: 0;
   background-color: #f0f0f0; /* Optional background color */
   font-family: Arial, sans-serif;
   color: black;
 }
-
-.navbar {
-  position: fixed;
-  top: 1.5em;
-  left: 2em;
-  right: 2em;
-  background-color: white;
-  border-radius: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1em 2em;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-}
-
-.navbar a {
-  color: black;
-  text-decoration: none;
-  margin: 0 0.5em;
-  font-size: 1em;
-}
-
-.navbar a:hover {
-  color: #555;
-}
-
-.left,
-.right {
-  display: flex;
-  align-items: center;
-}
-
-.navbar .center a {
-  color: black;
-  text-decoration: none;
-  margin: 0 0;
-  font-size: 1em;
-}
-.center .logo {
-  height: 50px; /* Adjust the logo size as needed */
-}
-
-.navbar-center .logo {
-  height: 50px; /* Adjust the logo size as needed */
-}
-
-.fa-search,
-.fa-user {
-  font-size: 1.2em;
-}
-
-@media screen and (max-width: 768px) {
-  .navbar {
-    top: 1em;
-    left: 1em;
-    right: 1em;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .navbar-center {
-    margin: 1em 0;
-    align-self: center;
-  }
-}
-
-.navbar a.active {
-  font-weight: bold;
-  border-bottom: 2px solid black;
-}
-
-.navbar {
-  border-radius: 25px; /* Makes the corners more rounded */
-}
-
-.navbar a {
-  font-size: 1.1em;
-}
-
-.fa-search,
-.fa-user {
-  font-size: 1.4em;
-}

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import './globals.css';
-import './globalicons.css';
+// import './globalicons.css';
 
 import { ReactNode } from 'react';
 import Navbar from '../components/navbar';

src/components/navbar-old.tsx

@@ -0,0 +1,27 @@
+// components/Navbar.tsx
+export default function Navbar() {
+  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>
+      </div>
+    </nav>
+  );
+}

src/components/navbar.module-old.css

@@ -0,0 +1,85 @@
+.navbar {
+    position: fixed;
+    top: 1.5em;
+    left: 2em;
+    right: 2em;
+    @apply transition-all;
+    /* background-color: white;
+    border-radius: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1em 2em;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000; */
+  }
+  
+/*   .navbar a {
+    color: black;
+    text-decoration: none;
+    margin: 0 0.5em;
+    font-size: 1em;
+  }
+  
+  .navbar a:hover {
+    color: #555;
+  }
+  
+  .left,
+  .right {
+    display: flex;
+    align-items: center;
+  }
+  
+  .navbar .center a {
+    color: black;
+    text-decoration: none;
+    margin: 0 0;
+    font-size: 1em;
+  }
+  .center .logo {
+    height: 50px; /* Adjust the logo size as needed */
+  }
+  
+  .navbar-center .logo {
+    height: 50px; /* Adjust the logo size as needed */
+  }
+  
+  .fa-search,
+  .fa-user {
+    font-size: 1.2em;
+  }
+  
+  @media screen and (max-width: 768px) {
+    .navbar {
+      top: 1em;
+      left: 1em;
+      right: 1em;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .navbar-center {
+      margin: 1em 0;
+      align-self: center;
+    }
+  }
+  
+  .navbar a.active {
+    font-weight: bold;
+    border-bottom: 2px solid black;
+  }
+  
+  .navbar {
+    border-radius: 25px; /* Makes the corners more rounded */
+  }
+  
+  .navbar a {
+    font-size: 1.1em;
+  }
+  
+  .fa-search,
+  .fa-user {
+    font-size: 1.4em;
+  }
+   */

src/components/navbar.module.css

@@ -0,0 +1,87 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+.navbar {
+    /* position: fixed;
+    @apply transition-all duration-300 top-6 left-6 right-6; */
+    /* background-color: white;
+    border-radius: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1em 2em;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000; */
+  }
+  
+/*   .navbar a {
+    color: black;
+    text-decoration: none;
+    margin: 0 0.5em;
+    font-size: 1em;
+  }
+  
+  .navbar a:hover {
+    color: #555;
+  }
+  
+  .left,
+  .right {
+    display: flex;
+    align-items: center;
+  }
+  
+  .navbar .center a {
+    color: black;
+    text-decoration: none;
+    margin: 0 0;
+    font-size: 1em;
+  }
+  .center .logo {
+    height: 50px; /* Adjust the logo size as needed */
+  }
+  
+  .navbar-center .logo {
+    height: 50px; /* Adjust the logo size as needed */
+  }
+  
+  .fa-search,
+  .fa-user {
+    font-size: 1.2em;
+  }
+  
+  @media screen and (max-width: 768px) {
+    .navbar {
+      top: 1em;
+      left: 1em;
+      right: 1em;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .navbar-center {
+      margin: 1em 0;
+      align-self: center;
+    }
+  }
+  
+  .navbar a.active {
+    font-weight: bold;
+    border-bottom: 2px solid black;
+  }
+  
+  .navbar {
+    border-radius: 25px; /* Makes the corners more rounded */
+  }
+  
+  .navbar a {
+    font-size: 1.1em;
+  }
+  
+  .fa-search,
+  .fa-user {
+    font-size: 1.4em;
+  }
+   */

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'>
+    <nav       className={`navbar fixed top-6 left-6 right-6 transition-all duration-300 ${navClasses} z-50`}>
-      <div className='left'>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <a href='#about-us'>About Us</a>
+        <div className="flex items-center justify-between h-16">
-        <a href='#shop'>Shop</a>
+          {/* Left side */}
-      </div>
+          <div className="flex items-center">
-      <div className='center'>
+            <Link href="/about" className="text-sm font-medium hover:underline">
-        <a href='/' className='mx-0'>
+              About Us
-          <img src='/images/logo.png' alt='Logo' className='logo' />
+            </Link>
-        </a>
+          </div>
-      </div>
+          {/* Middle */}
-      <div className='right'>
+          <div className="flex-shrink-0">
-        <a href='#search'>
+            <Link href="/" className="text-lg font-bold">
-          <span className='material-symbols-outlined'>search</span>
+              <img src='/images/logo.png' alt='Logo' className='logo' />
-        </a>
+            </Link>
-        <a href='#shopping'>
+          </div>
-          <span className='material-symbols-outlined'>shopping_bag</span>
+          {/* Right side */}
-        </a>
+          <div className="flex items-center space-x-4">
-        <a href='#profile'>
+            <button aria-label="Search">
-          <span className='material-symbols-outlined'>person</span>
+              <FiSearch size={20} />
-        </a>
+            </button>
+            <button aria-label="Profile">
+              <FiUser size={20} />
+            </button>
+            <button aria-label="Shopping Cart">
+              <HiShoppingBag size={20} />
+            </button>
+          </div>
+        </div>
       </div>
     </nav>
   );