fixed toolbar menu

resources/js/components/Topbar.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export default function Topbar() {
+  return (
+    <header className="fixed top-0 left-0 right-0 h-16 bg-neutral-900 border-b border-neutral-800 z-50">
+      <div className="h-full px-5 flex items-center justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <button aria-label="Toggle menu" className="md:hidden text-neutral-200 hover:text-sky-400">
+            <i className="fas fa-bars text-lg" aria-hidden="true"></i>
+          </button>
+          <a href="/" className="text-sky-400 font-semibold text-xl">Skinbase</a>
+        </div>
+
+        <div className="hidden md:block flex-1 max-w-xl">
+          <form action="/search" method="get" className="relative">
+            <input name="q" aria-label="Search" placeholder="Search tags, artworks, artists…"
+                   className="w-full bg-neutral-800 border border-neutral-700 rounded-lg py-2.5 pl-3.5 pr-10 text-white outline-none focus:border-sky-400" />
+            <i className="fas fa-search absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400" aria-hidden="true"></i>
+          </form>
+        </div>
+
+        <div className="flex items-center gap-4 sm:gap-5">
+          <a href="/forum" className="hidden sm:inline text-sm hover:text-sky-400">Forum</a>
+          <button aria-label="User menu" className="text-neutral-200 hover:text-sky-400">
+            <i className="fas fa-user" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}