tanshu/kakawa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile menu

Browse Source
This commit is contained in:
Amritanshu Agrawal
2024-09-30 19:02:59 +05:30
parent cf35f0c917
commit 2519b4f740
7 changed files with 148 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/icons/close.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Menu / Close_MD">
<path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

6
public/icons/menu.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 473 B

3
src/app/(static)/layout.tsx
View File

@ -8,6 +8,9 @@ import { Navbar } from '@/components/navbar';
export default function RootLayout({ children }: { children: ReactNode }) { export default function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang='en'> <html lang='en'>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
</head>
<body> <body>
<Navbar /> <Navbar />
<main>{children}</main> <main>{children}</main>

8
src/app/(static)/page.tsx
View File

@ -13,9 +13,9 @@ export default function HomePage() {
<div className='overflow-x-hidden'> <div className='overflow-x-hidden'>
<HeroSwiper /> <HeroSwiper />
{/* First Two-Column Layout */} {/* First Two-Column Layout */}
<section className='flex flex-col md:flex-row items-center bg-white'> <section className='flex flex-col md:flex-row items-center bg-white md:h-[90vh] overflow-clip'>
{/* Left Column - Text with Header */} {/* Left Column - Text with Header */}
<div className='w-full md:w-1/2'> <div className='w-full md:w-1/2 h-[90vh] md:h-auto'>
<div className='m-8 space-y-10'> <div className='m-8 space-y-10'>
<AnimatedText finishClass='delay-300'> <AnimatedText finishClass='delay-300'>
<h2 className='text-6xl font-normal text-justify font-montera'> <h2 className='text-6xl font-normal text-justify font-montera'>
@ -43,12 +43,12 @@ export default function HomePage() {
</div> </div>
</div> </div>
{/* Right Column - Image */} {/* Right Column - Image */}
<div className='w-full md:w-1/2'> <div className='w-full md:w-1/2 items-start h-[90vh] md:h-auto'>
<AnimatedImage <AnimatedImage
// ref={brandStoryPicRef} // ref={brandStoryPicRef}
src={brandStoryPic} src={brandStoryPic}
alt='Right Side Image' alt='Right Side Image'
className='w-full h-auto' className='h-full w-full object-cover object-center'
// {`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`} // {`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`}
// sizes='100vw' // sizes='100vw'
/> />

60
src/components/navbar.module.css
View File

@ -1,18 +1,70 @@
.navBar { .navBar {
@apply top-6 left-6 right-6 transition-all duration-300 z-50 h-20; @apply transition-all duration-300;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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);
} }
.navBarInitial {
@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 {
@apply bg-white/30 text-black rounded-lg shadow-lg absolute; @apply bg-white/30 text-black rounded-lg shadow-lg absolute;
} }
.navBarScrolledUp { .navBarScrolledUp {
@apply bg-gradient-to-b from-black/30 to-black/10 text-white rounded-lg fixed; @apply bg-gradient-to-b from-black/30 to-black/10 text-white rounded-lg fixed;
} } */
/* Custom style */ /* Custom style */
.navBarScrolledUp { .navBarScrolledUp {

99
src/components/navbar.tsx
View File

@ -5,14 +5,14 @@ import { FiSearch, FiUser } from 'react-icons/fi';
import { HiShoppingBag } from 'react-icons/hi2'; import { HiShoppingBag } from 'react-icons/hi2';
import styles from './navbar.module.css'; import styles from './navbar.module.css';
import Image from 'next/image'; 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'; import logoBlack from '/public/images/logo-black.svg';
// components/Navbar.tsx // components/Navbar.tsx
export function Navbar() { export function Navbar() {
const prevScrollY = useRef(0); const prevScrollY = useRef(0);
const [navBarStyle, setNavBarStyle] = useState('initial'); const [navBarStyle, setNavBarStyle] = useState('initial');
const [isVisible, setIsVisible] = useState('false');
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
const currentScrollY = window.scrollY; const currentScrollY = window.scrollY;
@ -32,44 +32,73 @@ export function Navbar() {
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, []); // Empty dependency array }, []); // Empty dependency array
// const navClasses = `${styles.navBar} ${
// navBarStyle === 'scrolledUp'
// ? styles.navBarScrolledUp
// : styles.navBarInitial
// }`;
//Hack for now
const navClasses = `${styles.navBar} ${ const navClasses = `${styles.navBar} ${
navBarStyle === 'scrolledUp' navBarStyle === 'scrolledUp'
? styles.navBarScrolledUp ? styles.navBarScrolledUp
: styles.navBarInitial : styles.navBarScrolledUp
}`; }`;
function toggleMenu() {
if (isVisible === 'true') {
setIsVisible('false');
} else {
setIsVisible('true');
}
}
return ( return (
<nav className={navClasses}> <div className=''>
{/* Left side */} <button
<div className='flex items-center'> className={styles.mobileNavToggle}
<Link href='/about-us' className='text-sm font-medium hover:underline'> aria-controls='primary-navigation'
About Us aria-expanded={isVisible}
</Link> onClick={toggleMenu}
</div> >
{/* Middle */} <span className='sr-only'>Menu</span>
<div className='flex-shrink-0'> </button>
<Link href='/' className='text-lg font-bold'> <nav data-visible={isVisible} className={navClasses}>
<Image {/* Left side */}
src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack} <div className=''>
alt='Logo' <Link
className='w-full h-auto logo text-white' href='/about-us'
width={100} className='text-sm font-medium hover:underline'
height={100} >
/> About Us
</Link> </Link>
</div> </div>
{/* Right side */} {/* Middle */}
<div className='flex items-center space-x-4'> <div className='flex-shrink'>
<button aria-label='Search'> <Link href='/' className='text-lg font-bold'>
<FiSearch size={20} /> <Image
</button> src={logoBlack}
<button aria-label='Profile'> // src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack}
<FiUser size={20} /> alt='Logo'
</button> className='h-full logo'
<button aria-label='Shopping Cart'> width={100}
<HiShoppingBag size={20} /> height={100}
</button> />
</div> </Link>
</nav> </div>
{/* Right side */}
<div className=''>
<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>
</nav>
</div>
); );
} }

12
src/components/swiper.tsx
View File

@ -1,15 +1,15 @@
'use client'; 'use client';
// import Swiper core and required modules // 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 Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react'; import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles // Import Swiper styles
import 'swiper/css'; import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/navigation'; import 'swiper/css/navigation';
import 'swiper/css/pagination'; import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
const slides = [ const slides = [
{ name: 'Bars', image: '/images/slider/slider-01.jpg' }, { name: 'Bars', image: '/images/slider/slider-01.jpg' },
@ -22,13 +22,17 @@ export function HeroSwiper() {
return ( return (
<Swiper <Swiper
// install Swiper modules // install Swiper modules
modules={[Autoplay, Pagination, Scrollbar]} modules={[EffectFade, Autoplay, Pagination]}
effect={'fade'}
autoplay={{ autoplay={{
delay: 2500, delay: 3000,
disableOnInteraction: false, disableOnInteraction: false,
}} }}
speed={5000}
fadeEffect={{ crossFade: true }}
pagination={{ clickable: true }} pagination={{ clickable: true }}
scrollbar={{ draggable: true }} scrollbar={{ draggable: true }}
className='h-full w-full object-cover object-center h-[90vh]'
> >
{slides.map((slide) => ( {slides.map((slide) => (
<SwiperSlide key={slide.name}> <SwiperSlide key={slide.name}>