Tailwind on Rails #177 Responsive Collapsible Sidebar
30/06/2024
Free
Let's add a button to minimise (collapse) the sidebar.
When the sidebar is minimised, only link icons (not labels) are visible.
We will also save the sidebar state across requests.
Based on this blogpost:
https://blog.corsego.com/tailwind-collapsible-sidebar
Episode source code:
https://github.com/corsego/138-tailwind-layout/commit/280d649360359de1c346741d130d7cd49c9745d2
0
Sign in to join the conversation
Current playlist
![#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)
+5
Tailwind on Rails
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!
#1
#138 Responsive Layout with Sidebar and Navbar
16:57
#2
#139 Advanced Navbar Dropdown Menu
18:15
#3
#140 Click outside to close Menu with Stimulus-Use
02:07
#4
#141 Responsive Content layout: Grid, Flex, Centered
15:00
#5
#142 Modals with HTML dialog element, Tailwind and Stimulus
13:10
#6
#168 Mobile footer navigation
06:32
#7
#170 Maintainable Buttons CSS
16:08
#8
Tailwind on Rails #177 Responsive Collapsible Sidebar
00:00