Menu.
tsx (file)
"use client"
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
const Menu = () => {
const [open, setOpen] = useState(false);
return (
<div>
<Image
src="/list.png"
alt="logo"
width={28}
height={28}
className="cursor-pointer"
onClick={() => setOpen((prev) => !prev)}
/>
{open && (
<div className="absolute bg-black text-white left-0 top-20 w-full h-
[calc(100vh)]">
<Link href="/">Home</Link>
<Link href="/about-us">About Us</Link>
<Link href="/contact">Contact</Link>
<Link href="/login">Login</Link>
</div>
)}
</div>
);
};
export default Menu;
Navbar.tsx (file)
import Image from "next/image"
import Link from "next/link"
import Menu from "./Menu"
import Navicons from "./Navicons"
import Serchbar from "./Searchbar"
const Navbar=()=>{
return(
<div>
<div className="h-20 px-4 md:px-8 lg:px-12 xl:px-32 2xl:px-64
relative">
<div className="h-full flex items-center justify-between
lg:hidden">
<link href="/" className="flex items-center gap-3">
<Image src="/logo-design-my-shop-04.png" alt="logo" width={110}
height={110}/>
</link>
<Menu/>
</div>
{/* big screen */}
<div className="hidden lg:flex items-center justify-between h-full
gap-8 ">
{/* lft */}
<div className="w-1/3 xl:w-1/2 flex items-center gap-12">
<link href="/" className="flex items-center gap-3">
<Image src="/logo-design-my-shop-04.png" alt="logo" width={150}
height={150}
className="mt-3"/>
</link>
<div className="hidden xl:flex lg:gap-12 text-sm">
<Link href="/">Home</Link>
<Link href="/about-us">About Us</Link>
<Link href="/contact">Contact</Link>
</div>
</div>
{/* right */}
<div className="w-2/4 xl:w-1/2 flex items-center justify-between
gap-8">
<Serchbar/>
<Navicons/>
</div>
</div>
</div>
</div>
)
}
export default Navbar
Navicons.tsx (file)
'use client'
import Image from "next/image"
import Link from "next/link"
const Navicons=()=>{
return(
<div className="flex items-center gap-4 xl:gap-6">
<Image
src='/user.png'
alt="Search Icon"
width={22}
height={22}
className="cursor-pointer"
/>
<div className="absolute p-4 rounded-md top-12 left-0 text-sm">
<link href='/' className="cursor-pointer">Sign Up</link>
<link href='/' className="cursor-pointer">Log In</link>
</div>
<Image
src='/store.png'
alt="Search Icon"
width={22}
height={22}
className="cursor-pointer"
/>
</div>
)
}
export default Navicons
Searchbar.tsx (file)
'use client';
import Image from "next/image";
import Link from "next/link";
const Searchbar = () => {
return (
<form className="flex items-center justify-between gap-4 bg-gray-100 p-2
rounded-md">
<input
type="text"
placeholder="Search"
className="flex-1 bg-transparent outline-none"
/>
<button className="cursor-pointer">
<Image
src="/magnifying-glass.png"
alt="Search Icon"
width={16}
height={16}
/>
</button>
</form>
);
};
export default Searchbar;
src/app may ek folder banaye gay (components) k name ka or components k under
ye 4 file bane gea 1.navbar 2.navicons 3.searchbar 4.menu or phir jaha jaha code
per image hai wo (flaticons)app sy png form my feee my download ho gea
