Refactor MobileNav to use headlessui

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

https://tailwind-nextjs-starter-blog.vercel.app/

MIT License

8.64k stars 2.01k forks source link

Refactor MobileNav to use headlessui #943

Closed trillium closed 3 months ago

trillium commented 3 months ago

`Enhancement`

Current mobile drawer doesn't take advantage of accessibility offered by headlessui

Used headlessui/Dialog as an example to refactor the MobileNav drawer

Changes

Move close button to bottom of drawer HTML so it is not auto selected when entering MobileNav
Kept current MobileNav styling
Changed to Dialog as base component
- Allows for tab press to stay within Dialog
- Allows for esc press to close Dialog

Visuals

Before Changes

After Changes

vercel[bot] commented 3 months ago

@Spiteless is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwind-nextjs-starter-blog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2024 8:23am

timlrx commented 3 months ago

Resolved merge conflict by adding some of the changes from the previous PR. Otherwise the changes looks good to me. Now that we are using headlessui for the theme switch component, I think this change makes sense and the accessibility improvement is great.