nextjs项目搭建——头部导航

news/2025/2/24 9:40:01

Header.tsx

在src/app/component路径下，创建Header.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import Logo from './Logo';

const Header = () => {
  const pathname = usePathname();

  const navItems = [
    { label: '首页', href: '/' },
    { label: '量表测试', href: '/test' },
    { label: 'AI咨询', href: '/ai-consultation' },
    { label: '名师咨询', href: '/expert-consultation' },
    { label: '直播', href: '/live' },
    { label: '团体方案', href: '/group-solutions' },
  ];

  return (
    <header className="w-full bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
        <div className="flex items-center">
          <Link href="/" className="flex items-center">
            <Logo />
            <span className="text-[#40a9ff] text-lg font-medium ml-2">MindAI</span>
            <span className="text-gray-500 text-sm ml-2">您身边的心理医生</span>
          </Link>
        </div>

        <nav className="flex items-center space-x-8">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`text-base ${
                pathname === item.href
                  ? 'text-[#40a9ff] font-medium'
                  : 'text-gray-600 hover:text-[#40a9ff]'
              }`}
            >
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center space-x-4">
          <div className="relative">
            <Link href="/notifications">
              <div className="text-gray-600 hover:text-[#40a9ff]">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
                  />
                </svg>
              </div>
            </Link>
            <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
              1
            </span>
          </div>

          <Link
            href="/login"
            className="px-4 py-2 rounded bg-[#40a9ff] text-white hover:bg-[#1890ff] transition-colors"
          >
            登录/注册
          </Link>
        </div>
      </div>
    </header>
  );
};

export default Header;

logo

这里有我自己创建的logo

const Logo = () => {
  return (
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M20 35C20 35 33 26 33 16.7059C33 10.5882 28.0294 7 23.8235 7C21.0588 7 20 8.76471 20 8.76471C20 8.76471 18.9412 7 16.1765 7C11.9706 7 7 10.5882 7 16.7059C7 26 20 35 20 35Z"
        fill="#40a9ff"
        stroke="#40a9ff"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle
        cx="28"
        cy="28"
        r="8"
        fill="white"
        stroke="#40a9ff"
        strokeWidth="2"
      />
      <path
        d="M28 24V32M24 28H32"
        stroke="#40a9ff"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
};

export default Logo;