Show / Hide sidebar on mobile

@AungHtetPaing__

I need to keep the relative and absolute as otherwise there is a white space?! of w-64

@boyjarv so you mean it works if you keep both relative and absolute? For me, same element with both relative and absolute doesn't make sense.

@AungHtetPaing__ no, it didn't work

here is my App.vue:

<template>
  <div class="relative">
    <the-loader v-if="showLoading"></the-loader>
    <router-view />
    <Footer />
  </div>
</template>

here is HomeView:

<div class="home relative flex min-h-screen">
    <SideBar />
    <div class="container mx-auto max-w-1100 my-16 p-4 md:p-0">
      <div v-if="isAuthenticated" class="flex flex-col md:flex-row">
        <div class="w-full md:w-2/3 pr-8">
          <h3 class="mb-8 text-4xl">Welcome {{ user.name }}</h3>
          <p class="mb-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
            elementum ante nec magna tristique, id bibendum lectus egestas.
            Maecenas tincidunt, elit a viverra sodales, est nibh finibus dolor,
            id porta est ex quis lorem. Integer in lacinia tortor. Sed enim est,
            venenatis vitae vestibulum vel, rutrum non ipsum. Nam iaculis mauris
            vitae felis consectetur, vitae imperdiet nisl pulvinar. Praesent
            sollicitudin ut velit ac tincidunt. Pellentesque elementum, orci sit
            amet convallis maximus, mi lectus feugiat enim, a venenatis nunc
            lacus a nunc. Integer mauris neque, pharetra et massa id, tristique
            gravida ipsum.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

here is my Sidebar:

<template>
  <div>
    <button @click="showMenu()">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-8 h-8"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
        />
      </svg>
    </button>
    <div
      class="bg-gray-700 text-gray-100 w-64 space-y-6 px-2 py-4 absolute inset-y-0 left-0 md:relative md:-translate-x-0 transform -translate-x-full transition duration-200 ease-in-out"
      :class="{ 'relative -translate-x-0': showSidebar }"
    >
      <a href="#" class="flex items-center space-x-2 px-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-10 h-10"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
          />
        </svg>
        <span class="text-2xl font-extrabold text-white">jbiddulph</span>
      </a>
      <NavBar />
    </div>
  </div>
</template>

@boyjarv it is hard to tell what is the problem. Inspect sidebar div height under button if you use absolute inset-y-0 left-0 it require parent div height to set. https://tailwindcss.com/docs/top-right-bottom-left

<template>
  <div class="relative h-full"> // to take full screen height
    <button @click="showMenu()">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-8 h-8"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
        />
      </svg>
    </button>
    <div
      class="bg-gray-700 text-gray-100 w-56 space-y-6 px-2 py-4 absolute inset-y-0 left-0 md:-translate-x-0 transform transition duration-200 ease-in-out"
      :class="[showSidebar ? '-translate-x-0' : '-translate-x-full']"
    >
      <a href="#" class="flex items-center space-x-2 px-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-10 h-10"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
          />
        </svg>
        <span class="text-2xl font-extrabold text-white">jbiddulph</span>
      </a>
      <NavBar />
    </div>
  </div>
</template>

And you should separate toggle button from sidebar component because you are also making flex together with button so there will be white space beside welcome page content when you close side bar.