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-tailwind-layout/commit/46658fd185b55e14140faa56a9671ba9f02c124a
Based on this blogpost: https://blog.corsego.com/tailwindcss-dropdown

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