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

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

news 来源：原创 2025/4/21 6:21:50

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

本节我们将继续完善页面结构，完成第一个视觉组件 —— 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