当前位置: 首页 > news >正文

nextjs项目搭建——头部导航

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; 

login

这里面还涉及到login的页面

相关文章:

  • 【数论】—— 快速幂与扩展欧拉定理
  • 【Web开发】PythonAnyWhere免费部署Django项目
  • 第六次作业
  • python类型转换深浅拷贝
  • 了解Pipx:一个轻量但强大的Python工具
  • 如何在 SpringBoot 项目创建并使用 Redis 的详细介绍
  • 【漫话机器学习系列】103.学习曲线(Learning Curve)
  • 蓝桥杯之阶段考核
  • 跟李沐学AI:InstructGPT论文精读(SFT、RLHF)
  • 《Mycat核心技术》第17章:实现MySQL的读写分离
  • 网络安全入门 | TCP/IP协议栈核心协议详解(附攻防案例)
  • 基于AT89C51单片机的教室智能照明控制系统
  • 软件工程和系统分析与设计
  • 前端性能测试优化案例
  • Python 调用 DeepSeek API 完整指南
  • ABC 393
  • [笔记] x86汇编语言:从实模式到保护模式之第四章 汇编语言和汇编软件
  • Docker的基础使用
  • Redis 如何实现消息队列?
  • Linux-Ansible模块完结
  • 外贸soho怎么做网站/seo网站优化培训怎么样
  • 网站不备案有什么影响/上海网络推广服务公司
  • 郑州公司企业网站建设/百度推广查询
  • 南京谁做免费网站/推广普通话宣传语100字
  • 网站建设美工招聘/商丘优化公司
  • 怎么做博彩网站/网络营销是什么意思?