diff --git a/package.json b/package.json
index efce49d..af0d3a2 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/app/globals.css b/src/app/globals.css
index 59d5eb0..10e4554 100644
--- a/src/app/globals.css
+++ b/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;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1ae9b9a..0069625 100644
--- a/src/app/layout.tsx
+++ b/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';
diff --git a/src/components/navbar-old.tsx b/src/components/navbar-old.tsx
new file mode 100644
index 0000000..6acb360
--- /dev/null
+++ b/src/components/navbar-old.tsx
@@ -0,0 +1,27 @@
+// components/Navbar.tsx
+export default function Navbar() {
+ return (
+
+ );
+}
diff --git a/src/components/navbar.module-old.css b/src/components/navbar.module-old.css
new file mode 100644
index 0000000..6d168f3
--- /dev/null
+++ b/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;
+ }
+ */
\ No newline at end of file
diff --git a/src/components/navbar.module.css b/src/components/navbar.module.css
new file mode 100644
index 0000000..4b69f9b
--- /dev/null
+++ b/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;
+ }
+ */
\ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 6acb360..035cdb9 100644
--- a/src/components/navbar.tsx
+++ b/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 (
-