rails_7_sidebar_or_navbar_mobile.md

Before Beginning

Make sure https://github.com/excid3/tailwindcss-stimulus-components are installed. Follow the instructions to install them:

• yarn add tailwindcss-stimulus-components
• add following to javascript\controllers\index.js:

// Import and register all TailwindCSS Components
import { Alert, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
application.register('alert', Alert)
application.register('dropdown', Dropdown)
application.register('modal', Modal)
application.register('tabs', Tabs)
application.register('popover', Popover)
application.register('toggle', Toggle)
application.register('slideover', Slideover)

Building Mobile Menu

Assumption is you have template and have HTML for MD and above that has main sidebar or navbar and has HTML for small sidebar or navabar. I would usually put into seperate files to keep simple.

In layouts/application.html.erb put this div as first div inside body (and put all your other stuff in the div)

    <div data-controller="slideover" data-slideover-open-value="false" 
        data-slideover-invisible-class="-translate-x-full,opacity-0" 
        data-slideover-visible-class="translate-x-0,opacity-100" 
        data-slideover-entering-class="" data-slideover-enter-timeout="300,300" 
        data-slideover-leaving-class="" data-slideover-leave-timeout="300,0" 
        data-slideover-active-target="#slideover-target" aria-haspopup="true" aria-expanded="false">

Example can be seen here https://github.com/john-hamnavoe/my_predictor/blob/main/app/views/layouts/application.html.erb

Your mobile view of world should have show button (usually hamburger button so user can open menu) and a close button (so user can close the menu) add this to each of those buttons

data-action="click->slideover#toggle click@window->slideover#hide"

(Again see here for example https://github.com/john-hamnavoe/my_predictor/blob/main/app/views/shared/_header.html.erb)

The mobile menu needs have the data target overlay set, so in outer div of mobile layout add

data-slideover-target="overlay"

For the menu content also you need to specify data target menu, so where it begins in your mobile layout add (likely just inside the div you added overlay)

data-slideover-target="menu"

(Again see here for example https://github.com/john-hamnavoe/my_predictor/blob/main/app/views/shared/_header.html.erb)