Tailwind on Rails #139 Advanced Navbar Dropdown Menu

Previously we created a responsive layout with a Sidebar. On a small screen we will hide the sidebar and display a dropdown mobile-only menu instead. To make the user experience seamless, it will follow a few common practices: close dropdown by clicking Escape close dropdown if screen size is more than sm (768 px) hide "main" area and display ONLY dropdown on page blur "main" disable scrolling of "body" content I also think that this lesson is a GREAT resource on understanding how StimulusJS works. Episode source code: https://github.com/corsego/138-tailwi... Based on this blogpost: https://blog.corsego.com/tailwindcss-... 0:00 Working demo 1:07 Mobile dropdown menu works on other websites 2:36 Dropdow menu HTML and CSS 7:05 Stimuls Navbar controller to open/close dropdown 10:28 Auto close dropdown menu on big screen 13:00 Blur background when dropdown is open 14:16 Disable background scroll 15:05 Hide main content when dropdown open 15:52 Close menu with keyboard 16:54 Dropdown menu style options 18:02 Steal dropdown style from Tailwind wbsite