Mini/Tailwind collapsing menu

Uses Mini.js to show a hidden div and add the .rotate-90 class to the icon when the section is clicked.

Demo

Notes

Code

<div class="hover:bg-gray-100 py-1 px-2 cursor-pointer text-gray-800 rounded-md transition-all mb-2 flex items-center justify-between" :click="showNotes=!showNotes">
  <div class="flex space-x-3 items-center" >
    <span>Notes</span>
  </div>
  <div class="items-center transition-all text-black" :class="showNotes ? 'rotate-90' : ''">
    <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z" fill="currentColor"/></svg>
  </div>
</div>
<nav :class="showNotes ? '' : 'hidden'" class="ml-4 mb-4 pl-3 text-sm space-y-1 flex-col">
  <a class="transition-all flex justify-between hover:bg-gray-100 py-1 px-2 cursor-pointer text-gray-600 rounded-md">
    <span>
      General
    </span>
  </a>
  <a class="flex justify-between transition-all block hover:bg-gray-100 py-1 px-2 cursor-pointer text-gray-600 rounded-md">
    <span>
      Security
    </span>
  </a>
  <a class="transition-all block hover:bg-gray-100 py-1 px-2 cursor-pointer text-gray-600 rounded-md">
    Billing
  </a>
</nav>