如何用Tailwind与React实现响应式博客导航栏

以下是针对需求优化后的完整Navbar组件代码，完美适配移动端和桌面端的布局要求：

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useUserContext } from './UserProvider';

function Navbar() {
  const { user, setUser } = useUserContext();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  function logout() {
    localStorage.removeItem('user');
    setUser(null);
    setIsMenuOpen(false); // 登出后自动关闭菜单
  }

  return (
    <nav className="relative bg-white shadow-md py-3 px-4">
      {/* 网站标题与导航容器 */}
      <div className="flex justify-between items-center">
        <span className="text-xl font-bold">Tech-Blog</span>

        {/* 移动端汉堡触发按钮 */}
        <button 
          className="lg:hidden text-gray-700 hover:text-blue-500"
          onClick={() => setIsMenuOpen(!isMenuOpen)}
        >
          {isMenuOpen ? '✕' : '☰'}
        </button>

        {/* 桌面端导航项（居中显示） */}
        <div className="hidden lg:flex items-center space-x-8">
          <Link to="/about" className="hover:text-blue-500">About</Link>
          <Link to="/profile" className="hover:text-blue-500">Profile</Link>
          <Link to="/new" className="hover:text-blue-500">New</Link>
        </div>

        {/* 桌面端操作按钮（右侧固定） */}
        <div className="hidden lg:flex items-center space-x-4">
          {user === null ? (
            <>
              <Link to="/login">
                <button className="bg-blue-400 px-4 rounded-md py-2 text-white hover:bg-blue-500">SignIn</button>
              </Link>
              <Link to="/register">
                <button className="bg-blue-400 px-4 rounded-md py-2 text-white hover:bg-blue-500">Register</button>
              </Link>
            </>
          ) : (
            <button 
              className="bg-blue-400 px-4 rounded-md py-2 text-white font-mono hover:bg-blue-500"
              onClick={logout}
            >
              Log out
            </button>
          )}
        </div>
      </div>

      {/* 移动端下拉菜单（右侧展开） */}
      {isMenuOpen && (
        <div className="lg:hidden absolute top-full right-0 mt-2 bg-pink-100 rounded-md shadow-lg p-4 w-48">
          <div className="flex flex-col space-y-3">
            <Link to="/about" className="hover:text-blue-500" onClick={() => setIsMenuOpen(false)}>About</Link>
            <Link to="/profile" className="hover:text-blue-500" onClick={() => setIsMenuOpen(false)}>Profile</Link>
            <Link to="/new" className="hover:text-blue-500" onClick={() => setIsMenuOpen(false)}>New</Link>
            
            {/* 分割线区分导航与操作按钮 */}
            <div className="border-t border-gray-300 pt-3 mt-3">
              {user === null ? (
                <>
                  <Link to="/login" className="block mb-2">
                    <button className="w-full bg-blue-400 px-4 rounded-md py-2 text-white hover:bg-blue-500">SignIn</button>
                  </Link>
                  <Link to="/register">
                    <button className="w-full bg-blue-400 px-4 rounded-md py-2 text-white hover:bg-blue-500">Register</button>
                  </Link>
                </>
              ) : (
                <button 
                  className="w-full bg-blue-400 px-4 rounded-md py-2 text-white font-mono hover:bg-blue-500"
                  onClick={logout}
                >
                  Log out
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}

export default Navbar;

核心优化说明： #

• 移动端交互逻辑：新增汉堡按钮控制下拉菜单的展开/收起，点击导航项后自动关闭菜单，符合移动端操作习惯
• 响应式布局拆分：
  • 移动端：菜单默认隐藏，展开后固定在右侧，包含所有导航链接和操作按钮，布局层级清晰
  • 桌面端：导航项居中排列，操作按钮独立在右侧，通过hidden lg:flex实现不同尺寸的显示切换
• 状态与样式统一：登录状态判断逻辑复用，避免重复代码；按钮添加hover效果增强交互反馈
• 布局稳定性：移除原代码中混乱的绝对定位和transform，改用Tailwind内置的flex布局工具类，确保不同屏幕尺寸下布局稳定

内容的提问来源于stack exchange，提问作者Davidino