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
Show Stats 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>
</svg>
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 }) {
return (
<html lang='en'>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
</head>
<body>
<Navbar />
<main>{children}</main>

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

@ -13,9 +13,9 @@ export default function HomePage() {
<div className='overflow-x-hidden'>
<HeroSwiper />
{/* 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 */}
<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'>
<AnimatedText finishClass='delay-300'>
<h2 className='text-6xl font-normal text-justify font-montera'>
@ -43,12 +43,12 @@ export default function HomePage() {
</div>
</div>
{/* 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
// ref={brandStoryPicRef}
src={brandStoryPic}
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'}`}
// sizes='100vw'
/>

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

@ -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 {

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 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 (
<nav className={navClasses}>
{/* Left side */}
<div className='flex items-center'>
<Link href='/about-us' className='text-sm font-medium hover:underline'>
About Us
</Link>
</div>
{/* Middle */}
<div className='flex-shrink-0'>
<Link href='/' className='text-lg font-bold'>
<Image
src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack}
alt='Logo'
className='w-full h-auto logo text-white'
width={100}
height={100}
/>
</Link>
</div>
{/* Right side */}
<div className='flex items-center space-x-4'>
<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 className=''>
<button
className={styles.mobileNavToggle}
aria-controls='primary-navigation'
aria-expanded={isVisible}
onClick={toggleMenu}
>
<span className='sr-only'>Menu</span>
</button>
<nav data-visible={isVisible} className={navClasses}>
{/* Left side */}
<div className=''>
<Link
href='/about-us'
className='text-sm font-medium hover:underline'
>
About Us
</Link>
</div>
{/* Middle */}
<div className='flex-shrink'>
<Link href='/' className='text-lg font-bold'>
<Image
src={logoBlack}
// src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack}
alt='Logo'
className='h-full logo'
width={100}
height={100}
/>
</Link>
</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';
// 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 (
<Swiper
// install Swiper modules
modules={[Autoplay, Pagination, Scrollbar]}
modules={[EffectFade, Autoplay, Pagination]}
effect={'fade'}
autoplay={{
delay: 2500,
delay: 3000,
disableOnInteraction: false,
}}
speed={5000}
fadeEffect={{ crossFade: true }}
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
className='h-full w-full object-cover object-center h-[90vh]'
>
{slides.map((slide) => (
<SwiperSlide key={slide.name}>