Button that push sidebar in Vue JS and Tailwind CSS

user_17843039 0
Viewed 959

I'm coding a sidebar that when the resolution are small the sidebar disappear and If I click in one button my sidebar back from my screen, but my code push only a white div. Here's my code:

<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>

For better view here's some images:
enter image description here enter image description here

vuejs3 vue-component tailwind-css vue.js
1 Answers

So you need to show a sidebar such that:

  1. It is hidden by default on small screens
  2. It is visible by default on medium and above screens
  3. User should be able to toggle sidebar visibility on small screens
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>

user_72033730
Related