仅使用 CSS 构建可折叠侧边栏

发布日期： 2024-10-26 阅读量： 作者： 网络

在从事 nextjs 项目时，我偶然发现了一种情况，我希望我的侧边栏组件可折叠。乍一看，它看起来很简单，可以使用诸如 usestate 之类的 react hook 来维护切换状态。
但是使用钩子会迫使我将组件制作为客户端，这是我不想要的。
因此，我在互联网的海洋中徘徊，寻找可能的解决方案来解决我的问题，并找到了一个后门来实现我想要的结果，那就是..鼓声.... 复选框，是的，你没看错，复选框将充当切换器。
我们可以使用复选框选中状态来切换我们的珍贵的、小的、服务器渲染的侧边栏。
抛开所有这些，让我们立即开始编写代码。
请注意，我将使用 tailwind css 进行样式设置。
好的，首先让我们为我们的应用程序设置一个样板代码，我们需要一个侧边栏和一个主仪表板部分。我们可以使用下面的代码来实现

<main class="grid grid-cols-[auto_1fr] min-h-screen">
  <nav class="min-h-screen w-64 bg-red-500">
    <ul class="p-8">
      <li>element 1</li>
      <li>element 2</li>
      <li>element 3</li>
      <li>element 4</li>
    </ul>
  </nav>
  {/* main content */}
  <section class="px-8 py-12">
    hello, dev!
  </section>
</main>

# css # ai

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯7107 】【 SEO推广7035 】

上一篇: 函数中返回多返回值时如何保持代码简洁？

下一篇: 指针与 lambda 在 C++ 函数式编程中的前世今生

仅使用 CSS 构建可折叠侧边栏

随便看看