从“./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>
;
要用白色或其他背景颜色填充整个页面，您需要一个外部 div，将高度设置为 100vh，宽度设置为 100vw。 100vh 表示将高度设置为 Web 浏览器屏幕视口高度的 100%，100vw 表示将高度设置为视口宽度的 100%。
return ( <div style={{height: "100vh", width: "100vw", maxWidth: "100%", background: "white"}}> <motion.nav className="flex items-center justify-between flex-wrap px-6 lg:px-12 ... </motion.nav> </div>将 maxWidth 设置为 100% 是为了防止在 body 标签有 padding 或有其他外部组件占用空间时显示滚动条。
以上使得motion.nav组件占据整个页面。您可能希望将整个页面 div 向上移动到使用该组件的 JSX。
希望这有帮助。