2024年2月27日 星期二

利用tailwind css設計一個簡易側導覽

最近在嚐試利用前端搭配flask寫網頁,幾個小功能,但是需要一個連結給使用者,所以就想要做一個側導覽功能,初始結構是20美元小助理給的,自己微調一下,符合使用比較重要,大致就是拆成html跟javascript,css的部份直接採用tailwind套版,直觀又快速。

首先是html,版面的部份要切出左側一個區域來給側導覽,然後一個按鈕,側導覽的初始狀態是整個隱藏,經過按鈕點擊來做顯示與隱藏的切換:

<div id="sidebar" class="fixed top-0 left-0 h-full bg-gray-800 transition-transform duration-300 ease-in-out -translate-x-full z-10">  
 <div class="mt-16">  
 <ul class="text-white">  
 <li class="p-4 hover:bg-gray-700"><a href="{{ url_for('Router1') }}">Router1</a></li>  
 <li class="p-4 hover:bg-gray-700"><a href="{{ url_for('Router2') }}">Router2</a></li>  
 <li class="p-4 hover:bg-gray-700"><a href="{{ url_for('Router3') }}">Router3</a></li>  
 <li class="p-4 hover:bg-gray-700"><a href="{{ url_for('Router4') }}">Router4</a></li>  
 </ul> </div></div>  
<button id="toggleNav" class="fixed top-0 left-0 mt-10 p-2 text-white bg-blue-500 rounded z-20 transition-transform duration-300 ease-in-out">  
  MenuBar  
</button>

接著在按扭地方加入一個監聽器,主要是偵測到點擊的時候就做sidebar屬性-translate-x-full的切換,然後按鈕的屬性再隨著sidebar的屬性做變化的判斷

document.addEventListener('DOMContentLoaded', function() {  
    const toggleNavButton = document.getElementById('toggleNav');  
  toggleNavButton.addEventListener('click', function() {  
        const sidebar = document.getElementById('sidebar');  
  sidebar.classList.toggle('-translate-x-full');  
  
 if(sidebar.classList.contains('-translate-x-full')){  
            toggleNavButton.style.transform = 'translateX(0px)';  
  } else {  
            toggleNavButton.style.transform = `translateX(${sidebar.offsetWidth}px)`;  
  }  
    });  
});