init

dmtp/client/components/layout/Navbar.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { WalletButton } from '@/components/wallet/WalletButton';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
+import { Menu, X } from "lucide-react";
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function Navbar() {
+  const { isConnected } = useWalletConnection();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+   <nav className="fixed top-0 left-0 right-0 z-50 bg-white border-b-2 border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
+            <div className="px-2 bg-primary flex items-center justify-center border-2 border-primary">
+              <span className="text-white text-2xl font-bold">D.M.T.P</span>
+            </div>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-1">
+            <Link href="/tasks" className="text-sm font-medium px-4 py-2 hover:bg-gray-100 transition-colors text-gray-700 hover:text-primary">
+              Marketplace
+            </Link>
+            <Link href="/dashboard" className="text-sm font-medium px-4 py-2 hover:bg-gray-100 transition-colors text-gray-700 hover:text-primary">
+              Dashboard
+            </Link>
+            <Link href="/profile" className="text-sm font-medium px-4 py-2 hover:bg-gray-100 transition-colors text-gray-700 hover:text-primary">
+              Profile
+            </Link>
+          </div>
+
+          {/* Right Actions */}
+          <div className="flex items-center gap-4">
+            <div className="hidden sm:inline-flex">
+              <WalletButton />
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button className="md:hidden p-2 hover:bg-gray-100 rounded" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
+              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="md:hidden pb-4 space-y-1 border-t border-gray-200 pt-2">
+            <Link href="/tasks" className="block px-4 py-2 hover:bg-gray-100 font-medium text-gray-700">
+              Marketplace
+            </Link>
+            <Link href="/dashboard" className="block px-4 py-2 hover:bg-gray-100 font-medium text-gray-700">
+              Dashboard
+            </Link>
+            <Link href="/profile" className="block px-4 py-2 hover:bg-gray-100 font-medium text-gray-700">
+              Profile
+            </Link>
+            <div className="px-4 py-2">
+              <WalletButton />
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}