Dropdown menu inside sidebar using Tailwind CSS

Question

I'm learning TailwindCSS, as it seems to be more advance than Bootstrap.

I've this html template, that has a Sidebar. I'd like that when users click each Part-{n}, it shows the inner parts of the content.

Note: In my html Parts are called Capítulos (Chapters in spanish).

In other words, I'd like to replicate this:

Codepen:

https://codepen.io/ogonzales/pen/WNQMyXJ

<div class="w-full md:w-1/5 bg-gray-900 md:bg-gray-900 px-2 text-center fixed bottom-0 md:pt-8 md:top-0 md:left-0 h-16 md:h-screen md:border-r-4 md:border-gray-600">
    <div class="md:relative mx-auto lg:float-right lg:px-6">
     <ul class="list-reset flex flex-row md:flex-col text-center md:text-left">
        <li class="mr-3 flex-1">
           <a  href="/" class="block py-1 md:py-3 pl-1 align-middle text-gray-800 no-underline border-b-2 border-gray-800 md:border-gray-900">&emsp;&emsp;<img src="{% static 'images/logo.png' %}" width="100%"
                height="100%"></a>
        </li>  
       </ul>
    </div>
 </div>

Answer 1

If you are using Vue:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<script type="module"> 
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
  setup() {
        const showDropdown = ref(false)
    return {
      showDropdown
    }
  }
}).mount('#app')
</script>

<div id="app">
    <div>
        <li class="my-px"> 
            <button 
                type="button" 
                @click="showDropdown = !showDropdown"
                class="hover:bg-gray-100 hover:text-gray-700 flex 
                        items-center w-full p-2 text-base font-normal 
                        text-gray-300 transition duration-75 rounded-lg 
                        group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" 
            >
                <svg class="hover:bg-gray-100 hover:text-gray-700  
                     flex-shrink-0 w-6 h-6 text-gray-400 transition 
                     duration-75 group-hover:text-gray-900 dark:text-gray-400 
                     dark:group-hover:text-white">
                        <path fill-rule="evenodd"  fill="currentColor"
                            d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z" 
                            clip-rule="evenodd"></path>
                </svg>
                <span class="flex-1 ml-3 text-left whitespace-nowrap" >Manage Users</span>
                <svg  class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" >
                    <path   
                        :d="[ !showDropdown ? 'M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z':'M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z']" 
                        clip-rule="evenodd"></path>
                </svg>
            </button>
            <ul 
                v-if="showDropdown" 
                class="my-px py-2 space-y-2 transition-transform rounded-tl-lg rounded-tr-lg .3s ease-in-out md:translate-y-0 " 
                :class="[
                    showDropdown ? 'bg-indigo-600' : ''
                ]"
            > 
                <li class="flex flex-row items-center h-10 px-3 rounded-lg text-gray-300 hover:bg-gray-100 hover:text-gray-700">
                     <span class="flex items-center justify-center text-lg ">
                        <svg
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            class="h-5 w-5"
                        >
                            <path d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" />
                        </svg>
                    </span>
                    <span class="flex-1 ml-3 whitespace-nowrap">Users</span>
                    <span 
                        class="inline-flex items-center justify-center 
                               px-2 ml-3 text-sm font-medium text-gray-800 
                               bg-gray-200 rounded-full dark:bg-gray-700 
                               dark:text-gray-300">10k</span>
                </li> 
                <li class="flex flex-row items-center h-10 px-3 rounded-lg text-gray-300 hover:bg-gray-100 hover:text-gray-700">
                     <span class="flex items-center justify-center text-lg ">
                        <svg
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            class="h-5 w-5"
                        >
                            <path d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" />
                        </svg>
                    </span>
                    <span class="flex-1 ml-3 whitespace-nowrap">Users</span>
                    <span 
                        class="inline-flex items-center justify-center 
                               px-2 ml-3 text-sm font-medium text-gray-800 
                               bg-gray-200 rounded-full dark:bg-gray-700 
                               dark:text-gray-300">10k</span>
                </li> 
                <li class="flex flex-row items-center h-10 px-3 rounded-lg text-gray-300 hover:bg-gray-100 hover:text-gray-700">
                     <span class="flex items-center justify-center text-lg ">
                        <svg
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            class="h-5 w-5"
                        >
                            <path d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" />
                        </svg>
                    </span>
                    <span class="flex-1 ml-3 whitespace-nowrap">Users</span>
                    <span 
                        class="inline-flex items-center justify-center 
                               px-2 ml-3 text-sm font-medium text-gray-800 
                               bg-gray-200 rounded-full dark:bg-gray-700 
                               dark:text-gray-300">10k</span>
                </li> 
            </ul> 
        </li>
    </div>
</div>

Answer 2

Bootstrap that You are referring to is CSS framework with extra JavaScript (using jQuery) scripts for modals, dropdowns, and collapses (that You are trying to get right now).

Tailwind is in other hand "just" CSS framework without any JS.

Also opposite to Bootstrap (or Bulma or any other similiar framework) is does not contain any components like buttons, inputs etc. So there is also no ready to use "collapse" component. Instead it is used just for styling from scratch, just like with plain CSS.

Unlike many other CSS frameworks, Tailwind doesn't include any component classes like form-input, btn, card, or navbar.

Tailwind is a CSS framework for implementing custom designs, and even a component as simple as a button can look completely different from one site to another, so providing opinionated component styles that you'd end up wanting to override anyways would only make the development experience more frustrating.

Source: https://tailwindcss.com/components

Collapsing menu that You are trying to achieve requires some scripting (JS) to work. Because I do not know it You are using jquery or some JS framework, I cannot give you any ready to use example. But it actually has nothing to do with Tailwind itself. It is just hiding/displaying some element after clicking in another element. It is logic that can be achieved with any JS framework or plain JS, depends what You need.

If you are using for example Vue framework which will work great with Tailwind, then You can use conditional rendering (https://v2.vuejs.org/v2/guide/conditional.html) but like I said it has nothing to do with Tailwind itself so there is no point to give Vue examples in this Tailwind related question.

Answer 3

If you want to achieve this with tailwind the easiest approach is to use alpine js to toggle.

You can find more information and download that library on : https://github.com/alpinejs/alpine