rails_7_sidebar_toggle_menu.md

Before Beginning

Use these follow instructions at top to install:

https://github.com/excid3/tailwindcss-stimulus-components

Menu Toggle

See below simple sidebar menu that toggles to reveal other menus see how the toggle component is used

1. First div sets data-controller='toggle'
2. button has data-action='click->toggle#toggle touch->toggle#toggle'
3. First div with svg is set to toggle <div data-toggle-target='toggleable'> it has the exapand arrow pointing right
4. Second div with svg is also set to toggle as per 3, but is hidden class="hidden" it has same svg but rotated 90 so points down
5. The sub menu div is toggle target and hidden <div data-toggle-target='toggleable' class="hidden space-y-1" id="sub-menu-5">

        <div data-controller='toggle' class="space-y-1">
          <!-- Current: "bg-gray-100 text-gray-900", Default: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900" -->
          <button data-action='click->toggle#toggle touch->toggle#toggle' type="button" class="bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900 group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" aria-controls="sub-menu-5" aria-expanded="false">
            <!-- Heroicon name: outline/chart-bar -->
            <svg class="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
            </svg>
            <span class="flex-1">Reports</span>
            <!-- Expanded: "text-gray-400 rotate-90", Collapsed: "text-gray-300" -->
            <div data-toggle-target='toggleable'>
              <svg class="text-gray-300 ml-3 h-5 w-5 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-gray-400" viewBox="0 0 20 20" aria-hidden="true">
                <path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
              </svg>
            </div>
            <div data-toggle-target='toggleable' class="hidden">
            <svg class="text-gray-400 rotate-90 ml-3 h-5 w-5 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-gray-400" viewBox="0 0 20 20" aria-hidden="true">
              <path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
            </svg>
          </div>
          </button>
          <!-- Expandable link section, show/hide based on state. -->
          <div data-toggle-target='toggleable' class="hidden space-y-1" id="sub-menu-5">
            <a href="#" class="group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Overview</a>

            <a href="#" class="group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Members</a>

            <a href="#" class="group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Calendar</a>

            <a href="#" class="group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Settings</a>
          </div>
        </div>