Dashboard Vue

dashboard-vue.markdown

Dashboard Vue

A Pen by Jose G. Perez Taveras on CodePen.

License.

index.html

<div id="app" class="flex flex-col-reverse h-screen antialiased bg-gray-200 text-gray-500 sm:flex-row">
  <aside>
    <nav>
      <ul class="flex items-center sm:flex-col sm:items-stretch">
        <li class="flex-1">
          <a href="#" class="flex flex-col items-center font-semibold tracking-wide px-5 pt-1 hover:text-gray-800 sm:py-3">
            <i data-feather="home" class="h-6 w-6"></i>
            <span class="sm:hidden lg:block">Dashboard</span>
          </a>
        </li>
        <li class="flex-1">
          <a href="#" class="flex flex-col items-center font-semibold tracking-wide px-5 pt-1 hover:text-gray-800 sm:py-3">
            <i data-feather="settings" class="h-6 w-6"></i>
            <span class="sm:hidden lg:block">Settings</span>
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <section class="flex-auto">
    <form v-show="showSearch" v-show="showSearch" class="mb-4 flex w-full">
      <input type="text" placeholder="Search..." class="-mr-8 px-5 py-3 w-full shadow-sm tracking-wide font-semibold">
      <button type="button" @click="showSearch = false">
        <i data-feather="x" class="h-5 w-5"></i>
      </button>
    </form>
    <header v-show="!showSearch" class="px-5 py-3 flex justify-between items-center">
      <div>logo</div>
      <nav class="flex justify-around items-center">
        <div class="mr-2 pr-2 flex items-center border-r border-gray-400 sm:mr-4 sm:pr-4">
          <button @click="showSearch = true" class="mr-2">
            <i data-feather="search" class="h-5 w-5"></i>
          </button>
          <button class="relative">
            <i data-feather="bell" class="h-5 w-5"></i>
            <span class="p-1 absolute top-0 rounded-full text-xs shadow-sm bg-red-500 text-white"></span>
          </button>
        </div>
        <div class="relative">
          <button @click="showUserMenu = !showUserMenu" class="flex items-center">
            <span class="mr-2 font-semibold hidden sm:block">Jane Doe</span>
            <img src="https://images.unsplash.com/photo-1506901437675-cde80ff9c746?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Img" class="h-8 w-8 object-cover rounded-full box-content border-2 border-gray-400">
          </button>
          <div v-show="showUserMenu" class="w-40 overflow-hidden absolute right-0 rounded-md shadow-md bg-white">
            <a href="#" class="block px-4 py-2 hover:bg-gray-800 hover:text-gray-100">Account Settings</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-800 hover:text-gray-100">Support</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-800 hover:text-gray-100">Log out</a>
          </div>
        </div>
      </nav>
    </header>
    <main class="px-5 py-3">
      
      <section class="">
        <h1 class="text-2xl tracking-wider font-semibold text-gray-700">Overview</h1>
        <main class="flex flex-col flex-wrap sm:flex-row">
          <article class="my-2 px-6 py-8 flex-auto rounded-md shadow-sm bg-white sm:w-1/4 sm:mr-2">Card</article>
          <article class="my-2 px-6 py-8 flex-auto rounded-md shadow-sm bg-white sm:w-1/4 sm:mr-2">Card</article>
          <article class="my-2 px-6 py-8 flex-auto rounded-md shadow-sm bg-white sm:w-1/4">Card</article>
        </main>
      </section>
    
    </main>
  </section>
</div>

script.babel

feather.replace()

new Vue({
  el: "#app",
  data: {
    showUserMenu: true,
    showSideBar: false,
    showSearch: false
  }
})

scripts

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/feather-icons"></script>

style.scss

/* Inspiration
https://dribbble.com/shots/6202787-CRM-Dashboard-UI/attachments
https://dribbble.com/shots/5096812-BoxedCMS-Business-Dashboard/attachments
*/

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />