從「./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。
希望這有幫助。