saahildcom/src/components/navbar/index.tsx
2024-06-16 00:57:13 -04:00

32 lines
No EOL
1.1 KiB
TypeScript

import "./nav.css"
function NavLinks() {
return <>
<li><a>About</a></li>
<li><a>Projects</a></li>
<li><a>Contact</a></li>
</>
}
export default function Navbar() {
return <div className="navbar" style={{ zIndex: 9999, background: "var(--base)", position: "fixed", }}>
<div className="navbar-start">
<div className="dropdown">
<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 nav-links">
<NavLinks />
</ul>
</div>
<a className="btn btn-ghost text-xl">saahild.com</a>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1 nav-links">
<NavLinks />
</ul>
</div>
</div>
<div className="navbar-end">
{/* <a className="btn">Button</a> */}
</div>
</div>
}