Build A Website with Astro, TailwindCSS and React (#3 - Mobile Header)
In this video of the Build A Website with Astro, TailwindCSS and React series, you'll learn how to add a moblie header to your website, with the help of TaliwindCSS classes, HeadlessUI and Astro client directive.
💻🚀 GitHub Repository: https://github.com/webdevfuel/asteroid
00:00 Hide desktop menu on small screen sizes
03:23 Create mobile header component
05:24 Set the mobile header component open state
05:59 Add the button with hamburger icon to open menu
08:47 Add the menu content div (dialog component)
12:42 Add the button with x mark to close menu
15:50 Add mobile menu title
17:05 Add mobile menu items
20:01 Hide mobile menu on largo screen sizes
