import { NavLink } from 'react-router-dom'; import { useState, useEffect, ReactNode } from 'react'; interface RouteItem { path: string; label: string; element: ReactNode; } interface NavbarProps { items?: RouteItem[]; } function Navbar({ items = [] }: NavbarProps) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMobile, setIsMobile] = useState(false); const [visibleItems, setVisibleItems] = useState(items.length); // 检测屏幕尺寸变化 useEffect(() => { const handleResize = () => { const width = window.innerWidth; setIsMobile(width < 768); // 根据屏幕宽度决定显示多少个导航项 if (width >= 768) { setVisibleItems(items.length); // 大屏幕显示所有 } else if (width >= 480) { // 中等屏幕：如果导航项超过3个，显示3个，否则显示全部 setVisibleItems(Math.min(3, items.length)); } else { // 小屏幕：如果导航项超过2个，显示2个，否则显示全部 setVisibleItems(Math.min(2, items.length)); } }; handleResize(); // 初始调用 window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [items.length]); // 添加依赖，如果 items 长度变化也需要重新计算 // 计算哪些导航项应该显示，哪些应该折叠 const visibleNavItems = items.slice(0, visibleItems); const collapsedNavItems = items.slice(visibleItems); return ( ); } export default Navbar;