使用 TailwindCSS 制作导航抽屉/滑动侧边栏（蓝图）

让我们用 TailwindCSS 和 Nuxt.js 构建上面的导航侧边栏。这不一定是一个专门针对 Nuxt 的项目，我几乎不会使用任何 Vue/Nuxt 功能，所以 TailwindCSS 可以与任何框架一起使用。

我不会解释标记和元素，这只是使用 Tailwind 制作导航抽屉的蓝图，无需编写任何自定义 CSS。

TL;DR

现场演示 - https://tailwind-components-pink.vercel.app/

源代码 - https://github.com/fayazara/tailwind-components

1. 创建 Nuxt 项目并添加 Tailwindcss

运行命令npx create-nuxt-app tailwind-sidebar并输入一些项目信息，选择 Tailwind 作为你的 UI 框架。Nuxt JS 提供了开箱即用的 Tailwind 设置，你无需手动操作。如果你使用的是 React 或 Vanilla JS，请参考Tailwind 文档。

<logo />一旦项目创建完毕，从中删除启动代码、类和组件index.vue，同时从中删除样式default.vue

2.制作导航栏。

以下是我将采取的方法。

创建一个名为的组件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>

现在添加两个部分，一个带有按钮+徽标，一个用于桌面按钮，我们将justify-between类添加到导航元素，使导航栏元素位于屏幕的两端。

我们将隐藏最右边的 div，即手机和较小屏幕上的桌面按钮，因此将显示修饰符类添加到第二个 divhidden md:block md:flex md:justify-between md:bg-transparent

3. 导航抽屉

因此从技术上讲，我们将把侧边栏 div 保持在视口之外，并在切换时将其转换到屏幕上。

现在添加一个带有aside固定位置标签的侧边栏和另一个 div，它将充当具有绝对定位的覆盖并将其居中。

使用 z-indexn为覆盖层和 z-indexn+1为侧边栏分层，下面是它的视觉表示。

添加交互

单击按钮时，translate x to full在 aside 标签上切换类，这将使侧边栏水平（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");
        }
      }
    }
  }

您可以在此处找到完整代码，并在此处找到现场演示。

这些图标取自Vijay Verma的uilogos和Pablo Stanley的Open Peeps插图