nextjs项目搭建——头部导航

Header.tsx

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

TypeScript 复制代码
'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

TypeScript 复制代码
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; 

login

这里面还涉及到login的页面

相关推荐
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
李少兄9 天前
解决OSS存储桶未创建导致的XML错误
xml·开发语言·python
阿蒙Amon9 天前
《C#图解教程 第5版》深度推荐
开发语言·c#
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
学Linux的语莫9 天前
python基础语法
开发语言·python
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
veminhe9 天前
HTML5 浏览器支持
前端·html·html5
前端fighter9 天前
Vuex 与 Pinia:全面解析现代 Vue 状态管理的进化之路
前端·vue.js·面试