i did some work

src/components/navbar/index.tsx

@@ -0,0 +1,32 @@
+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>
+}

src/components/navbar/nav.css

@@ -0,0 +1,4 @@
+.nav-links {
+    font-size:medium;
+    @apply font-bold;
+}