organized asf

components/Navbar.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { IoMenu as MenuIcon, IoClose as CloseIcon } from "react-icons/io5";
+import { useState } from "react";
+
+export const Navbar = () => {
+  const [showMenu, setShowMenu] = useState(false);
+
+  return (
+    <nav className="lg:p-4 p-2 lg:py-10 mx-10 flex flex-row justify-between">
+      <Link href="/" id="logo" className="flex flex-row gap-2 items-end">
+        <div className="text-action font-bold text-4xl font-mono">peroxy</div>
+        <span className="text-secondary font-mono font-bold">dev</span>
+      </Link>
+      <div className="hidden lg:flex flex-row gap-10 items-center font-medium font-mono">
+        <Link href="/blog">
+          <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
+            blog
+          </button>
+        </Link>
+        <Link href="/pidhsome">
+          <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
+            projects
+          </button>
+        </Link>
+        <Link href="/pidhsome">
+          <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
+            github
+          </button>
+        </Link>
+      </div>
+      <div className="lg:hidden flex">
+        <button onClick={() => setShowMenu(true)} className="text-2xl">
+          <MenuIcon />
+        </button>
+        <div
+          className={`absolute w-96 bg-blue-900
+        top-0 px-10 py-6 h-screen  ${showMenu ? "right-0" : "-right-full"} 
+        transition-all ease-in duration-200`}
+        >
+          <button onClick={() => setShowMenu(false)} className="text-2xl">
+            <CloseIcon />
+          </button>
+          <div className="flex flex-col gap-10 mt-10 font-bold font-mono">
+            <div>Link 1</div>
+            <div>Link 1</div>
+            <div>Link 1</div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};