#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-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
0
Featured in playlists
![#138 Responsive Layout with Sidebar and Navbar](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg5MCwicHVyIjoiYmxvYl9pZCJ9fQ==--20f38afc454180eb5a08327b9629d846e64c1849/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#139 Advanced Navbar Dropdown Menu](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkwMCwicHVyIjoiYmxvYl9pZCJ9fQ==--cd4b7cf897374899e30004392d15c095c38f9999/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#140 Click outside to close Menu with Stimulus-Use](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--7ca40fc28c88f131fd3eb23fbe0b8c8518c3c577/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
Stop copypasting CSS and Javascript UI elements!
Learn to write your own!
Really, there are like 50 classes that you need to remember and you're set for life!
Recommended based on what you are watching now
![#35 Google API Console, oAuth Consent Screen](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgyMSwicHVyIjoiYmxvYl9pZCJ9fQ==--5eabd73553f51ff77acc5a37aff6b654803dbf45/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
#35 Google API Console, oAuth Consent Screen
![#19 View Components](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5MywicHVyIjoiYmxvYl9pZCJ9fQ==--384bcb783e1a85f9f9fe72ee1ca0b6579fe9110a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
#19 View Components
![Friendly Show E7 October summary, Brovember plans](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTk0MiwicHVyIjoiYmxvYl9pZCJ9fQ==--5009eb8bb2f36496c48d30585ba7e231daaceaee/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)