Power Of Simplicity — Sidebar Component with Vue and Tailwindcss

Power Of Simplicity — Sidebar Component with Vue and Tailwindcss
When I first see Tailwindcss, a utility-first CSS framework, I had similar ideas with most of the developers had. Power Of Simplicity — Sidebar Component with Vue and Tailwindcss

When I first see Tailwindcss, a utility-first CSS framework, I had similar ideas with most of the developers had.

Why would i use tailwind, If I can do it in my s/css folder as well? Html classes kill the readability and grow inevitably if you have complex user interface designs.

Alright, you are right. However, as Adam Wathan says — the man behind the tailwind — “you’re never going to believe me until you actually try it”.

After reading this on the official tailwind website, I gave it shot and surprisingly find it easy and handy and want to share my ideas with you.

When I compare tailwind with the classical styling:

What i mean with classical is creating a styles.scss file in the same folder with your component and style with the classes you named.

  • No need to think about silly class names like wrapper, outer-wrapper, inner-wrapper, or do not have to follow BEM or any other conventions. So, I can focus on my job.
  • No need to go back and forth with your react or Vue files. This may seem trivial but a huge amount of time is wasted between refocusing files each time.
  • File structures are far more simple when there are no styles.scss files anywhere.
  • Tailwind can be easily configured and directives and functions like @apply @layer is really helpful to make your HTML classes readable if you have lots of classes implementing complex designs.

Personally, I find it more appropriate to use it with **_“single file components of Vue” _**because the separation of template-script-style makes it easy to build HTML and CSS. So, I decided to show its benefits with an example using Vue template of codepen and implemented a sidebar component.

If you want to directly jump to the code:

Fork the pen and play with it

Dimmed Sidebar Component

The design can be split into three main parts, sidebar, drawer, and dimmer.

<template>
  <!-- Sidebar -->
  <div class="fixed inset-0 flex z-40">
    <!-- Fixed and Flex frame for Sidebar and Dimmer  -->

    <!-- Absolute Frame for Sidebar Content and Drawer    -->
    <div class="absolute flex top-0 h-screen">
      <!--Drawer -->
      <button
        @click="toggle()"
        class="w-12 h-48 p-1 my-auto rounded text-white bg-gray-600 text-center"
      >
         Drawer
      </button>

      <!-- Sidebar Content -->
      <div
        class="bg-yellow-200 overflow-hidden flex items-center justify-center"
      >
        <div class="w-48 text-center font-bold text-xl">Sidebar</div>
      </div>
    </div>

    <!-- Fluid Dimmer background filling empty space -->
    <div class="flex-1 bg-gray-400 bg-opacity-75" />
  </div>
</template>

<script>
export default {
  methods: {
    toggle() {
      this.open = !this.open;
    },
  },
};
</script>

As you can see, utility class names are easy to remember and they have fantastic documentation to check out if you don’t remember some of the properties.

In the skeleton, 3 main parts are built with fundamental stylings such as bg-color, width, height, display properties.

At this point, I thought it would be nice to have a sidebar component on the right side of the screen. It was easy to do because we have an absolute positioned flex container and the dimmer inside filling all the space remained in the screen, which means we can change flex-direction easily. So, conditional classes with class binding syntax in Vue can handle this.

:class="[right ? 'right-0 flex-row' : 'left-0 flex-row-reverse']"

On the other hand, the sidebar should extend and hide with a smooth transition. For this behavior, let’s use conditional classes with tailwind transition classes. Yes, tailwind supports transitions! Just we need to add proper classes to the sidebar content.

For extending and hide:

:class="[open ? 'max-w-lg ' : 'max-w-0']"

For transition:

transition-color duration-1000

That’s it. Now we can extend and hide the sidebar with a smooth transition but there is another problem on the right-sided sidebar. Flex made it easy to change the direction but we have a drawer to be rotated.

For origin centered rotation:

:class=”[right ? ‘-rotate-90’ : ‘rotate-90’]”

class=”block transform origin-center font-bold”

Easy as pie! Last but the crucial point about the sidebar is the dimmer covers the screen fully and does not disappear after the sidebar closed. This prevents the interactivity of the user on the page. To make this happen, after a quick search I found a transition component solution of Vue. It is very easy to implement and makes Vue very special among the other frameworks.

For the fade transition of the dimmer:

<transition name="fade">
    <!-- Dimmer -->
    <div
     v-if="dimmer && open"
     @click="toggle()"
     class="flex-1 bg-gray-400 bg-opacity-75"
    />
</transition>
<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
    transition: opacity 0;
}
</style>

In the end, we have a customizable sidebar with a smooth transition and fade effect. If you think, HTML classes make a huge mess in the file you can extract components using @apply directive of tailwind. For instance, you may have right and left side position classes extracted such as:

<style lang="postcss">

    .right-sided {
        @apply right-0 flex-row;
    }
    .left-sided {
        @apply left-0 flex-row-reverse;
    }
</style>

Also, you may use computed properties of Vue to simplify even more:

computed:{
    position:{
        function () {
             return right ? 'right-sided' : 'left-sided';
    }
}
// bind it in your class
:class="position"

Vue and Tailwind make a great duo in this manner and combining their simplicity make it possible to have scalable and maintainable single-page components in large projects, I believe.

If you have any experience with this stack, please share your experiences and your ideas! Thank you for your time!

If you want to check out my last story, I tried Nestjs to build a backend application as a frontend developer, here you go!

Suggest:

Learn Vue.js from scratch 2018

Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

Vue.js Tutorial: Zero to Sixty

Learn Vue.js from Scratch - Full Course for Beginners

Create Shopping basket page With Vuejs and Nodejs

Learn Vue 2 in 65 Minutes -The Vue Tutorial for 2018