Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Building Production-Grade Web Applications with Supabase

You're reading from   Building Production-Grade Web Applications with Supabase A comprehensive guide to database design, security, real-time data, storage, multi-tenancy, and more

Arrow left icon
Product type Paperback
Published in Aug 2024
Publisher Packt
ISBN-13 9781837630684
Length 534 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
David Lorenz David Lorenz
Author Profile Icon David Lorenz
David Lorenz
Arrow right icon
View More author details
Toc

Table of Contents (20) Chapters Close

Preface 1. Part 1:Creating the Foundations of the Ticket System App
2. Chapter 1: Unveiling the Inner Workings of Supabase and Introducing the Book’s Project FREE CHAPTER 3. Chapter 2: Setting Up Supabase with Next.js 4. Chapter 3: Creating the Ticket Management Pages, Layout, and Components 5. Part 2: Adding Multi-Tenancy and Learning RLS
6. Chapter 4: Adding Authentication and Application Protection 7. Chapter 5: Crafting Multi-Tenancy through Database and App Design 8. Chapter 6: Enforcing Tenant Permissions with RLS and Handling Tenant Domains 9. Chapter 7: Adding Tenant-Based Signups, including Google Login 10. Part 3: Managing Tickets and Interactions
11. Chapter 8: Implementing Dynamic Ticket Management 12. Chapter 9: Creating a User List with RPCs and Setting Ticket Assignees 13. Chapter 10: Enhancing Interactivity with Realtime Comments 14. Chapter 11: Adding, Securing, and Serving File Uploads with Supabase Storage 15. Part 4: Diving Deeper into Security and Advanced Features
16. Chapter 12: Avoiding Unwanted Data Manipulation and Undisclosed Exposures 17. Chapter 13: Adding Supabase Superpowers and Reviewing Production Hardening Tips 18. Index 19. Other Books You May Enjoy

Enhancing the navigation component

We are nearly done with the UI, which will allow us to add our first real functionality with Supabase in the next chapter. However, there’s one thing that’s annoying – the navigation items don’t visually reflect the active route. They look slightly highlighted when you click them, but this is only because the item has focus after being clicked. When you click anywhere else on the page, the item loses focus and its visual highlight; we want the active navigation item to stay highlighted.

In Pico.css, you can make a link stand out by giving it the contrast class and role="button". We can use this to mark an active route in a navigation item as active. Hence, you need to adapt your app/tickets/Nav.js file slightly.

To be able to check which link is active, we will import the usePathname() from next/navigation, which will tell us the active pathname of the URL. This only works in client components, so we need...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image