Conditionally Applying Classes Based on the Active URL
Tailwind has no built-in APIs for conditionally applying styles. Instead, it encourages you to embrace whatever framework you're already using to conditionally add or remove utilities for different states of your application.
We can do this in our Next.js application by creating a second URL and page, and refactoring our server navigation to persist across every page of our app. Now we can use the useRouter hook from Next.js to determine which URL is active and use that to apply different styles to our navigation links.
The code for this lesson is divided into two sections, with this you can see the progress on the code.
Instructor: [0:00] Our server link is looking good, but we'll notice over in Discord, these links have two states. One when they're inactive, and we see the hover treatment, and then again, when they're active, this active indicator goes full height, and we don't have the hover effects anymore.
[0:18] To get started on these details, we need to add another server icon to our clone. Let's start by copying our Discord link. We'll put in s1 for server1 like this. We can see, right now, it has the same treatment as our first one. Now, we want to make these links to actual pages. For that, we'll need a new page for server1 here.
[0:45] Let's come over and create a new page, servers1.js. For now, we'll export this simple paragraph tag. To link to this page from our server NAV here, we can come back to our home page.
[1:02] Go ahead and import link from next link, wrap our new div inside of a link with an href of /servers/1, and then turn this div into an <a> tag. With any luck, we should be able to click this and see our new page.
[1:22] If we pop open the address bar, we can see here the URL has changed. Now the problem is, we've lost our persistent server navigation here. We actually want to hoist some of our code here to our route app component, so that it can serve as layout code.
[1:39] Let's grab this route div along with our server selector. Copy that and then over in _app, we can find the page component right here. Paste in our layout code with another closing div. Let's go ahead and move our page component inside of the layout.
[2:02] Now we see we need to grab our Discord item. Let's come back to our index. Copy our icon. Let's also come and grab the link import and paste that up here. We can see our layout here is being rendered twice.
[2:24] That means over in our home page, we actually don't need any of this layout code and our route div doesn't need to be this flex high screen anymore. We can just go ahead and delete that, remove the link, and remove this Discord icon.
[2:39] Now our app looks good again, and if we click this link, we actually see our page here inside of the layout.
[2:47] Let's finish up by turning our first button here into a link to the home page and we'll just repeat the same process. Wrap this in a link. Give it an href of /, and turn this div into an <a> tag. Now both links work.
[3:05] This means that we're ready to use the current URL to conditionally apply styles to each one of these server links in our NAV. To try this out, let's come back to our app, import the useRouter hook from next router. We'll go ahead and get the router right here.
[3:24] Then we'll come down to our anchor tag, turn this class name into an expression, and change these quotes to backticks so that we can use dynamic variables for our class name here. If we embed an expression and we check whether the router.path name is equal to /.
[3:47] Well, that means we're on home page. We'll apply these classes. Otherwise, we'll apply these classes. We can move our Hover classes here, which we only want to apply in the inactive state to this second block.
[4:03] We also want this text grey 100, and this background grey 700, and this rounded class as well. We've moved the particular parts of our treatment for the inactive state to the second half of this ternary expression.
[4:24] With any luck, when we're on servers one, we see our original treatment, but when we click the home link, all that goes away. Now we can actually just apply the actual active treatment based on what's in Discord.
[4:39] That's basically going to be these three classes that we're using with the Hover prefix in the inactive state. We want rounded 2XL, background bland, and text white. Save that, come back to our clone. Now we have the inactive state and then the active state.
[5:00] This is really starting to feel much more like an app.