# #139 Advanced Navbar Dropdown Menu

- URL: https://superails.com/posts/tailwind-on-rails-139-advanced-navbar-dropdown-menu
- Published: 2023-08-10
- Duration: 18:15
- Access: free
- Playlists: Tailwind on Rails

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

## Chapters

- 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