我對 React jsx 很陌生，我正在使用 Tailwind，它非常好。我也在邊走邊學。因此，在我的導航中，我能夠顯示漢堡選單，但我不喜歡它們的顯示方式。我試圖確保整個頁面都充滿白色頁面，請參見下面的第二張圖片。

這就是我能夠實現的目標，但我認為它看起來不太乾淨

我想要實現的目標，或類似的目標，白色填充整個網站並顯示選項

我現在的問題是，用我的程式碼；我怎麼能做到這一點？這是我的導航 jsx，我將不勝感激任何幫助。我是唯一的團隊成員，沒有首席開發人員可以提供協助。

從「./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 }} 動畫="{在視圖中？" { 0, 1 } : {}} 退出="{{" 過渡="{{持續時間:0.5}}">
        
Jibu Labs
         

          <按鈕 classname="“flex" items-center px-3 py-2 border rounded text-slate-200 border-slate-400uration-100 懸停：文字白色懸停：邊框白色” onclick="{()" =>
           ; setNaVisible(!navVisible)} >
            
           
          
         
;
        

         
          

           

            
            <連結 to="“項目”" 類別名稱="{`${" !nav可見 ？ “區塊 mt-4 lg:內嵌區塊 lg:mt-0 文字白色 mr-4” ：“塊 lg:inline-block text-white mr-4 justify-end” }`}>
             工作
            
           
{!nav可見？ （
           

            ; setIsOpen((上一個) => !上一個)} > 
            

             效率
            
            
             
            
           
; ) : (
           

            
            <連結 to＝“策略” classname="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1">
             效率
            
           
)}
           

            
            關於 
           
           
           

            
            職業機會 
           
           
           

            
            接觸 
           
           
          
         
        
        ;
         >  ）； }