Scribd
Upload
6 views3 pages

code of e commerce website

The document describes the implementation of a navigation bar for a web application using React and Next.js. It includes four components: Menu, Navbar, Navicons, and Searchbar, each handling different aspects of the navigation functionality. The Menu component toggles a dropdown menu, while the Navbar integrates the Menu and displays links and icons for navigation and search features.

Uploaded by

maryamkhan2725
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views3 pages

code of e commerce website

The document describes the implementation of a navigation bar for a web application using React and Next.js. It includes four components: Menu, Navbar, Navicons, and Searchbar, each handling different aspects of the navigation functionality. The Menu component toggles a dropdown menu, while the Navbar integrates the Menu and displays links and icons for navigation and search features.

Uploaded by

maryamkhan2725
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like