Live Code: Settings page (UI Design Daily)

Hey, hey, hey. [music] Come here. [music] Heat. Don't let We got the My face baby face. crazy. Hey Hello. Hello. Hope you're doing okay today. Uh let me know how music and stuff like that is. It's been a bit since I've streamed uh or done a whole lot u on the channel. It's been busy and I think I mentioned this a couple months ago, but just not totally sure where to take it. I think I've got a little bit more clarity now. Um but uh one thing at a time. So yeah, I hope you're doing okay today. Uh we're going to get started here. Um, I'm just getting a couple things set up. Uh, it's going to be like a slow live old school uh just coding. Uh, so I hope that works well for you. Um, the [music] intention here is just to I don't know, get a little time to actually code. Uh, I haven't had a ton of that recently and so I don't know, sometimes you know how they say you need to touch grass. I'm just like I kind of just need to touch some code and do something here. So, um, that's what we're going to do. Um, so hopefully that uh works for you, too. All right. Uh, I think I got everything basically set up. Um, so let me go ahead and switch stuff over. Also get my camera turned on, I suppose. And we will try to see if we can make everything work here. Okay, cool. All right. Uh, hey everyone. Uh, good to see you. Um it's early morning on Friday for me. Hopefully you're having a good day wherever you're at so far. I'd love to know who's here and where you're at. Uh it's been a bit like I mentioned already. So, um yeah, it' be good to see some old friends back. And today we are coding out this notification page. Um let me get stuff open here on my end. Okay, we're going to try this uh mirror magnet thing again. Sometimes it freezes on me recently and I don't know know why uh with my new setup. I've never really been able to get it to work. So, all right. Hopefully, this works. Um, we'll see how long it lasts. But, uh, this notification settings panel is what we're going to be working on. And, uh, let me just switch over in case I'm missing any chats. Hey, welcome. Um, all right, cool. But, uh, yeah. So, this notification settings panel, I just like I don't know. I feel like coding something that's just fairly basic and just kind of get to play with UI and chat with people. Um, yeah, like I said, I haven't had a ton of chance to code recently and even though this is just UI work, I don't know, I want to do something. Uh, so that's what we're going to do today. Uh, I've done nothing so far except for scaffold up a project uh to get it uh up and running. So, we're using Asteroids. We're just going to use VanillaJS, I think. So, it's not like it's going to be anything super intense. Let's see. Where's my Figma? I thought I had Figma some here. Yeah. Okay, let's pull this around. Okay, cool. All right, so we'll switch back and forth between this. I don't know that I really care like how perfect all this stuff is. And I'm guessing I don't know if this is part of the settings panel. Maybe it is. Um, but we'll at least start with this section. And I suppose we could even like go really intense and like store images somewhere and all, but I just I don't I just want to do basic UI stuff today. So, uh, hopefully that works for you. All right. Uh, well, let's get started just by thinking through kind of the stuff we want or need. Um, so I'm going to do that first. So, let's copy this over. Um, if it'll let me. There we go. Um, and I just want to freeze this whole thing right here so that we can draw on it and do whatever we want. So, uh, let's grab this little pen tool. And there's a couple things I know we're going to need. Obviously, we've got these. Oh, that's not what I wanted to do. Um, let's grab this. So, I know we're going to need the um this component here. So, I'm just kind of scaffolding out components right now. Let's see. Can I grab this? Okay. My head is in the way. [laughter] Okay. So, we're just kind of scaffolding out these components right now. So, I know I'm going to need this thing. And it looks like I'm guessing this is the same component. Obviously, one toggled on, one toggled off. Uh, we're going to need this little checkbox component. We're going to need a button component as well. That should looks like it has two different states at least. Uh even if we do this, it would be the same. Uh other than that, I don't know that we need a whole lot of anything. Looks like we've got some similar spacing uh things going on here. So, we could have like a little stack component if we want. Um looks like this is actually maybe a third iteration of this component right here. Um so, one, two, three. Maybe this could also be its own little like nav component. So maybe this could be a button component. These could be nav components where we've got the active state uh right here. Uh so hopefully that works. I think that should work. Okay. Let me know if uh audio or stuff isn't okay. By the way, I'm assuming it's fine unless I hear otherwise. And my guess is it'll be a small crowd since I haven't been streaming a lot recently, but uh or doing much of anything recently. But uh yeah, let me know if I'm missing something. Okay, I think that's basically it. Might maybe I guess we'd have some kind of like uh um whatever component. This would be like a what do we call this? Heading component. Uh we got a couple of those. One, two, probably three here. Uh for just different sizes. I think that's about all I'm going to need to start with. So we got one. That's all one. And for some reason, I did three boxes. Two, three, four, uh, five. So, yeah, five components. Um, so why don't we start there with just getting some basic text, um, some colors in, stuff like that. So, if I come over here and select the whole thing, I should see the selected colors and be able to grab what I need. Uh, so I've got this dark color. I would let them know what this is. It's just black. Okay, cool. Um, so it looks like some of their components aren't super consistent or like the way they selected colors, which is fine. We've got another white here. Another black here. This is all this is, right? Oh, no. No. It's slightly different. Okay. So, let's set up some of this stuff. Um, we could use Tailwind, but I think let's just stick to vanilla while we're at it. So, uh, I've just got this up and running with bun, like a local bun server here. And let's start, um, just inside here. Let's have a new style. and we'll do like global.css and we're going to just have some basic declarations here to start with. Uh so let's start with the most basic. Uh let's just grab everything if I can type. Come on. Uh let's use the after. Let's grab the before. I don't mind using like some AI stuff here just because this is going to be really basic. But then we'll turn it off because I kind of want to actually play with it. It's going to kill me that there's an update button, but my OCD is just going to have to deal with it. Uh, the other thing I probably want to do is initialize biome. So, let's do that just since I've got that already here. So, uh, let's see. Bun add biomejs. I don't remember what it is. So, let's check it out. Biomejs. See, I was never going to remember that. All right. So, [laughter] uh, let's come down here. Get rid of that. Drop this in. All right. Come on. All right. Biome. I don't remember exactly how to do the initialization, but I have a custom one anyhow for Astro that I use. Biome.js that I think is like biome. Yeah, there we go. And this is supposed to be JSON. [snorts] Okay, I think that should work now. And then if we want we can have um some kind of like uh lint fix. Sure that works. Okay. So let's run that just to make sure. Uh button run lint fix. Okay. Cool. So something's working. Uh all right. Uh so back in this global file, let's now declare a root. And inside this route, I just want to set up some variables we're going to use. So we're going to use some color variables. We're going to have dark. Uh, actually, let's just say like foreground. Does that work? Yeah, that's fine. Um, so for now, that's fine. We can just use these. Uh, background is white. Uh, let's see what I can do. There is like a Figma MCP server that I don't think is that great um for this kind of stuff. At least the last time I tested it, just took forever to do anything of value. So, I don't really want that. So, we're going to use just [music] classic typing like cave people. Um, so we'll say accent and drop that in there. What else do we need? Um, my face is really getting in the way. Uh, let's take dark purple. Uh, so we'll say like muted color. Color muted. Uh maybe all the rest of these are just variations on those. [gasps] We got light purple we using this somewhere. That's not really light purple, is it? Maybe that's that like real light muted. So we'll say like foreground muted maybe. And then I think all the rest of those are variations. So um actually this is black and I think there is still a foreground. because it was that other color. So, we'll get to that. Um, so let's drop this down and then we'll say background muted. And here we're going to paste this in. Uh, the design looks dinoish. Interesting. What makes you say that? GC sweep. Hey. Hey, Dante. Welcome back. Good to see you. Friday streams are on currently. I just had to get a break from work and actually code. [laughter] So, um, so that's what we're doing. All right, I drop this in here. Okay, so I think that's mostly where we'll be. We can alter these some if we need to, but at least let's start with that. All right. Uh, let me also look at some typography. I'm guessing this is like um Merryweather and Poppins. All right. So, we've got Merryweather Black for all these, maybe Poppins bold, Poppins regular. Okay, so we got just Merryweather Black and Poppins regular. So, let's go ahead and use uh the Astro Fonts. Uh so, let's close this down. Let me jump up here and we'll look for fonts. Even though I just did a video on this, I don't have it memorized because that's how it works. Um Oh, yeah. So, we're going to grab this. Um, okay, cool. So, let's open up the Astro Config and I'm going to drop this thing in here. Come on. Can we not paste things anymore? Not a thing we do. [laughter] What's going on? What in the world? Okay. All right. Let's try this again. Font provider. There we go. All right. Um don't know what's going on there. Okay. So, we're gonna use this uh I want to use the Google uh provider. Gotta remember how this works now. It's like you set this kind of stuff up, you do videos on it so you can understand it, but unless you do it a lot, you just forget immediately. Where's that video I did on Google Fonts? Um font providers Google. Wasn't there like an actual setting I can grab here? Oh, Chris. It's okay. We're going to use them. Okay, here we go. Fonts. All right. So, here's what we need. Except I want Poppins. And we're going to use probably like 500 and 700 would be my guess. Um, styles norm maybe talic. I don't know if we'll need that. Um, and then let's also pull in Merryweather. And here we'll just pull in like the 900. I think something like that. Okay, I think I got both these. So this needs to be a call like that I think. Um goodness f providers provider this is not going to fonts config. Uh Chris using custom fonts. Oh, this just needs to be wrapped. Okay, I think we've got that. Um wait, what is this? What is Get out of here, AI. You're not helping me at all. All right. [gasps] Uh, so we have a font array with a provider. Um, then this should be the name. Okay. So, we're going to use the name here um of I guess we'll use Poppins. And then we've got the CSS variable. Okay. Font Poppins. There we go. And then what else do I need? This is for a local font. So I was looking at the fonts provider API. No wonder I got so confused. Okay, this is all we're doing. Let me just copy this back in and we'll just replace this here. Should have stuck with the actual Let's see. Poppins. Pull this down. The same thing. This will be Merryweather and Merryweather and 900. That's fine since that's what we wanted to start with. I don't know if I will need itallic, but let's go ahead and add this in here. Boy, did I complicate that. All right. Uh, so we're going to have like font family. Um, we'll call this this will be our v our I'm just going to reference these directly. There's no reason to over complicate this. Uh, so let's go font family and we're going to look at our var of uh popins and let's see if this actually works like it's supposed to. Well, turns out you have to start your dev server. So, let's do that first and then see if this works. All right, I think I saw somebody comment somewhere. Uh, I gotten used to having the font files in the project. I don't even bother with the modules anymore. Uh, nice. All right. Probably have to hook this up as well. So, let's do that. Let's go to our index page over here. We'll import um styles global CSS. All right, we got that at least coming in. It looks like this is not though. Goodness, Chris, what am I doing wrong? Let's do background color of black just to see if this thing actually comes through. Okay, so that's working. So, the issue is somehow this font declaration. So, let's figure out what I'm doing wrong. I didn't even bring in the funk about it. Chris, [laughter] you guys want to restart the stream? Let's restart. Let's restart the stream. Um, let's pull this in here. Then I need to pull in this component. Um, and then we pass in um Poppins. Okay. And now this should work. Okay, cool. We got something working. Uh, we also need to pull in uh Merryweather as well. So, we can do that. Uh, so we can use it where we need to. Okay, I think we got that semi- settled. Um, what is it we're doing now? Uh, so let's set up some of these components. So, let me start with uh this basic heading component. So I think we've got three basic sizes and iterations. And I guess these would probably correspond right now at least to like H1, H2, H3. So let's go ahead and create a folders directory, our components directory. and we'll call this like heading.astro. Um, and here we're going to pull in like uh you can pull in Let me kill this. Where? Where is this thing? Stop. How do I stop the autocomplete on this snooze? All right, let's take this for 10 minutes, 50 minutes, just to kind of see where we're at, and that will give us a good reminder of where we're at. Okay, hopefully that works and we're zoomed in. Okay. Um, okay. Dashboards in Dino look like that except the accent color. Cool. I didn't know that. Um, what do I do? Uh, we're going to pull in a tag here. And this will be astro.props. And then we'll just pull in whatever else we pass in. So, the rest. And then um I need to have a tag here that we set to our tag that we pull in so that I can dynamically set this tag. Just that's how HTML works. Um and then let's go ahead and uh have our slot here so we can put whatever we want inside here. So here we're going to have the rest that pulls in. This thing will stay out of my way. Um the other thing I'll want is some kind of size component which I'll set on this class. Um, so we can use the class list where we'll have like a heading component or default. It doesn't really matter what we call this thing because it's just going to be local. Um, if I can type would be great though. Uh, and then we'll also pass in a size which will be a certain class. So, uh, this size as well and then the rest. Um, so as far as uh the props, we're going to set this to tag. It can be uh let's just do like H1. Yeah, that works. Um H2 uh or H3. And then we'll have the size here be I don't know, large. How about that? We'll do medium. and small. Okay, I think that should work. Uh, the size comes in. We pull this in, write an array. I think these things should come in this way. This should be an array this. And then we can pass in the size. All right. Um, so let's have a style tag down here where we set the uh default class for all these. And here I just want the line height to be like 1.1. We could set these as variables as well, but I think they should work. Um, text wrap. I always do this on these would be uh balance and that way uh like headers, headings or whatever uh are wrapped as balanced as possible. Uh, anything else I want here? Uh, I guess font family probably need to set this. It would be um get out of here var of Merryweather. So, we're using that. I think that's it. And then we'll have the large size. And here we'll have font size. I don't really know what these are supposed to be. So, we can check this out in a second, but let's copy this down a couple of times. And this will be our medium. And this will be our small. Okay, cool. Uh let's check the size these things are supposed to be uh on the one I can actually look at. So uh let's see. 32. So that is two two rem 24 1.5 and 20. Actually, I don't know what those are. So let's just do uh 24 pixels and 20 pixels. Okay, I think that should work. And so I should be able to pass this component in. Uh, so let's do that now. So if I move over here, we open back up our index. Um, let's have like this navbar section. Uh, maybe let's just start here, though. Um, ah, let's do it. So, we're going to pull in a navbar component. So, let's write that nav.astro. And here we'll have a nav. Uh, where we'll have this. I guess this is our H1 for the page. So, let's pull in a heading component like that. And it needs a tag, which is going to be H1. And it needs size. See if I can see what I'm doing here. Which is going to be uh large. And then we'll pass in settings. All right. Let's see if that worked. And if we're back on track, maybe. Let's try uh to actually pull that in, though. Where's my index? All right, cool. Settings is pulled in. Everything may even be working. We might be doing things. Let's change this to like small. See if that works. Hey, we're doing things. Okay, so we at least got something in there uh working properly for the headings. All right, so that's component one. Uh so we're going to call that one good. Um so we don't need to do that anymore. Let's get rid of these. All right. Uh, next one. Let's do the button for now. Um, down here. So, we got two basic sizes. Let me Or two basic types varieties. Uh, we could probably type that one more, too. But I think it's fine. Um, see 10 pixel radius. Anything else you need to know? 15 to 30. All right. So, let's come back over here. Let's create a new component. Let's do some blind building here. So without looking at what we're doing like we did a second ago, we're going to do the same thing. Uh we're here we've got a button component. And I think these all function, these would both be actual buttons, uh not like links to or something. So we don't need to make this multi- faceted. Um we'll have a slot inside here where we can drop the text or anything else we need. Um and then what do I have here? Uh, I guess we've got like variety or whatever type variant. I think this is often called from Astro.props. And usually I'd use like uh class variance authority or something. Uh, but let's keep it simple here. Um, so we'll props type props equals. We'll have variant variant. Variant. I think that's how you spell things. Um, and we'll have primary Come on, help me out. Uh, secondary. All right. And then let's have a class list. Why not? Where we have different options here. We'll have uh like the default button class, I guess. And then I I don't really need classes I guess on this because I've got the button component here. Um which means I should be able to just pass in a class. H let's do class list. So I can have uh dynamic things that [music] doesn't I'm not in Tailwind. Forgive me while I talk to myself early in the morning. Um let's [laughter] go [gasps] uh with whatever the variant is that's been passed in here. I'll figure this out. Variant like that. Okay. So now down here we're going to have style tag where we have a button declaration. And here since they're kind of they share a lot of the same characteristics um let's um just build some of these things out. So padding I think we had 30 pixels um and 15 pixels. I think 15 was up and down. I think that should work. Uh what else do we have? Um font size I think would just be the default. Anything else I need to really pay attention to? I don't think so. Um, one thing I I like to do is set up these like um local variables. So, we just do like background and underscore for me like means it's a local variable. I think I stole that from someone Kevin Powell maybe. Um, so let's just start with uh some of those background colors. So, we're going to have like the primary here um be the default. That makes sense to me. So we'll have var of color foreground I think this thing was and then we'll have uh color be var color of background. Now uh to get these variables pulled in here I'm using some extension that I don't remember that pulls those in from my uh file so I can see those there which is really nice. Okay so I think that works. Um, so what we're going to do then is have an active state. Um, sorry. We're going to do like this. We're going to have a focus state. Yeah, I think that works. All right. Or do outline color be transparent. And then uh focus visible. And here we'll probably need to set up some more variables as well. So let's these are all colors. So, let's now have some like transitions. So, we'll have slow 200 milliseconds. Uh, fast. Actually, that was supposed to be 200 milliseconds. Uh, so we'll have this be like 600, something like that. And 300 doesn't really matter. And then, uh, I want like a uh, ease or like spring or elastic. I don't know that it matters. Um, but let's use the easing wizard, which I like to use. Hey everyone. Uh, source of the challenge is in the description. At least it should be. Glad people still like these things. I do want I just need to code something. My brain is so rusty with code. Uh, as anyone who's been here so far has seen, but um, all right. So, let's use that. So, what we're going to do is say transition, and I want it to be on um I guess we'll do the background color at least um of our transition fast. Yeah, let's do that. Um and then we'll use that elastic that. And then let's copy this same thing if I can get my fingers working. Um, and we'll do the same thing for the box shadow because I'd like to put a box shadow on this except we'll use the slow version. Here we're just kind of hand coding some stuff today. Um, I just feel the need to touch some code. Um, sizing shadow here. We'll do like three pixels solid. What am I doing? um shadow. This isn't a border. 0 0. We'll do like two pixels. And then we'll use a var of our background color. Um so this will be kind of the ring. In fact, what I probably want this to be. Yeah. No matter what it is, it needs to be this because even if it's different, I still want the ring to be the same. So all right, then [snorts] we'll have 0 0. And let's do something like six pixels. We might have to change this, but var of foreground. Okay, so I think that should work just fine. Um, I've also got a hover state. um, and here I guess let's also scale We'll also have a scale kind of behavior on this as well. So, let's set scale What do I want this to be? Scale is fine there. But I think I do want a scale on the active state. So, for hover, we're just going to maybe let's just set the opacity. So, I'll probably also need to add that like um bar fast slow. Yeah, that's fine. And then we'll do our elastic. We may need to change some of these around too, some of these elastic things once we actually see it in practice. Um, and then there'll be an active state here as well where we just change the the scale point 0.98 something like that. Let's see what happens with that. All right. And I think we also need opacity here. What was this? I was thinking about the transition. [laughter] All right, so we're still not quite firing on all cylinders, but we'll get there. Uh, we got the button here. Let's come back and let's come into the nav. Uh, actually, let's go into the main the index here. And we'll have like the panel, the main panel, whatever we're going to call that, the notification panel. Maybe that'll just be in this page. But uh so for now, let's pull in the button component if it wants to nope. Nope. Come on. All right. So, we got this button component and we'll take the default as the primary. So, click me. Um, and then we'll work on the variant as well. Let's see. Get out of here. Uh, so let's come back over to the button and make that optional. And then set this as uh primary. All right, that did not work at all. Awesome. Um, uh, button. Why is this not being applied? I don't know. What did I do wrong? Did I ever set the background color on the entire thing? Goodness, Chris. H Chris. Uh var. See, blind coding is great till you do that and then you're like, maybe I'll never try that again. Color. All right. Um, we also had a round a border radius. um, I think that's all we need to reset there. Okay. Uh, border radius of 15 pixels, I think, is what it was, or 10 pixels, something like that. All right, let's try now. There we go. Look at that. Okay. And we'll do cursor pointer just because I'm used to that. Um, I know there's debates about everything. All right. So, that could have been better this whole foreground thing. So, let's see. What did I mess up here? So, focus visible should be there. I'm not seeing that ring show up. You got the nice little clickiness to it. Um, is it possible that it's this elastic thing that's throwing it off? I wouldn't think so. So when I tab to I should actually see a ring around that. What did I mess up? I don't know. Okay. Well, for now we're just going to leave that alone. Can you share your thought process for taking this project? How do you picture its structure regarding components? Uh we got some of that in the first part of the uh challenge. Um, so I probably won't go over that too much other than what you'll see here, which is I just broke this up into certain components. And now we're kind of building these out one at a time. So I think that's mostly All right, cool. So we got that one. Um, and then the only thing I want to change is when I'm not sure why this ring isn't showing out the way I want it to. Back shadow focus visible because the blur should be zero or all that should be zero. I don't know like that is not showing up. So let me know what I'm doing wrong there. Um I don't know. Uh so last thing is if uh it has let's see this class of secondary here then we're just going to swap the two items. [music] So, we'll just say that if it also has the class of secondary. So, this it would need to look like this. Then we switch these two, which I think that's right. Get out of here. Color is this. Background is that. And I think that works. Um, but looks like our autocomplete is back, which is the reminder that we've been going slower than I would have wished. So, like this. And I guess we do need a border. So, I guess I shouldn't have been so harsh to the AI overlords. So, we've got a border here. Like that. I think that works. All right, that's loosely how I'd set that up. Um, okay. So, let's do that. We'll do one pixel, which probably also just needs means that um they both need this honestly. And then yeah, because you just won't see it on the other one, which is fine, but I don't want one button being a pixel bigger than the other. So, let's use that. All right. So, we'll call that uh component done as well. Um, so this one is done. Let's now move to the checkbox. All right. The way I like to do these is um I like to kind of have a shadow component just because you don't have a lot of control over the actual checkbox component. Um, so that's what we'll plan to do. So, uh, let's grab this here and see what we got. 27 by 27. It's good to know. Five, uh, let's see. Uh, checkboxastro. Um, and here we'll have an input with the type checkbox. Um, and in fact, what we're going to do is have this in a wrapper. Um, so that's how I typically like to do it. And then we'll use the input like this parent here. Um so here we'll just call this like check or something. Um and here we'll have this be do we need a label? Yeah. So like that. Yeah. So these will be the same thing whatever they happen to be. Uh so we will have the user pass in and the user being myself will pass in like a label. um astro.props. All right. So, what we'll do is we'll take um the name here and the ID just so that these are the same thing. I don't know what we use these for necessarily, but we'll take the label.replace all. Um yeah, that's fine. this will just be the label. Okay, so we got all that. So basically we're going to pass this this in and do a very basic replacement. Um, obviously this probably wouldn't work in a real application, but just likeifying it basically and then have the actual label in here. So I think that should all work and that will be required. Um, so we'll take our props here. Maybe since I've struggled so much, we'll just do a lot of this uh autocomplete to speed us up a little bit. Label replace all checkbox. So, what else do we have? Um, make sure I'm not missing anybody. Okay, cool. I do a bad job of actually looking at um people's comments. Sorry. All right. So, then what I want is I want like uh this itself to be its own little inside of its own little check. So, I think this is what I'm going to do. We'll call this here checkbox. And then uh this doesn't really need a I guess we'll have this be like um uh flex small stack. How about that? And we'll use a global uh variable for that. Okay. So we've got this check status. Then what I want is an actual like box container or something. And this will be how we actually style it. So let's come inside here. And the first thing I want to do is actually add that flex stack. Um so let's come over here. We'll have some utils. It's fine. Flex stack direction column. No, I don't know why I called it a stack, but that should work. Uh, let's see what the distance is supposed to be here. 10. Um, five. It'll be a little bit bigger because it's got like a border around it. So, let's do like 08, something like that. And we'll call that good. Okay. So, we've got the flex stack already around that stuff. Uh, the label should be fine. I don't think I need to do anything special for that because it should just use the default styling. So, now it's just down to the check. So, this check itself I want to be position relative. Um, which I think we saw there. Um, and what I want is this uh type of checkbox to be position absolute. So, let's do that now. Get out of here. Okay, I might have to kill this thing. Uh position absolute. Uh and we want this thing to be opacity zero. No, no. Uh inset zero. All right. So it goes to the full parent size. So what we're doing is basically uh expanding this um using absolute positioning. And then I'm going to use this box status to reflect basically if this thing is checked or not. We'll do certain things to that. So, here I'm going to have this box inside of here like this. Um, and I think we had the width was what did we decide on this? 27. That's right. Um, 27 pixels. Height is 27 pixels. Border. So, we're going to start with whether it's checked or not. So, if it's not checked, we're going to have this be our muted, I think, is what that is. Um, but let's again use kind of that local variable. So, we'll have uh border here var. Let's use the muted color. And then here we're going to use our um border. Okay, cool. So uh by default it'll have this and by default its background color will be uh the background I think. So we'll use that and then border background color should work. Okay cool. So then what we'll do is we'll say if it's sibling um is checked. So if this check box is checked then we'll change the color of all that. So we'll say if this is checked then the box border color background. Okay, this is going to be close. Um this will be and so will this be accent. Okay, so both of those will be that way. Now the last thing to add is we're going to have a little check box in the middle of this or like check mark. Um so let's search for icons. Uh actually we got an icon. We don't have to search for it. So uh I'll come back over here. this thing lets me copy as SVG. All right. And let's paste this thing in Uh, white's fine. Yeah, that's fine. Um, and then we just need this thing to be position abs like in the center. So, we'll do display grid uh place items center. Okay, so I think that mostly works. Um, we probably also want some kind of focus state on that uh hover state, that kind of stuff as well. We already have this cursor pointer. So what we'll say is whenever the checkbox is focused. Yeah. So let's do this. Let's come down here. Um and we'll say like type checkbox focus just to kind of keep these things separate. Box shadow. So it's trying to copy the same thing which is good. But here we want accent. yeah. Yeah. So, it's a media box. That works. I think we'll have a border radius still. I didn't put that yet. I think that should work. Okay. Uh, last thing is let's do transition on here. See if it can pick up some of our stuff. we'll do box shadow bar slow. Let's see background color and border color. All right, I think that is more or less what we want. Okay, we probably also want some kind of hover state, I guess. Um, so let's also say here I guess we could just do the hover directly on here. So we could say like maybe we just like barely show this accent somehow. So probably the best thing would be to change this so I can actually dynamically set this. But uh for now we'll just have the background be what are my other options? Muted. Let's just do accent light and create a new one. So I'll come back over here. See if it gives me something halfway in the zone. That'll work. Okay. So I think that works. Let's now get something uh up there. Let me make sure I'm not missing anything. Yeah. So, I think that's should be dynamic enough for us. Let's see what we got. So, I'm going to pull this component in here. We'll have checkbox label enable notifications. okay. Yeah, there's my spring. Why is that not working the other time then? Okay. Okay, so that pretty much works. I think the only thing I need to do uh is come to my CSS on this stack and make sure we've got these things items uh align items center. Yeah, there we go. Look how springy and happy that looks. Now, why isn't this thing working? Uh what did I do differently? So, I think that's the same exact thing. Uh, Vox Shadow 2. It's the same thing, bro. [sighs and gasps] Uh, this button component. Get out of Focus. Focus. Visible. Oh. See Look how much happier I am now. Okay, cool. Uh, see box shadow Why isn't it bouncing? I don't know. Elastic. I don't know. Okay, we'll just call that good then. Okay. Uh, so I think I'm good with that component as well, which I think means we've got one left. Uh, if I did all my thinking correctly. Um, is that right? Two left. Okay. But this one's pretty similar. All right. So, we're going to do the same kind of thing here where we'll build the switch from um scratch. Uh, I've done this kind of thing before. See, we've got this nice little state here. So, there's some interesting stuff we can play around with here. Um, how much time do I have? I got a little bit of time still. Um, let me just check something. Okay, cool. Um, so we're going to start with this. We're going to make this thing so springy we won't even know what to do with ourselves. All right. 71 width, 41 height is what we'll grow for. Okay. So, we're going to call this thing a switch. Um, and let's just copy this over switch. Um, because I think basically this should be a standalone thing. I mean, how do I want this thing to be? Because I want the guess it won't really have a label. Maybe we could do like a screen reader only kind of thing, but I mean obviously these things are connected. So yeah, I guess let's just let's get rid of all this. Um um checkbox same basic thing. [snorts] Um so yeah, I should have kept it. That's why I wanted to use it. All right, so let's uh keep that there. we won't have this SVG. So, we can get rid of this. Um, but we will actually have um the same kind of idea here. So, let's get rid of this here. We can just call this a div because I think I can just use that directly. I don't really need this box. I guess we can call this thing circle, but I can just pull that SVG directly. Div, I don't need that label. Um, so here what we'll do, I think this label should just be like a screen reader only kind of thing. So let's have a class here. we'll have SR only. Yeah, I think that works. And then uh let's come over here and have SR only and just let it steal the stuff from Tailwind. Okay, cool. So, this won't show, but screw neuters. Hopefully, we'll be able to see what this thing is, which also means I do need to actually uh connect this to the other. Let's see if it can give me this. No. Okay. All right. Fine. So, we pull this in. Type checkbox. Uh label. Isn't there like a roll here of like switch? I think that's what I want this to be. all right. Last thing then will just be let's position this div the way we want. So let's see some of these things I don't really need that I will need. So we'll take this as our div. Um and we had like a width and a height on here. So we'll have to figure that out. Box. This is going to be the div. So let's steal this as well. uh up here. I think the rest of this maybe we steal some of this situation. Uh and hopefully can extrapolate the rest of this as we need it. [sighs] Yeah. Okay. So, let's steal this. Drop it up here. All right. So, we're going to have a border on here. Um so, that should work. border radius 100 vm max is how I prefer to write that. Um I think that should work. Cool. Um what else do we have? So this is going to be 71 by 41. Okay, we can do that. 71 41. Uh border radius is full around. Let's grab this switch and drop it somewhere so we can actually see it. So let's have a switch and the label will be sure something. All right, that'll work. Okay, cool. So we've actually got this thing kind of properly working even. Can I make this thing smaller? Yeah. And then I can make this thing bigger. Um, what am I doing? switch. Uh we're going to have our little circle thing here. Let's copy this as an SVG. Just going to drop this in directly. Uh what did we say? Just right here, right? I think so. Um and we'll give this thing a class of like circle. All right. So when circle oops circle for now I think what we'll do is just [snorts] that's fine. We'll do this position absolute. Position absolute. All right. Cool. And then we want it to be how far from the top? I forget this keyboard shortcut. Five. Okay. So, we'll do top five. Left five. All right. So, that should work. There it is. Why doesn't that look right? [laughter] that looks right. I don't know. All right. So, we'll do that. Um, and then whenever we check the checkbox, uh, so we'll do that. We'll translate it. Yeah, like that. Okay. So, I probably also want to put pointer events of none on here. And that way I can click through it and I click the checkbox. Okay. Now last thing would be whenever the type of checkbox is checked I want to actually cover the whole section. I usually now now I can actually do a has here. So I can just say when the div has a checkbox of checked which is nice. Um so I can say has input check. Look at this. Um, except that's not what I want. But yeah, uh, border background background here of our background. Okay, cool. So, we got that, too. All right. So, we've got back background border. I think that's all I need. All right. So, we're going to actually change the circle color based off that, too. So, where's my circle? Let's just set this to current color. And that way we can use the current color of the actual text here. So we'll say text or this isn't tailwind var of uh border. Okay, cool. So now when I switch this, it should actually swap over to that as well. Okay, so now all I need to do, this hover state is kind of weird, so we'll figure that out too. Um, foreground background muted. That's what I'm looking for. Let's do something like I actually like that. I think that's cool. Okay. Uh, so when it has an input of checked, everything basically goes to accent, right? background. What else do I have? Color. No. Yeah. Everything just [music] goes to that. Oh, not quite. What doesn't? The uh Okay. So, we actually do need different colors for this. So, uh we'll need this to be our circle color will be the muted to start with. Um and one is checked. Circle will be the background. Is that right? circle background. Okay, now I just need to set the circle to I guess we're just going to have to set it here directly. Or no, I just I already set it up top, right? So, we'll set this to circle. Okay, now let's make sure s circle background color. This should be changed. Why is this not changing? Turns out naming things. Okay, I think that's mostly there. Now, there's this little subtle uh I don't know if this is a hover state or not. I kind of feel like this should be a hover state. This little subtle thing. So, it's 10% of that, which is honestly what our uh madeup CSS thing should have been over here. So, let's do that. so let's steal this. We're going to drop in here. And because I don't know how to do that with hex off the top of my head, we'll do that. Okay. Accent color light. Let's make sure that that's working as we expect. I don't know if that's so subtle you can't see anything, but maybe that's what it's supposed to be. Okay. Uh, so let's lastly work on a focus state for that switch. come on. All right. So, focus state. We've got hover already. Um, let's now have focus. Oh, we could do focuser then. That works. Um, so here I kind of think what I should do is when it's focused. All right, here's what we're going to do. We're going to say when it's focused or when it's hovered, we're going to have on top of all the rest of that, we're going to have a box shadow. We'll have zero zero and then like I don't know how big that was. I want to say it was more like five pixels color accent light like that. That way when I come over here you can see it's so subtle. Goodness. See that? Kind of squishy though. Yeah. I think it's cool. [laughter] It's a little trippy with the other ones. So maybe this one here, the background, the border color. This can just be like ease ease in out. And we can make this fast, too. I know. Like I don't know. That just makes me happy. I don't know about you. Look at how happy he looks, you know? Okay. So, we're we're going to do the same thing uh when it's focused as well. All right. So, except I kind of feel like that's not intense enough like for a focus state. I don't know. Maybe let's just change the global variable and defy the world to something a little bit more. We can do that. All right. [snorts] All right. So, we're going to do the same thing uh here on focus within uh we pull in this box shadow. And that way when I focus on it. Yeah. See, look how happy that makes everyone. All right. So, the since we're now zoomed in on that too, let's look at the checkbox. Uh we're also going to change the border color here really fast. And then ease in and out. And I think we'll do the same on the background color. We'll do fast and then ease in out. Um just because it it's kind of trippy the way it that's not very fast. It's fine. Now, why isn't this thing Why? All right. I'm not settling for that. We're going to figure this out. Box shadow focus visible. We've got this box shadow showing up. Box shadow v slow. Why is this not doing the same thing? What am I messing up here? Slow ver elastic box shadow. Focus visible box shadow. It's offset. Why? Why is this having so many issues? What am I doing wrong here? Active secondary. Hover. Is this somehow getting in the way? No. Focus visible. What am I messing up? Um, hover box shadow right here on the focus visible of the actual button. That's what I want when the button is focused. Two pixels bar. And that looks identical. Okay. So, let's come back up here. Actually, I want this to be focused visible. I think transition box shadow of our should be on the same thing. I don't know. Tell me what I'm doing wrong. That looks the exact same to me. But it just refuses [laughter] to to do anything. Whatever. It's fine. All right. So now this one only shows up if I tap to [music] it, which is right. Okay. Um should have called this stream micro animations for no reason with Chris. But come on, right? You see it, right? It's fun. Wait, why is this enabled? Oh, it's cuz I named them both the same thing. Um I was like, why is that triggering it? Uh two. How about that? And now when I click on this, it only disables that one. Okay, cool. Uh I also would typically like these checkboxes, not to just continue to get crazy in the weeds, but on these labels here, um let's do text. Uh what is it? select or select user select none just cuz I'm like I don't want to be like trying to enable this and I'm like selecting the text. I I just feel like that's a bad experience. Maybe somebody with more UXUI knowledge can tell me I'm wrong Okay, cool. Um, last thing I guess we probably need to make sure our button actually inherits uh the font. That might be good. I don't know how I didn't see that yet. And then we probably also need to be able to pass down or have like have an ID as well so I can actually identify this thing and do something with it at some point. This would be the ID I get. ID. ID is a string. Ah, get out of here. Uh, is a string. Okay, I think that works. Okay. Um, not sure if I got so in the weeds there, but hopefully that was fun. All right. And this for the sake of not just uh doing this the whole time, let's actually get the page, I guess, up. So, let me do this. Let's come over We're going to have post downloaded. Copy all these. So, let's add those all in there to start with. All right. So, close all the stuff down. Open up the index. All right. Let's get rid of this for now. So, we have new follower. Why can I never remember the keyboard shortcut suddenly? There we go. Press like. Maybe I'm doing these in the wrong order. Post edit to collection label. Okay, something got messed up. Post like someone you followed. Post downloaded. Post like. Okay. All right. Something like that. Uh, post downloaded, post added to collection, someone you followed, post like, new follower. Okay, we got that. Website notifications. So, up top here, uh, let's pull in. Obviously, we'll have to structure some of this a little bit better, but, uh, we'll have a heading. Um this will be tag will be H3 and then size will also uh be small. These will all happen to correspond but still I think it's helpful to have website notifications sentence cased I think. Yeah. So I think what I I'm going to want to do is set all these inside of a stack um like this. which means I need to declare a stack over here. So, we're just going to have a stack display grid and then a gap. I don't know yet. So, let's see. Are these all How do I 10 20? Okay. So, we're going to have a stack large and a stack small. so, this this will be 10 pixels. And then this will be large. And here we'll have it be 20, I think, is what I saw. 20. Okay, cool. Uh, so let's do that. So over here we're going to have stack large. And then we'll separate all these off with stack uh small. All right, now we're talking. Okay. So, we got those set up. Um below here, we'll have um what? No. Stop. Stop. Okay. Uh below here, we'll have these buttons. Let's see how far away these are. Be really convenient if they were 20. It's 30. Awesome. Uh, so let's set this to large. We're going to have another stack uh stack um medium where we drop those. And then down here, we'll have a button uh with flex stack. All right. So, I need to come back over here. We're going to have uh this one will be 30. This one will be medium. Like that. And I think if I did that correctly, then we should be able to have our two buttons down here. Now we got save changes and we've got cancel. Um, so let's grab both of these. I'll have our button uh variant primary save uh changes and then cancel. See how that I think that's right. Yeah, cool. Uh, so we'll probably need to also have some flex stacks that are different sizes as well. Um, cuz these are how far apart? 14. Love that for myself. Uh, I'm going to do 15, not to be OCD. Um, but let's have our normal flex stack We'll have our flex stack medium since it's about where we're at. And we'll do 15 pixels here and line item center. And we'll make this flex stack small 08. I'm not sure why I have remmon and but it's fine. Um, so let's come back over here. We've got our checkbox flex stack we used somewhere here, I think. And we'll have these as small. I'm not sure why I've got a double dash there anyhow because that doesn't make any sense whatsoever according to any naming convention. Stack small is fine. Okay, so assuming we did all that correctly, uh I should be able to change the stack for the flex right here to be medium. And ironically, that wasn't even working anyhow because it was the wrong class. But okay, so those those are kind of stacked up now. Um, these work. That doesn't work. We don't know why. Hopefully somebody figured it out. What's the update thing your editor? Uh, that just means I need to update my editor. [laughter] Sorry, Dante. I It also is not my favorite, but it is what happened. Um, all right. So, let's also stack these things. Now, this will be interesting because we're just going to set this to a max width of like 5 600. How about that? Um, this is 18 away, which is just unacceptable. So, we're going to do the medium one instead. Um, so let's start here. yeah, that should work. Okay, so let's come back over here. So, we've got that kind of stack already. Now, we've got this next section. Uh, so the way we're going to think through the structure here is this will be a little stack. This will be like a flex container. And then these will be a large stack. Okay. Yeah, this is going to be perfect. All right. This is why we have stacks. So, we're going to have a static uh large um and then inside here we will have just a bold text, right? Um but we'll need to have some kind of identifier, but this will be a small stack. Um yeah, yeah, yeah, yeah. Um, so we'll have a stack medium uh where we'll have just like a strong tag um of whatever I copied a second ago. Weekly newsletter. Below here we'll have a paragraph tag that'll say that thing. Um, and then we're going to copy this down and do the same thing. I don't remember which one was up top. Weekly newsletter. Okay, so uh here we'll go inside here account name and then there we go. That could have gone better. I thought I copied that. Maybe I didn't. Small text. Oh, it's the same thing. Nice. All right. So, the other thing is because these are going to be like that, you know, flex container or whatever thing. I'll just call this like switch wrapper or something. Um, and then let's come over here and just have another utility class. I think it's fine. Um, switch wrapper. Oh, we'll have position. Uh, no. Display flex line items start actually. So, we're going to leave it like that. Gap one rim. Maybe it doesn't really matter. Um, justify between is justify justify content between justify between space between tail one mess me up. Um, and then max width will be 600 pixels and then we'll have a width of 100%. So, it tries to take up the available space. So, it should once I get that thing over here, uh, that should help us out. Okay. Now, that could have gone better cuz that doesn't seem right at all. Uh, well, let's throw our switch in there. So, we've got the stack. This whole thing is the switch wrapper. This thing is the stack. stack medium like that. Okay. Same thing All right. I think that works. And then inside the switch rappers, we'll have this thing here. Switch um and then this will be like weekly newsletter. Uh sign up for or enable or something like that. Annable weekly newsletter. Uh, and then we'll pull this down here. And maybe this thing will help us. Account summary. Enable newsletter or notification email. It doesn't really matter because it's not going to be visible. Okay, cool. So, now we have these little sections here. Look at how happy they look. Um, I'm a little weirded out about how big of this spacing is. So, someone want to tell me what's going on here. Medium. I thought, let's see. Is this supposed to be that much? Let's just make him smaller. That seems It just seems kind of weird. Oh, no. Yeah. Okay. Um, so let's just switch these up to be small. That's better. Okay. Uh now the whole thing uh obviously needs some spacing here. So what is this going to be? 60. So we just make that that's 50 for some odd reason. That's 40. I feel like at this point we're just making up numbers. Um so I don't know if we are cool with that or not, but I guess we have to be. Uh so we'll have an extra large of 40. We'll have a xx large a 50. This feels like we just need more consistency. Uh we'll have a 3XL. [music] Let's make this 2XL and this will be of 60. All right, I think this should work. Um something I think I'm going to also probably want on this button, I don't know why I'm thinking about this just now, is just like a max width fit content. That way it doesn't get smooshed if it's in a um flex cont or a grid container. Although it probably won't because it's got that padding. Anyhow, um that should work. Okay, so let's wrap all this mess. Um I mean maybe we could componentize this a little bit more, but I think it's fine. So we'll have this section here. All this here be inside of a stack three three XL. And then this will be in a stack of 2 XL. I think that's mostly right. There you go. We need to add the rest of the things for it to all work, but I think that's we're getting in the right direction. Uh, account summary. That looks right. That looks right. Changes. Okay. Uh, let's see. We got the email notifications will be the next one. So, let's add that. So, we'll steal this. This will be up top here. Stack large. We already have that. So, this will be inside of an Excel. and then that was supposed to help me, but it didn't really help me. All right, we're going to go three. We'll go small. And I don't remember what this was, but it's on my clipboard. Email notifications. All right, so that should work. Cool. Cool. Cool. Um, what else do we have? I think that's it for all that. And then a notifications at the top, which is somehow misaligned with here, which I'm just going to choose to ignore that. No, I'm not. I'm move it over. So, uh, so let's add that here. Uh, we'll have notifications. It's going to be my medium and a heading, too. Turns out this thing wants me to spell stuff correctly. Okay. So, I think that all works. Cool. All right. Uh, so now it's just down to having the sidebar component and then we'll call it a day. So, we've got I guess we never made these components either. Um, I don't know. These should probably be this probably should be a nav, a secondary nav, honestly, the way like semantically the way this is structured. So, this nav over here, we're going to give this Um, why don't we just call this like sidebar nav and then over here pull it in s bar nav. Okay, because we also have the top nav. Not that we're really using that, but um this will have an area label as bar navigation. The reason for that is when you're using stuff like screen readers, you want to know like, oh, I'm in the secondary nav instead of the primary nav. You can also see it actually. Uh, we should probably add some stuff to it. Oh, I guess we have it up there. Um, but if you look at the accessibility tree here, and hopefully you'll see some of the reason why we did some of the things we did. So, here you see we got for instance, oh, I should hide that image. uh the Arya uh the switch here the image uh like the circle thing um because that's not super useful. Uh same thing with this SVG for the checkbox. So I should also change that. We can see how like these are focusable. this switch like even though it doesn't I'd love to tie those together somehow, but yeah. Uh, but you kind of know what this thing is, like that you're focusing on it and what it does if you're just using a screen reader. So, hopefully that makes sense. But, okay, let's go to our SVGs now that I'm somehow back in the weeds of that. Um, and let's add our uh hidden uh is true to both of those and we'll see the difference here. And then label checkbox switch the other one. Uh, and we'll do the same thing here. All right. Right. So now if I come over here and we look at this, we should not see those images anymore because they're not like crucial obviously. They're just visual ads. You just need to know if it's checked or not, not if it has an image inside of it. Okay, cool. Um, so what were we doing? [laughter] We were working on this uh thing. No audio. Oh, really? Did my audio drop? Um, somebody's saying there's no audio. So, please let me know if that's the case. so from what I can see there's audio, but maybe there's not. I'm really hoping it's just your your situation you got. Let's go. Um, audio is okay. Okay. So maybe it's just that you're muted. Play again. I'm not sure. Tickbox cyber nav. Okay. So what I want is we're going to loop through a bunch of items. So why don't we see what we need. public profile, account settings, notifications, and pro account. So, here we'll have an array. sure, whatever. All right. And then let me paste these in. Pro account, public profile. Why is this thing not copying all my stuff when I ask it to? Notifications, account settings, public profile. Let's see if I can remember those. Uh, notifications. Account settings. This was up here. This was here. This is uh account settings. Notification. Public profile. I think notifications, pro account. Also, like just either sentence case stuff or don't. But like these are not sentence case and then this one is sentence cased and not a fan of that. So let's just do pro account like that. Um none of these matter. So let's set all these to nothing. Um and you can make this a separate component, but I'm just going to do it all inside here. So we can loop over some stuff. Okay. Um, so on top of calling the cypar nav, we could also just set this as whatever our um 40. So I think that's our extra large stack of extra large maybe. Um, we've got settings and then what we'll just do is have a well that's fine. Let's see how far away are these. These are 15 which is our medium I think. Um, which somehow I knew. So cool. Href nav length. That's fine. That's fine. So what we're going to do is have a style here where we have our ul list none. It's fine. It should already be at padding zero because of our reset. style padding zero. That should all be the same. This should be fine. Yeah, I think that should work. Let's just make sure it's actually showing. Okay, it is. Cool. Uh, so we've now got our nav link item. Oops. So, let's do that in here as well. Actually, let's steal that from the button just directly. I'm going to grab all this and we'll obviously switch this around, but um, we're going to call this nav blank. Okay. Um, so that could have gone better. Let's go font in here. That's fine. Um, these are all links, so it should already do that. So, let's just replace this with uh uh text decoration of none. All right. Um, now what we have is to set these up. So, it looks like I don't love how Okay, so these are aligned, which means they have no real padding on them side to side, which is fine, I suppose. It just it's a little weird the way then you have to like show a focus state. Um, or offset the whole like row, which is a little weird. So, I don't know exactly how I want to handle that, but um let's just have no side padding for Uh the background, the border. Do they have any whatsoever? Let me pull this up here so I can see here. Can we zoom in here? That's not helping me. Open image in a new tab. Okay. So, looks like we've got no border whatsoever to start with or background. I guess the background could be uh the color background and then this is just going to be transparent background. I'm not sure what color means. Oh, no. That's the text. That's the same no matter what. So, use a border here. Oh, no. We do. We have a background Yeah, yeah, yeah, yeah. Border and this will be transparent if I can type. Okay, so background will be background, max fit, content, it's all fine. Color will be our color. We don't even have that. I we'll just use the default. Border is going to be uh whatever the border is. Border radius, we're going to do 100 vmax. Uh padding we already figured out is LA non border blah blah blah blah blah. Okay. Um so if it's active uh we want to add uh let's see area current. That's literally what we want. Um, if like this will be hard because basically we'll just say like if the href I don't want this cuz it's item.href equals like whatever the source of the page is basically is what we're looking at. Um, so what I'm asking is like does this current page have this? Um, so I'm just going to do like this maybe. Usually you check to see like is the current URL like the same as the href, but in this case I'm just going to do this. Um, and so that way only the one should have some kind of setting on there. Okay, cool. Uh, I guess I do need to set a text color because it's a link now, which I didn't think about. Okay, cool. And then this one should have our own custom settings for it. So, let's set those up. So, not secondary, but we're looking at um it has an audio page current. then it should be different. So what we'd want is this background to be muted just on that one right item.href href only this one should have that then this should be area current page nav link let's just double check I'm inside the nav link active should be right okay the background color is background ground in here. We should be have background muted. Let's just change it to foreground. Okay, so it is working. It's just too subtle, some might say. If I can't even see it right here. Um Oh, you know what? It's cuz I have no padding side to side. Okay, I am very slightly seeing that. I keep my screen slightly darker when I stream so that it's not like blaring on my face from that side. Um but it makes it a little hard to see stuff sometimes. So I I guess I can't see that. Um, so this is the weird part because now we've got this kind of like issue where when it's active, we want to have like a box shadow on it as well. Um, yeah. So, I guess I'll just say like if it's active here or not active, if it's I guess if it Yeah. If it has this, we'll have a box shadow um of 0 0 0. here's the weird thing. I can't really go up and down. So I I guess I just have to have like an after element or something, which I mean I guess we can do is that Yeah. content block. What is this? So, this will be a little weird, but I think Oh, nice. It gave me a dot. Cool, dude. Um, I don't want that. So, let's do this. So let's do uh top is zero, bottom is zero, left will be like negative uh 15 pixels. I don't remember what that would have been. Um and then right will be 15 pixels. That could have gone better. Um this area current page needs to be position of relative. Okay, cool. Um, now let's do use the muted and then we'll do Zindex Why is this thing okay? So then I think I need a Z-index here or I can use isolation I guess. But did I do that right? Goodness Chris. Okay. So there we go. So that is what I want. We're just going to do rounded like that. Okay. So, it's going to kind of look like it. That's the whole idea here. Um, background muted. And hopefully you can see that. I feel like it's just too light for me to see. So, I'm going to um bump this bad boy up. Where where is it at? Oh, there it is. There you go. That's a little funky. Um, and I don't think that's what it's even supposed to be, but uh I think that Let's go back to the actual switch. Get rid of that checkbox. Get rid of that. Nav. Okay. How high is this thing? It's probably because it's got a line height, too. Padding is 15, though. Oh, what am I trying to do? This little after element. I just don't understand why it's not. It must be the text height. Something like that. I don't know. Um, so we'll go one pixel, I guess, and just kind of get rid. There was like a weird little thing going on there. Okay, so that's the active one. It needs a border as well, so we can do that. Um, border foreground, which is going to be below the box shadow. That's just trippy and weird. So, I don't really need a border. I guess I'm going to have to add on this thing. Like, I guess I could add a box shadow. This is getting weird. But just to keep it aligned because like this the whole I want it to be aligned with this, right? But also to be able to expand. So, I don't know. There's probably an easier way to think about that, but I guess we'll just have a box shadow. All right. So, that's loosely what we got going on there. Obviously, not perfect. Um, maybe this is supposed to be muted. Um, but I'm more interested in like the whole situation we got going. So, what we're going to do is change some of this stuff. So, let's do this on hover state. We don't need to go opacity. Let's just say if it's Arya. Yeah, we'll just use like is if it's AR current or um if it's hover. Is that right? Am I doing that right? Yeah. don't love that experience. So, I I mean, ideally this thing like almost follows you around like once you get in here, but then that's a whole situation I didn't ask for. Nobody asked for that. Hey, Arthur. Low and clear voice. Nice. Um, all right. So, I think we're loosely kind of in the zone of what we want it to be. Um, I think I want to This looks like too big. okay. Look at all this happy stuff we did, though. All right. I think I'm going to mostly call that good. Um, we should probably, I guess, at least get it set up the right way. So, it's supposed to be like this. There's like a line, I guess. Um, so let's pull this thing up. We've got sidebar nav and that. So this whole section I guess we should wrap in a main. Drop this back in here. I think that should work. And this should be a main tag, not a class of main. I don't know what I was doing there. guess we'll just drop a style tag directly in here. Uh, grab the main display flex. That's loosely what we want. Um, let's see. flex wrap wrap wrap if it needs to. Um some kind of gap on there two ram. Um how we want to handle this as far as that line. I don't know that really matters. Just do line items flex dart. Cool. All right. Um, let's also grab the body. I guess it's some right here. Display grid padding to RAM or something. Uh, place items center. and height 100 SVH. Oh, it's cuz I have this on. So, it's semi in the middle. There we go. Can't really change those. And then like there's like this weird offset thing. Like these aren't even aligned. Right. Yeah. I can't handle that emotionally. Um, [laughter] so I don't know. We'll just do like form or something. Call it a day. Now, probably what I'd want is like on mobile, make this um nav section, sidebar nav, like the entire sidebar nav, which doesn't have a name, but I can just steal this class, I guess, here locally. We just say like I have an after which I guess I can do right here. Um cut down height blah blah. Let's see. This is the right way to do this. Maybe I should just do border. Make this easier. Border right one pixel solid color Then you got the padding to worry about. Uh making this thing more work than it needs to be. I'm not totally sure like because of the weird way it's set up how I would do that, but you mean um where did I mess that thing up? It was all fine until align items. There we go. Okay, cool. Well, I think we'll call that a good I mean because these things aren't lined up properly like I don't know exactly probably these need these things need to be flex children like notification needs to be flexed with public profile and this is kind of sitting above it is probably the right way to do that and then you can have some kind of like line in the middle but I don't know we've done enough little dinky stuff I don't want to do that right now so uh hopefully that was interesting um to somebody and uh yeah I got to get going but Um, yeah. I hope you enjoyed that. Let me move everything over. Looks like my music stopped just in time. Um, but yeah, hope you have a good day. Um, thanks for following along, those of you who did. It's a lot slower than I remember to, uh, code stuff by hand, but I like messing around with like those little UI things and just making some of those experiences better. And, uh, there's a lot more we could do, too, to expand upon that. But, all right. Anyhow, cheers. Have a nice day. I'll see you next time. I do