建电商网站免费开发个人网站
在上一节中，我们搭建了项目的基础结构，搭建好了项目框架。
本节我们将继续完善页面结构，完成第一个视觉组件 —— 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！
敬请期待 🎬