Untitled
unknown
plain_text
19 days ago
7.6 kB
3
Indexable
import React, {useState} from 'react' import { IoMdMenu } from "react-icons/io"; import { ImCross } from "react-icons/im"; import { div } from 'framer-motion/client'; function Navbar() { const [menu, setMenu] = useState(false); const navItems = [ {key:1, name:"Home"}, {key:2, name:"Certificates"}, {key:3, name:"Contact"}, ]; return ( <> <div> <div className='flex justify-between m-3 bg-gray-400'> <div className='flex items-center space-x-3'> <img className="w-10 h-10" src="/logo.png" alt="" /> <div className='items-center mb-1'> <h1>Chandra <span className='text-2xl text-red-900'>Shekar</span></h1> <p>Full Stack Developer</p> </div> </div> <div> <ul className='md:flex space-x-4 text-xl p-4 hidden'> {navItems.map(({key, name}) => ( <li key={key}>{name}</li> ))} </ul> <div className='md:hidden'> <button onClick={() => setMenu(!menu)} className='text-2xl'> {menu? <ImCross /> : <IoMdMenu /> } </button> </div> </div> </div> {menu && <div className='flex justify-between'> <div className='w-1/2'></div> <div className='w-1/2 '> <ul className=' space-y-4 text-xl p-4 items-end'> {navItems.map(({key, name}) => ( <li key={key}>{name}</li> ))} </ul> </div> </div> } </div> </> ) } export default Navbar ))}} ))} ) ] }
Editor is loading...
Leave a Comment