# #138 Responsive Layout with Sidebar and Navbar

- URL: https://superails.com/posts/tailwind-on-rails-138-responsive-layout-with-sidebar-and-navbar
- Published: 2023-08-08
- Duration: 16:57
- Access: free
- Playlists: Tailwind on Rails

"Tailwind CSS: It looks awful, and it works." - Adam Wathan, TailwindCSS creator

As of Rails 7, you can automatically install TailwindCSS when generating a new rails app by running rails new -c=tailwind -d=postgresql. 

I am super excited that just like me, Adam will be also speaking on Rails World!

In this mini-series I will cover the main aspects of using TailwindCSS when building a Rails app.

When you create a new Rails app, FIRST OF ALL you want to figure out navigation (navbar, sidebar, footer) and UI responsiveness (make it work on all screen sizes).

Let’s build a responsive layout with a sidebar that is replaced by a dropdown on a small screen.

Episode source code: https://github.com/corsego/138-tailwind-layout/commit/45240dcc6e819919eb53a1a82350c1b3230dad91
Based on this blogpost: https://blog.corsego.com/tailwindcss-layout

0:00 Intro
1:15 Demo of Responsive Layout
1:50 Create Rails app with TailwindCSS by default
3:40 Build sticky Navbar and Sidebar
11:40 Responsive layout, hide Sidebar on small screen
14:10 Add dropdown icon on small screen
16:00 It works!

## Chapters

- 0:00 Intro
- 1:15 Demo of Responsive Layout
- 1:50 Create Rails app with TailwindCSS by default
- 3:40 Build sticky Navbar and Sidebar
- 11:40 Responsive layout, hide Sidebar on small screen
- 14:10 Add dropdown icon on small screen
- 16:00 It works!