从“./favicon.png”导入徽标; 从“framer-motion”导入{motion}; 从“react-intersection-observer”导入{useInView}; 从“./MenuDropdown”导入MenuDropdown; 从“react-router-dom”导入{链接}; 从“react”导入{useState}; 导出默认函数 Navigation() { const [ref, inView] = useInView({ triggerOnce: false }); const [isOpen, setIsOpen] = useState(false); const [navVisible, setNaVisible] = useState(false); const megaMenu = document.getElementById(“mega-menu”); 返回 ( <运动导航 className =“flex items-center justify- Between flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto” 参考={参考} 初始={{ y: -10, 不透明度: 0 }} 动画={在视图中? { y: 0, 不透明度: 1 } : {}} 退出={{ y: -10, 不透明度: 0 }} 过渡={{持续时间:0.5}} > <img src={logo} className=“w-8 h-8” alt="徽标"></img>Jibu Labs
</a><按钮 className =“flex items-center px-3 py-2 border rounded text-slate-200 border-slate-400uration-100 悬停:文本白色悬停:边框白色” onClick={() =>; setNaVisible(!navVisible)} >;;<span className=“ring-1 p-0.5 环-白色圆形-全”</span> <链接 to=“项目” 类名={`${ !nav可见 ? “块 mt-4 lg:内联块 lg:mt-0 文本白色 mr-4” :“块 mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end” }`} > 工作 链接>{!nav可见? (; setIsOpen((上一个) => !上一个)} > <span className=“ring-1 p-0.5 环-白色圆形-全”</span>; ) : (效率<span className=“ring-1 p-0.5 环-白色圆形-全”</span> <链接 to=“策略” className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1" > 效率 链接>)}<span className=“ring-1 p-0.5 环-白色圆形-全”</span> 关于 </a><span className=“ring-1 p-0.5 环-白色圆形-全”</span> 职业机会 </a><span className=“ring-1 p-0.5 环-白色圆形-全”</span> 接触 </a>> </motion.nav> ); }</pre></p>
要用白色或其他背景颜色填充整个页面,您需要一个外部 div,将高度设置为 100vh,宽度设置为 100vw。 100vh 表示将高度设置为 Web 浏览器屏幕视口高度的 100%,100vw 表示将高度设置为视口宽度的 100%。
将 maxWidth 设置为 100% 是为了防止在 body 标签有 padding 或有其他外部组件占用空间时显示滚动条。
以上使得motion.nav组件占据整个页面。您可能希望将整个页面 div 向上移动到使用该组件的 JSX。
希望这有帮助。