When it comes to creating UIs, I think I can speak for most frontend developers when I say the following:

Smartphones made our jobs harder.

Because of them, the design of websites had to change to allow users to use them on smaller screens and other devices than a standard computer. Or outright creating mobile applications in place of the actual website.

I am an unapologetic Tailwind CSS evangelist. It does not solve all issues, but certainly does make for less of a headache when trying to remember how you styled a particular component.

And as I am the happiest of Tailwindcss evangelists, I look forward to the day when our lord, Adam Wathan finally just gives us the universal Navbar component that works on all devices, magically loading the moment TailwindCSS is installed. Until that day comes, we need to build our own.

I wanted to build a responsive navbar that had a slick, smooth drawer slide out, without relying on any particular JavaScript framework. I went googling, and found this nice example which was the basis of today’s project: https://tailwindflex.com/@eamon-carter/animated-drawer

Now, this was not just a copy-paste job, but I wanted to credit where I found the solution to my problem. Two simple functions, an aggravated hour of where the drawer actually needed to go in the html, and some elbow grease later, we got ourselves a responsive navbar.

You can see it here: https://jebersole13.github.io/navbarforallseasons/

And feel free to look at and fork the repository here: https://github.com/jebersole13/navbarforallseasons

Now, why am I referencing Cheers in this whole thing? It is just a responsive navbar.

Simply, it is a shame that we lost George Wendt this year. Cheers was on TV for over 11 years, and many of us still remember it just being on in the background of our lives. Though I look nothing like Norm, I can relate to the sensibility and outlook he brought with him.

I will end with the message I left hardcoded on the example page.

George Wendt was a rare talent and a national treasure.

I was building a simple navbar and thinking of giving the example project some personality.

I could only think if I had met Norm and told him what I was doing “Creating a mobile-first navbar” he would probably say “Does it have beer-first navigation?”

I feel this crass yet well natured type of humor is something we could all use a little more of.

May you in rest in peace, Mr. Wendt.

We’ll keep a stool open for you.

If you read this far, thanks for reading.

See you next Monday.

Jon