add font face and create navbar component

2025-05-31 18:03:15 +03:30
parent 0c2b91c602
commit 357544a145
18 changed files with 72 additions and 55 deletions
@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  const links = [
+    { href: '/', label: 'درباره' },
+    { href: '/services', label: 'خدمات' },
+    { href: '/blog', label: 'بلاگ' },
+    { href: '/contact', label: 'تماس' },
+  ];
+
+  const linkClass = (href: string) =>
+    pathname === href ? ' text-red-500 font-semibold' : 'text-gray-500';
+
+  return (
+    <nav className="bg-transparent  px-4 py-3 w-full">
+      <div className="max-w-7xl mx-auto flex items-center justify-between">
+        <Link href="/" className="text-xl font-bold ">لوگو</Link>
+
+        <ul className="hidden md:flex space-x-6">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <Link href={href} className={`${linkClass(href)} hover:text-primary-light `}>
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+
+        <button className="md:hidden text-gray-700" onClick={() => setOpen(!open)}>
+          {open ? <p>x</p> : <p>menu</p>}
+        </button>
+      </div>
+
+      {open && (
+        <ul className="md:hidden mt-2 space-y-2 px-2">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <Link href={href} className={linkClass(href)} onClick={() => setOpen(false)}>
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </nav>
+  );
+}