在 Vue JS 和 Tailwind 中推动侧边栏的按钮 CSS

Question

我正在编写侧边栏，当分辨率较小时，侧边栏会消失，如果我单击一个按钮，我的侧边栏就会从屏幕上退回，但我的代码只推送白色 div。这是我的代码：

<div class="w-64 space-y-6 border-r px-2 py-4 inset-y-0 left-0 border-gray-100 absolute md:relative
md:-translate-x-0 transform -translate-x-full transition duration-200 ease-in-out dark:bg-vd1 
dark:border-gray-800 dark:border-opacity-90" :class="{ 'relative -translate-x-0': showSidebar }">
<div class="py-4 px-6">
         <div class="mb-4 mx-auto w-full max-w-sm fixed top-4 left-6 inline-block">
           <div class="justify-between inline-flex w-full">
               <div>
              <a href="" class="inline-flex" >
               <img src="../Assets/Img/logo.svg" class="h-9 w-9 pt-1" alt="" />
                <p class="font-semibold text-xl pl-4 pt-2 text-indigo-500 text-opacity-90">Vuexy</p>
              </a>
              </div>
              <div>
              <BreezeCheckbox2 name="sidebar" class="mr-11 mt-3 w-5 h-5 rounded-full" checked/>
              </div>
           </div>
         </div>
       </div>
       <div class="flex justify-center">
          <BreezeButton
            class="inline-flex items-center w-56 h-11 bg-gradient-to-r from-indigo-500 to-purple-500  text-white
            text-sm hover:bg-purple-600 shadow-purple mt-1 normal-case">
            <img src="../Assets/Icons/shield.svg" alt="" class="mr-2 w-5 h-5">
            <span v-if="selectedLang==='English'" class="font-normal">Access Control</span>
            <span v-if="selectedLang==='French'" class="font-normal">Contrôle d'accès</span>
            <span v-if="selectedLang==='German'" class="font-normal">Zugangskontrolle</span>
            <span v-if="selectedLang==='Portuguese'" class="font-normal">Controle de acesso</span>
          </BreezeButton>
       </div>
    </div>

<button @click="showSidebar = !showSidebar" class="lg:hidden md:hidden ml-5 dark:text-gray-300">
-------------------
<script>
export default {
  setup(){
    const showSidebar = ref(false)
    const stayInDropdown = ref(true)
    const isDark = ref(false)

    return{
      showSidebar,
      stayInDropdown,
      isDark,
    }
  },
</script>

为了更好地查看，这里有一些图片：

Answer 1

所以你需要显示一个侧边栏，这样：

在小屏幕上默认隐藏
中等及以上屏幕默认可见
用户应该能够在小屏幕上切换侧边栏可见性

Check below example 
Run the code snippet
Open in full screen
Play with screen size and toggle sidebar visibility

new Vue({
  el: '#app',
  data() {
    return {
      showSidebar: false
    }
  },
  methods: {
    toggleSidebar() {
      this.showSidebar = !this.showSidebar
    }
  }
})

span.icon.menu>div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container h-screen w-screen flex bg-blue-100">
  <div class="sidebar p-4 rounded-xl bg-white border border-gray-400"
    :class="{'block':showSidebar,'hidden md:block':!showSidebar}">Sidebar</div>
  <div class="sidecontent flex-grow p-4 bg-gray-100">
    <div @click="toggleSidebar" class="navbar flex p-4 rounded-xl bg-white">
      <span class="icon menu mr-4">
        <div></div>
        <div></div>
        <div></div>
      </span>
      <span>Navigation</span>
    </div>
    <div class="content p-4 ">Content</div>
  </div>
</div>

在 Vue JS 和 Tailwind 中推动侧边栏的按钮 CSS

Button that push sidebar in Vue JS and Tailwind CSS

vue.js

vue-component

tailwind-css

vuejs3