Intro to Styling Custom UIs with Tailwind Utility Classes

Scaffolding a Multi-Panel App Layout with Flexbox

Making Panels Scrollable with Flexbox

Customizing Tailwind’s Color Palette With Your Brand

Adding Custom Fonts to Tailwind

Building a Hoverable Server Selector With SVG

Transitioning Rounded Corners using the JIT Compiler

Conditionally Applying Classes Based on the Active URL

Building the Active Server Indicator using Group and Transform Utilities

Solving the Duplication Problem with Components

Building the Server Header using Arbitrary Values from the JIT Compiler

Styling the Channel List and Controlling Layout

Identifying Repeated Patterns while Dynamically Generating the Channel List

Styling the Active Channel Link with a New Dynamic URL Segment

Using a State Variable to Add Unread States to the Channel Nav

Building Collapsible Categories with Rotating Arrow Icons

Building the Channel Header with Flexbox Shrink and Truncating Text

Styling the Search Box Using the Forms Plugin

Using Components to Dynamically Generate the Channel's Messages

Dynamically Generating the Server and Channel Navs

Using Responsive Design to Hide the Desktop Navigation

Craft Scalable, Custom-Made Interfaces with Tailwind CSS

Learn how to use a simple variable to improve the readability of our code when styling more than two states. Add an unread indicator to the new inactive and unread state. Use the active prefix to style the channel links for the active CSS pseudostate.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-15-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-15-end)

https://app.egghead.io/api/v1/lessons/tailwind-using-a-state-variable-to-add-unread-states-to-the-channel-nav/subtitles

Instructor: [0:00] Now that we have the active and inactive states covered for our channel links, let's go ahead and take care of this third state, the unread state.

[0:09] We can see over in Discord, when you select a channel that has unread messages, the treatment is exactly the same as when we navigate to a channel with no unread messages. There really are just three distinct states here, inactive unread, inactive read, and then active.

[0:26] If we come over and pop open the data that's generating our sidebar here in our clone, we'll see I've added this unread property to some of the channels in this file. That's because this is really persistent state. It's shared across instances of Discord.

[0:44] If you were to open it on your phone, read it, and then visit it on the website, it would go away. This is really persistent state. It's going to be attached to the channel. That's how we're going to be able to determine whether a channel is unread or not.

[0:57] Currently, we're just using this inline tertiary statement to switch between the active and inactive treatment. Whenever I get above two states for any UI component, I like to put these in a separate variable, just to make it a little bit more clear.

[1:13] Let's define a new variable called state. If this channel is active, this will just be the string active. Otherwise, if the channel has an unread property, we'll call this state inactive unread. Otherwise, this is going to be inactive read.

[1:34] We can define a new variable called classes, and this is going to contain our classes for each state of our link. We'll use the states as the keys. The first one will be active, the second will be inactive unread, and the last will be inactive read.

[1:55] Let's come down and grab our active state here and put that in active. This string of classes corresponds to inactive and read because that's the treatment that we gave these based on when we were working on this in the last video.

[2:12] We'll come here, grab these, and put them in inactive read. Let's take a look at the treatment for unread channels in Discord. If we highlight one of these, we'll see that it's just a pure white treatment.

[2:30] If it's inactive, an unread channel also has the same hover treatment as the other channels. We'll just make this text white and we'll grab this hover treatment for the background. We don't need this class because we'll see that the text doesn't change when we hover it.

[2:49] Now that we have our classes and the current state in this state variable, we should just be able to come down here and replace this with classes for the current state. Check it out. Whenever we have an unread channel, we get this new treatment.

[3:06] Still have the hover treatment, and we still have the active treatment. That's pretty cool. If we look over at Discord, we'll see that unread channels also have this extra little indicator here. We can build it very similar to how we built the server indicator.

[3:22] Let's come over to our anchor tag and make this relative. We'll just drop a new absolute div right here. Let's give it a width of two, a height of two, a background of white, and we'll use left zero so that it hugs the left of the anchor tag. We see our little box.

[3:42] Just like before, we have two units of space of margin right here. We want this to hug the left side of the column right here. We can fix this with some negative margin left of two, and that should do the trick. Let's go ahead and make the right side rounded.

[4:00] Rounded, right, and we'll use full since it's a full circle. This looks a little bit wide. Let's change width two down to width one. Look at that. That's spot on. We only want to render these if the channel is actually unread. We'll wrap this in channel.unread, and only render this div if it is.

[4:26] Looks pretty good. Over in Discord, when we click on this, you'll actually see that the unread indicator disappears when the channel is active. Instead of just being channel unread right here, we really want to use our state and say, if it's inactive and unread.

[4:46] We can just replace this with state is equal to inactive, unread. Now we see this indicator only when the channel is not active. That's pretty cool. One detail we missed was the active state. When we hover channel and we click, we see the background gets a little bit brighter.

[5:07] Then we let go, and it gets even brighter. That is the active CSS pseudo-state. We used it when we built this little nudge over here on these indicators. We're going to be able to do the same thing here. Let's just bring up our inspector, find which element activates that pseudo-class. If we click active here, we see that we get that brighter background.

[5:36] If we take a look at this, we'll see it's at 24 percent opacity, and it's 4F5, which is that BG gray 550. We also see it works on an unread channel and a read channel. Once the channel's active, there is no additional styling for the active pseudo-state.

[5:59] We should just be able to come here and add it to both of these, active background gray 550 at 24 percent opacity. Now whenever we click, we should see that little bit of brightness. That looks great. One last thing. Let's get the hover state on these buttons here.

[6:19] We can see that the text brightens up a little bit whenever we hover a category group. We can come and find this div right here, hover it, and then find the H2. We'll see that the color here is DCD, which is gray 100.

[6:42] Over in our clone, let's come find the button that contains the category. We'll add Hover Text Gray 100. There we go. Over in Discord, you'll see that this hover state, and the button itself, is clickable all the way over here.

[7:04] I think our button is in line right now, which is what buttons default to. Let's just give it a width of four. That should take care of that. Our channel list has all the little interactive bits and the pseudo-state's covered. It looks really good.

[7:21] It's matching Discord quite nicely and we've still managed to do this without having to write any CSS ourselves.

Using a State Variable to Add Unread States to the Channel Nav

Share this video with your friends

Course

Craft Scalable, Custom-Made Interfaces with Tailwind CSS