feat: start recode a frontend to react and tailwind

frontend/src/components/Navigation.tsx

@@ -0,0 +1,110 @@
+import { useState } from "react";
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <nav className="sticky top-0 shadow-lg z-50 py-3">
+        {/* Desktop */}
+        <div className="hidden md:flex gap-8 lg:gap-12 justify-center">
+          <a
+            href="/"
+            className="text-base lg:text-lg hover:text-primary transition-colors"
+          >
+            Home
+          </a>
+          <a
+            href="/blog"
+            className="text-base lg:text-lg hover:text-primary transition-colors"
+          >
+            Blog
+          </a>
+          <a
+            href="/contacts"
+            className="text-base lg:text-lg hover:text-primary transition-colors"
+          >
+            Contacts
+          </a>
+          <a
+            href="/guestbook"
+            className="text-base lg:text-lg hover:text-primary transition-colors"
+          >
+            Guestbook
+          </a>
+        </div>
+
+        {/* Mobile Burger Button */}
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="md:hidden fixed left-4 top-4 z-50 btn btn-ghost btn-sm"
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            {isOpen ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            )}
+          </svg>
+        </button>
+      </nav>
+
+      {/* Mobile Menu */}
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 bg-black/50 z-40 md:hidden"
+            onClick={() => setIsOpen(false)}
+          ></div>
+          <div className="fixed top-0 left-0 h-full w-64 bg-base-100 z-50 md:hidden shadow-2xl">
+            <div className="flex flex-col gap-2 p-6 mt-16">
+              <a
+                href="/"
+                className="py-3 px-4 hover:bg-base-200 rounded-lg transition-all"
+                onClick={() => setIsOpen(false)}
+              >
+                Home
+              </a>
+              <a
+                href="/blog"
+                className="py-3 px-4 hover:bg-base-200 rounded-lg transition-all"
+                onClick={() => setIsOpen(false)}
+              >
+                Blog
+              </a>
+              <a
+                href="/contacts"
+                className="py-3 px-4 hover:bg-base-200 rounded-lg transition-all"
+                onClick={() => setIsOpen(false)}
+              >
+                Contacts
+              </a>
+              <a
+                href="/guestbook"
+                className="py-3 px-4 hover:bg-base-200 rounded-lg transition-all"
+                onClick={() => setIsOpen(false)}
+              >
+                Guestbook
+              </a>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}