In this episode, we're focusing on building out the navigation for our Vue app. Starting with some basic layout tweaks, we add padding and centering using Tailwind to make things look a bit cleaner and more responsive. We also make sure the navigation component sits right at the top, ensuring it stays consistent across all our pages.
Next, we pull in some pre-styled navigation markup (which you can grab from the course resources on GitHub), and set up responsive behavior. On smaller screens, the nav turns into a mobile menu, and we use Vue's ref
feature to toggle the menu open or closed when buttons are clicked. Pretty quickly, we get the mobile menu fully interactive, so your navigation works great on any device.
We spend some time linking up the navigation to our routes using router-link
, showing how to name your routes and connect them easily in Vue Router. This makes moving between pages like Home and Dashboard super smooth, both on desktop and mobile navs.
Finally, we tidy up the navigation state by using our authentication composable. That way, logged-in users see their name and a logout button, while logged-out users get a login (and optional register) link. Everything's nicely dynamic and fully hooked up!
By the end, the navigation is complete and responsive, handling user state and page links. Next up: making the login page look awesome!