如何在react jsx中使漢堡選單適合整個頁面
<p>我對 React jsx 很陌生，我正在使用 Tailwind，它非常好。我也在邊走邊學。因此，在我的導航中，我能夠顯示漢堡選單，但我不喜歡它們的顯示方式。我試圖確保整個頁面都充滿白色頁面，請參見下面的第二張圖片。 </p>
<p>這就是我能夠實現的目標，但我認為它看起來不太乾淨</p>
<p>我想要實現的目標，或類似的目標，白色填充整個網站並顯示選項</p>
<p>我現在的問題是，用我的程式碼；我怎麼能做到這一點？這是我的導航 jsx，我將不勝感激任何幫助。我是唯一的團隊成員，沒有首席開發人員可以提供協助。</p>
從「./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>
;
