From 2519b4f740f57c6d0c584472a25a40b9f35d788c Mon Sep 17 00:00:00 2001 From: Amritanshu Date: Mon, 30 Sep 2024 19:02:59 +0530 Subject: [PATCH] Mobile menu --- public/icons/close.svg | 7 +++ public/icons/menu.svg | 6 ++ src/app/(static)/layout.tsx | 3 + src/app/(static)/page.tsx | 8 +-- src/components/navbar.module.css | 60 +++++++++++++++++-- src/components/navbar.tsx | 99 +++++++++++++++++++++----------- src/components/swiper.tsx | 12 ++-- 7 files changed, 148 insertions(+), 47 deletions(-) create mode 100644 public/icons/close.svg create mode 100644 public/icons/menu.svg diff --git a/public/icons/close.svg b/public/icons/close.svg new file mode 100644 index 0000000..ec98603 --- /dev/null +++ b/public/icons/close.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/icons/menu.svg b/public/icons/menu.svg new file mode 100644 index 0000000..1a9a5f9 --- /dev/null +++ b/public/icons/menu.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/app/(static)/layout.tsx b/src/app/(static)/layout.tsx index e0ce217..ccffd14 100644 --- a/src/app/(static)/layout.tsx +++ b/src/app/(static)/layout.tsx @@ -8,6 +8,9 @@ import { Navbar } from '@/components/navbar'; export default function RootLayout({ children }: { children: ReactNode }) { return ( + + +
{children}
diff --git a/src/app/(static)/page.tsx b/src/app/(static)/page.tsx index 16e10a0..5a77326 100644 --- a/src/app/(static)/page.tsx +++ b/src/app/(static)/page.tsx @@ -13,9 +13,9 @@ export default function HomePage() {
{/* First Two-Column Layout */} -
+
{/* Left Column - Text with Header */} -
+

@@ -43,12 +43,12 @@ export default function HomePage() {

{/* Right Column - Image */} -
+
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) => (