TailwindCSS로 탐색 창/슬라이딩 사이드바 만들기(청사진)

TailwindCSS 및 Nuxt.js를 사용하여 위의 탐색 사이드바를 빌드해 보겠습니다. nuxt 특정 프로젝트일 필요는 없습니다. 어떤 프레임워크에서도 tailwindcss를 사용할 수 있도록 vue/nuxt 기능을 거의 사용하지 않을 것입니다.

I will not be explaining the markup and the elements, this will just be a blueprint for making a navigation drawer with tailwind, without writing any custom css.

TL;DR

라이브 데모 - https://tailwind-components-pink.vercel.app/

소스 코드 - https://github.com/fayazara/tailwind-components

1. Nuxt 프로젝트 만들기 및 Tailwindcss 추가

명령npx create-nuxt-app tailwind-sidebar을 실행하고 일부 프로젝트 정보를 입력하고 UI 프레임워크로 tailwind를 선택합니다. Nuxt js는 기본적으로 tailwind 설정을 제공하므로 수동으로 수행할 필요가 없습니다. React 또는 Vanilla JS를 사용하는 경우 tailwind docs을 따르십시오.

프로젝트가 생성되면 <logo />에서 시작 코드, 클래스 및 index.vue 구성 요소를 제거하고 default.vue에서 스타일도 제거합니다.

2. Navbar 만들기.

다음은 제가 취할 접근 방식입니다.


navbar.vue라는 구성 요소를 만들고 일부 패딩 및 여백과 함께 nav가 있는 flex 요소를 추가합니다.

<nav
    class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
  >
...
</nav>

이제 두 개의 섹션을 추가합니다. 하나는 버튼 + 로고가 있고 다른 하나는 데스크탑 버튼용입니다. nav 요소에 justify-between 클래스가 추가되어 navbar 요소가 화면 양쪽 끝에 배치됩니다.

가장 오른쪽 div, 전화기 및 작은 화면의 데스크탑 버튼을 숨길 것이므로 디스플레이 수정자 클래스를 두 번째 div에 추가합니다hidden md:block md:flex md:justify-between md:bg-transparent.

3. 탐색 서랍

따라서 기술적으로 사이드바 div를 뷰포트 외부에 유지하고 전환될 때 화면으로 변환합니다.

이제 위치가 고정된 aside 태그가 있는 사이드바와 절대 위치 지정이 있는 오버레이 역할을 하는 또 다른 div를 추가하고 중앙에 배치합니다.

오버레이를 위한 z-indexn와 사이드바를 위한 z-indexn+1로 레이어를 구성하세요. 아래는 그에 대한 시각적 표현입니다.

상호 작용 추가

버튼을 클릭하면 Aside 태그의 클래스를 전환translate x to full하여 측면 배트를 화면 안팎으로 수평(x축)으로 이동하고 버튼을 전환하면 오버레이를 표시/숨깁니다.

저는 vue를 사용하고 있으므로 클래스를 모든 요소에 조건부로 바인딩하는 방법은 다음과 같습니다.

<aside
 class="transform top-0 left-0 w-64 bg-white fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30"
 :class="isOpen ? 'translate-x-0' : '-translate-x-full'">
...
</aside>

여기에 전환 클래스를 추가하여 움직이는 동안 애니메이션을 적용합니다.

작은 경고, 창은 사이드바가 열린 후에도 계속 스크롤됩니다. 사이드바가 열릴 때마다 body 태그에 overflow hidden 속성을 추가하고 닫히면 vue의 watch 속성을 사용하여 제거합니다.

watch: {
    isOpen: {
      immediate: true,
      handler(isOpen) {
        if (process.client) {
          if (isOpen) document.body.style.setProperty("overflow", "hidden");
          else document.body.style.removeProperty("overflow");
        }
      }
    }
  }

전체 code here 및 live demo here 을 찾을 수 있습니다.

아이콘은 의uilogos 및 삽화는 의Open Peeps에서 사용되었습니다.