Three.js + React 实战系列-3D 个人主页 ：完成 Navbar 导航栏组件

在上一节中，我们搭建了项目的基础结构，搭建好了项目框架。

本节我们将继续完善页面结构，完成第一个视觉组件 ------ Navbar 导航栏 ✅

前置准备：

• ✅下载静态资源在根目录下 (src 同级)
• 谷歌云盘地址

---

🎥 02 · 完成 Navbar 导航栏组件

📁 组件结构规划

我们将导航栏作为一个单独组件，放置在 src/sections/Navbar.jsx：

src/
├── sections/
│   └── Navbar.jsx
├── App.jsx
└── main.jsx

🧱 Navbar 组件内容

我们的导航栏会固定在顶部，具备以下功能：

• 左侧 Logo

• 右侧菜单项（Home、Work、About、Contact ）

• 响应式布局，适配不同屏幕响应式布局，适配不同屏幕

💻 实现代码（使用 Tailwind CSS）

• 📄 src/components/Navbar.jsx

import React, { useState } from 'react'
import { navLinks } from '../constants/index.js'

const Navbar = () => {

  const [isOpen, setIsOpen] = useState(false)

  const toggleMenu = () => setIsOpen( (prevIsOpen) => !prevIsOpen );

  const NavItems = () => {
    return (
      <div>
        <ul className='nav-ul'>
            { navLinks.map(({ id, href, name }) => (
                <li key={id} className='nav-li'>
                    <a href={href} className="nav-li_a" onClick={() => {}}> 
                        {name}
                    </a>
                </li>
            ))}
        </ul>
      </div>
    )
  }

  return (
    <header className='fixed top-0 left-0 right-0 z-50 bg-black/90'>
        <div className="max-w-7xl mx-auto">
            <div className="flex justify-between items-center py-5 mx-auto c-space">
                <a href="/" className="text-neutral-400 font-bold text-xl hover:text-white transition-colors">
                    Sunbyte
                </a>

                <button onClick={toggleMenu}  className="text-neutral-400 hover:text-white focus:outline-none sm:hidden flex" aria-label="Toggle menu">
                    <img src={isOpen ? "assets/close.svg" : "assets/menu.svg"} alt="toggle" className="w-6 h-6" />
                </button>

                <nav className='sm:flex hidden'>
                    <NavItems />
                </nav>
            </ div>
        </div>
        <div className={`nav-sidebar ${isOpen ? 'max-h-screen':'max-h-0'}`}>
            <nav className='p-5'>
                <NavItems />
            </nav>
        </div>
    </header>
  ) 
}

export default Navbar 

• 📄 src/App.jsx

import React from 'react'
import Navbar from './sections/Navbar'

const App = () => {
  return (
    <main className='max-w-7xl mx-auto'>
        <Navbar />
    </main>
  )
}

export default App

🎨 效果预览

## ⏭ 下一节预告

• 下一节我们将进入 本次课程最复杂的页面------Hero.jsx！

敬请期待 🎬