diff --git a/src/components/navbar.module.css b/src/components/navbar.module.css
index 0c3cae3..9fdcf7f 100644
--- a/src/components/navbar.module.css
+++ b/src/components/navbar.module.css
@@ -1,18 +1,70 @@
.navBar {
- @apply top-6 left-6 right-6 transition-all duration-300 z-50 h-20;
+ @apply transition-all duration-300;
display: flex;
align-items: center;
justify-content: space-between;
- padding: 1em 2em;
+ position: fixed;
+ align-items: stretch;
+ top: 0;
+ left: 0;
+ padding: 2rem;
+ z-index: 1000;
+ background: hsl(0 0% 100% / .2);
+ backdrop-filter: blur(1rem);
+ }
+
+
+ @media screen and (width < 768px) {
+ .navBar {
+ flex-direction: column;
+ right: 30%;
+ bottom: 0;
+ transform: translateX(-100%);
+ transition: transform 350ms ease-out;
+ padding: min(30vh, 10rem) 2em;
+ }
+ .mobileNavToggle {
+ position: absolute;
+ display: block;
+ width: 2rem;
+ top: 2rem;
+ left: 2rem;
+ aspect-ratio: 1;
+ z-index: 9999;
+ background-image: url('/icons/menu.svg');
+ background-repeat: no-repeat;
+ background-size: contain; /* Adjust as needed: cover, 100% 100%, etc. */
+ background-position: center;
+ }
+ .navBar[data-visible="true"] {
+ transform: translateX(0);
+ }
+ .mobileNavToggle[aria-expanded="true"] {
+ background-image: url('/icons/close.svg');
+ }
+
+ }
+ @media screen and (width >= 768px) {
+ .navBar {
+ right: 0;
+ flex-direction: row;
+ height: 5rem;
+ border-radius:0 0 0.5rem 0.5rem;
+ }
+ }
+ .navBar > div {
+ display: flex;
+ align-items: center;
+ gap: var(--gap, 2rem);
}
- .navBarInitial {
+ /* .navBarInitial {
@apply bg-white/30 text-black rounded-lg shadow-lg absolute;
}
.navBarScrolledUp {
@apply bg-gradient-to-b from-black/30 to-black/10 text-white rounded-lg fixed;
- }
+ } */
/* Custom style */
.navBarScrolledUp {
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 3b1ea6b..8db9d84 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -5,14 +5,14 @@ import { FiSearch, FiUser } from 'react-icons/fi';
import { HiShoppingBag } from 'react-icons/hi2';
import styles from './navbar.module.css';
import Image from 'next/image';
-import logoWhite from '/public/images/logo-white.svg';
+// import logoWhite from '/public/images/logo-white.svg';
import logoBlack from '/public/images/logo-black.svg';
// components/Navbar.tsx
export function Navbar() {
const prevScrollY = useRef(0);
const [navBarStyle, setNavBarStyle] = useState('initial');
-
+ const [isVisible, setIsVisible] = useState('false');
useEffect(() => {
const handleScroll = () => {
const currentScrollY = window.scrollY;
@@ -32,44 +32,73 @@ export function Navbar() {
return () => window.removeEventListener('scroll', handleScroll);
}, []); // Empty dependency array
+ // const navClasses = `${styles.navBar} ${
+ // navBarStyle === 'scrolledUp'
+ // ? styles.navBarScrolledUp
+ // : styles.navBarInitial
+ // }`;
+
+ //Hack for now
const navClasses = `${styles.navBar} ${
navBarStyle === 'scrolledUp'
? styles.navBarScrolledUp
- : styles.navBarInitial
+ : styles.navBarScrolledUp
}`;
+ function toggleMenu() {
+ if (isVisible === 'true') {
+ setIsVisible('false');
+ } else {
+ setIsVisible('true');
+ }
+ }
+
return (
-
+
+
+
+
);
}
diff --git a/src/components/swiper.tsx b/src/components/swiper.tsx
index 1ec270e..27d4202 100644
--- a/src/components/swiper.tsx
+++ b/src/components/swiper.tsx
@@ -1,15 +1,15 @@
'use client';
// import Swiper core and required modules
-import { Autoplay, Pagination, Scrollbar } from 'swiper/modules';
+import { Autoplay, Pagination, EffectFade } from 'swiper/modules';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
+import 'swiper/css/effect-fade';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
-import 'swiper/css/scrollbar';
const slides = [
{ name: 'Bars', image: '/images/slider/slider-01.jpg' },
@@ -22,13 +22,17 @@ export function HeroSwiper() {
return (
{slides.map((slide) => (