<div x-data="{show : false}" class="flex flex h-screen relative">

  <nav @mouseover="show = true" @mouseout="show = false" class="flex flex-col h-full justify-between space-y-4 px-2 py-6 bg-gray-800 text-gray-100 lg:absolute text-sm">
    <div class="flex justify-center items-center font-bold space-x-2" :class="{'bg-blue-100 text-blue-500 px-1 py-0.5 rounded': show}">
      <i class="fa fa-bullseye text-blue-500"></i>
      <span x-show="show">BRAND</span>
    </div>
    <div class="flex flex-1 flex-col space-y-2" :class="{'items-center' : !show}">
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-home"></i>
        <span x-show="show">Dashboard</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-laptop"></i>
        <span x-show="show">Components</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-list"></i>
        <span x-show="show">Forms</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-folder-open"></i>
        <span x-show="show">Files</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-font"></i>
        <span x-show="show">Quotes</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-table"></i>
        <span x-show="show">Tables</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-map"></i>
        <span x-show="show">Maps</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-map-marker"></i>
        <span x-show="show">Locations</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-info"></i>
        <span x-show="show">Documentations</span>
      </span>
    </div>

    <div class="flex flex-col space-y-2" :class="{'items-center' : !show}">
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-user"></i>
        <span x-show="show">Profile</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-cog"></i>
        <span x-show="show">Settings</span>
      </span>
      <span class="space-x-2 px-2 py-1 rounded hover:bg-blue-500 hover:text-blue-100 cursor-pointer">
        <i class="fa fa-power-off"></i>
        <span x-show="show">Logout</span>
      </span>
    </div>

  </nav>

  <main class="flex flex-1 flex-shrink-0 px-2 justify-center items-center text-gray-500 bg-gray-50 space-y-2">
    <pre class="p-4 bg-black text-gray-100 rounded">
> Non-responsive interactive sidebar
> Hover to toggle sidebar
</pre>
  </main>

</div>