Coding A Navbar in the Kanban Task Tracker

foreign [Music] welcome to another code With Me session working on our kanban tracker again and we're getting close to being done um I've got my figma file open here and I just need to figure out what's next uh last video if you didn't see I'll link up top we fixed our edit functionality so now everything is working as intended there where if we have a board and we make an edit to something if I make an edit without changing the Status here is my edit and if I do still have to change this so we'll do that real quick if I hit what should we edit task build UI for onboarding flow won't move it's still there my edit is there but if I make an edit here isn't here is another edit and if I change the status at that time and we switch to doing it will push to the bottom it'll push the end of the array for that doing column and that's the it's the process I want to see happen so I've got a number of things I've got this I need to do something with and I forget what it is so we'll look at the figma file new column I also have to do something with right now it's just adding a test column um I've got this down here which right now is just kind of floating around as I uh increase or decrease the window size and at a certain point it's going to overlap stuff so I haven't thought about that one yet but we need to fix it so I don't know I don't really know what I want to do yet we're going to uh actually I can keep that open we're gonna we're gonna look around and see what's next and see what calls me also as of this point on these code with me videos I really haven't done any editing whatsoever this is probably going to be the first time I do that because I want to think about stuff I want to and look around so I do have to do this still this board is empty create a new column to get started but I think I'm more interested in doing something a little more intricate so I I don't have the right setup here for my my nav bar actually right and my button isn't correct on the larger sizes so maybe we look at that uh you know let me let me jot some of these things down somewhere let's go to my main app file and let's just right up at the top here let's just do a quick to-do list uh we're gonna have the board is empty create new column which is in like the board list View think um we're gonna need to adjust the nav bar of our uh button spacing I don't know what that means and size text that larger screen right we've got that already what are the other things I really want to do here um I don't know that I'm gonna do this yet just because I just want to be done with this one um but I've got they've got different colors here for the different columns there's no explanation as far as I'm aware on this thing is what you know if we just repeat those three colors over and over again if there's more colors that are supposed to be there like I don't even you know if I've got four columns what's that fourth color going to be there's no examples in the figma file if I've got 10 columns what are those 10 colors going to be um I mean I have the freedom I guess to do what I want but I don't I don't know I just don't love the color coding thing in general here so I might forego it I might do it and it's just kind of we'll see we'll see how that goes oh of course our new column button right let's not forget about putting that in there new column button in board view right got that which the functionality already works I just need to create the basic which I just have to set up a little modal um my channel let's well I guess we'll make a note setup modal I think is what I need to do and let's keep scrolling through this and see what's here we've got this done we've got this done the add new task we've got some several videos on those as well um I do have a whole playlist on this whole project as well that if I remember I'll link as well we've got the edit task gotta do my okay save changes is what they want right so let's go write that down to edit modal button should say save changes add new board we've got and that's done and working edit board do I have an edit board function I guess I don't right I think that's one we're going to need to do in a board modal I'm pretty sure I already have delete this board as well as delete this task we'll check that let's I guess check that right now so this doesn't do anything actually I've got delete this task which my color coding isn't working so let's make a note to fix that um delete modal uh theme light dark I've got it set up I guess it's just or do I I think I have it set up we'll figure that out and a delete task is working I guess I don't have a delete board thing because I don't have the option but I know I programmed it out in the delete modal so we need a way for user to navigate to delete board which I think is that three button thing I think that's what that's going to be navigate to delete board modal free button menu or hamburger menu if you prefer maybe I wasn't as close to being done with this as I originally thought but I don't know some of these are going to be just quick adjustments to things I think right delete this board delete this task it's the same modal I have that set up already all right uh so I didn't see running through this the functionality let's check the second row here of stuff right uh this is just showing me some hover effects which I think I'm already fine on yeah okay here you go so the three button it has an edit board and delete board pop-up all right so uh three button menu let's just make this a three button menu edit delete board pop up let's continue on our way here we've done this edit and delete task pop-up and this whole thing oh I didn't do any sort of validation yet so that's another we'll do validation for all forms right I think I'm going to leave that to the very end ish I need to do that there's a delete this board button and I think that's the end of that and everything else is here just in different views so I'm not gonna navigate through again except for mobile view which I've got this stuff set up already and I do actually know from the last video I need to go back and I need to review my mobile sizing stuff in CSS um for my modals let's do uh review sizing for modals and mobile views cool that seems like a fairly comprehensive list of things we need to get done what do I what am I driven to I guess um I haven't really done much CSS stuff in a while so I guess I'm kind of jonesing for it let's let's do that I'm going to close all my files that are open here because this is a mess and I don't if I'm not working on something I don't want it open let's go back up to my so on tablet view actually this is going to be the same on every view right the button the size of the button changes and what's displayed in the button changes right it's this it's what I have right now this roundish ovulish button with a plus sign in it and when we hit our larger views then it becomes plus sign add new task right and it looks like from what I can see that plus sign is not the same as this plus sign and I'm pretty sure the thing I actually have there is an image how am I hand up like that let's go look first let's go to my navbar DOT TSX I may have just put that plus sign in there with CSS I don't really know my nav bar with some show menu stuff here's the button with the show add task right and you can see my button in this between the button tags I don't have anything there right so this this is just complete CSS for how I'm displaying that so in this I've got my ID of navbar when I set up my CSS I really like to use IDs to group things together like here's where my nav bar stuff starts and here's all the stuff within that nav bar right and then I've got some non-id labeled stuff and then I've got my theme toggle ID and all the stuff within theme toggle here's a media break and you can see I've got delete modal ID board view ID so like I don't know it just especially with the theme I use here this really stands out to me and just helps me look through my CSS stuff and also like my utility classes and and whatever other classes might be there and then my basic and mobile styling and everything I can do there and then we expand out right to your mobile First Development because then we scroll down and eventually we're going to hit unless I already missed it and the tablet styling and then we do what we do there the minimal adjustments just to make things bigger or whatever and then we go to desktop selling which here I haven't had to do anything in desktop styling yet everything in tablet has just carried over very nicely so let's do a couple things I guess the first thing we should do is adjust this nav bar so that we've got the spacing and all we're really trying to do here no matter what V we're in is we'll Flex this and we'll do like space between so that this what can I draw here so that this box of stuff and this box of stuff I have the space between them adjust automatically right depending on where we're at um for right because here you see now this just kind of expands itself but it's still let's call it this box of stuff and this box of stuff and here's the space between them that we want to be automatic or controlled by a flexbox right and then we look at the same thing up top and here is this box of stuff and this box of stuff and the space between them which I shouldn't need to do any sort of break points here right I should be able to set this up in Mobile and oops and have it carry over come on give me the line there we go and have that carry over through all the different views here so let's um let's review what my code is doing here so this is my whole navbar where is the end of this div es down to here this whole thing is my nav bar where I've got my little logo right here I've got my this is a button it's not active um in larger views I believe I have click events disabled on this thing by CSS in in larger views until we shrink down into more of a mobile format and then this becomes active so that's not a JavaScript thing that's a CSS thing JavaScript shows that menu controls the display of that menu um the divisible select visit set visible of the select board thing and initial menu here with that click right then we've got the button for adding the task and the Burger menu so my problem here is that I did not set these up in the boxes that they need to be right this is just right now one giant box of stuff in the nav bar and to kind of further explain what I mean by that if I don't mind my developer tools and I use this little what is this called select an element in page to inspect I don't know it's like a hover thing right and you can hover over all your stuff and you can see that this is an overlay this whole menu is an overlay um based on how it's positioned but you can see the entire lock of this nav bar that I have and each of these elements is its own little block right but the market finds in there but I wanna I wanna separate this out and this out so that nav bars already flexed but if I do space between right now it's going to space everything out right so where let's go back let's find that bar there's nav bar and I'm already flexing it right display Flex let's see if we do justify content space between and you're going to see that stuff kick out right because there's no there's no containment here and this is going all all sorts of wonky here and it's even cutting off the uh the three button menu that's going out into space somewhere and I can't even see it all right so I think something else I might need to do here depending on how this works out for us is I might need to adjust the way this nav bar is being displayed I've got this menu here and I've got margin next to this nav bar and next to this whole thing that orange section is margin right that's pushing us out and then when I Collapse that nav bar that margin goes away and then everything is just against the side here right so and now I can see that button again right but if I'm scrolling I'm not scrolling the entire browser window I'm only scrolling this highlighted section here that's the only thing that has a scroll horizontal everything else is off so we're probably gonna have to do a couple things with this nav bar to make it really work out the way we want it to work out but step one is going to be let's put these things in boxes more divs right let's let's contain these things together so that as we drew this out we've got a box around the title of the element and and the button the plus sign button and the three dot button also I'm also not handling this right it looks like that only displays on the smaller views so we're going to have to adjust that too yeah because here it's gone right so maybe we go ahead and do that first do I have a class name I have a class name is mobile logo here all right and then CSS here's my nav bar here's my navbar mobile logo now let me just go up to the tablet view we're down to the tablet view let me find my nav bar I have navbar and board view stuff here because I'm got some combined things here but I'm in navbar so let's throw this back in here and we can just do uh display none that right now that just disappeared for us but I am going to have to I think nope it's fine that was enough for that as we expand out we see that that button where that logo goes away we come back to our smaller views it pops back for us awesome and now let's box those things right I don't know if it's going to mess up any of my other CSS but let's take a look I don't know that I need to call this anything right now but let's do this it's going to be the logo and the button needs to be contained in a div and we don't see the difference right because oh you know what it looks like yeah there we go um we're gonna have to we're gonna have to make these Flex right we're gonna see that on both both parts here now let's do another div here around the show task button and the burger menu button and that's gonna stack for us as well it's a little weird but there you go that's that and I guess we can call these I don't know because they're gonna have the maybe the same stuff between them um I'll call it nav internet box I guess I don't know let's see if I can get away with calling these the same thing and now let's go back up to make sure I'm in you know I'm in my mobile menu here and find my nav bar again navbar navbar dark never logo never menus right let's see I could just throw it right here there's nav bar and then my last name of inner nav box and these are going to be display of flex right and we see right now that just shifted immediately on both of these what is the the spacing here on things so it looks like zoom in on this one here and this spacing and this spacing look very similar to me uh can I actually see what they are we've got 16 pixels and 16 pixels that's fantastic makes my life really easy because now I'm going to get rid of console for a minute because now we look at this mobile view the only thing I need to do here is put a gap in there and of 16 pixels and boom we've got our spacing and it also looks like right now here at least with no with no menu and no margin that it's working out um with our our spacing being set automatically in between these things right and that's almost done let's see how we look now see as soon as I push this over that's the end of my screen over there and I can't scroll right so what do we want to do well my margin here is 261 pixels you could see on this little I can't hover over it but that little pop-up that's showing up here now um we've got 261 pixels of margin let's bring that over uh which basically means that my width of this nav bar is 261 pixels off of the screen right going that way going this way over here and I need to compensate for that so I've got some stuff set up already not in the mobile section because in the mobile section we can't have this menu but I have some stuff already set up for tablet menu when we can start opening this side menu and let's go see what I did here right I've got this this data attribute that I created on both the nav bar and the board View that basically say when sidebar is hidden here's what my margin is and here's a transition and when a sidebar is showing here's what my margin is and that's and that's what I'm getting that's how I'm doing this slide out thing for the most part so it's actually showing the sidebar itself too right that's doing some some with stuff um but that's collapsing and this this margin is adjusting so when the sidebar is showing here I guess what I really want is I want this space in between or something over here to be maybe negative pixels right I can do that I think let's play around with it right now in my mobile setup I've got we just did Justified content space between right I've got a width here right of 100 but if I were to do like Min width if we do ALK 100 percent minus 261 pixels right now we just see our our little other section here just kind of slid back into view so that's what I'm going to want to do then to compensate for how much real estate this navbar has on the actual display port right to determine what what space between these two blocks means right so I'm not going to adjust this section but I'm going to copy this and let's undo that because this is still at mobile view going to be 100 right and if I go back down to my tablet view where this stuff starts and if I look at these with the sidebar it in and data sidebar hit and that stuff right I know my navbar is going to need some different settings now than my board view does but this margin left and margin left these two pixel settings are the same so I'll just add another one of these we'll do it up top here why not and let me do this right and this is going to be for specifically for navbar when the data is hidden right when that sidebar is hidden then my Min width is a calc value of 100 minus 261 pixels actually not hidden show when it's on show there we go so now in that show we see that it comes back in here if I hide the sidebar now this stays exactly where it is right because when this doesn't when this data isn't show when it's hidden this won't be calculated and it should just default back to the Min width of 100 that was in our mobile view and I mean this looks like it's it's working out for us it's sliding the right stuff over if I bring this down to mobile view there we go I've got the right or a smaller view under tablet view my break point it's it's uh doing its thing I've got transitions on stuff so it's sliding around a little bit but I kind of like that um it's a little laggy because of my screen my screen recording here but um it's a little bit nicer than things just kind of snapping right to position you know as that kind of slides out as we move things over here uh but yeah that that worked out very easily right so now we've got we've got our space between we've got navbar controls the amount of padding that's going on here on both ends and we look good nice and easy just navbar button spacing done easy uh and navbar size text at larger screen so this is just the button we were talking about right so we need to change this to say plus add new task so how do I want to go about this let's look at what I've already got going in my CSS I'm wearing my tablet view so I want to get out of there right and I want to make sure I'm back at my top section with my nav bar stuff all right so we're back at navbar in my mobile view for CSS what do I call that button it has a class name of just add just add not very good but that's what I called it so here's navbar.add and you can see here it's got background color of my primary which is this purple the inside color is the the 100 neutral which is a white my width and height are set to find my border radius is there no border I've got a background image that's how that's being displayed in there right background size no repeat etc etc so I've got some options here and I think I might just make this easy on myself and control this just with CSS you know you could do some crazy JavaScript stuff and you could do like a set of variable for your for your viewport width and do ternary operators and have a display and etc etc but I I you could have two different buttons if you really wanted to um and display one or the other and I I don't think that's that's worth any of the effort here you know one of the areas that I'm a little bit weaker at that I admittedly need to go back and really check out our screen reader uh uh stuff with screen readers and accessibility so that's all my list of things to cover and maybe we do a video series about that as well I don't think that's often covered but let's uh let's make this easy for for today and just do this with CSS so we're gonna go and we're just gonna take our we know our navbar stuff is in here we have a background image but we're gonna what our goal is gonna be is when we hit our tablet size we're just gonna change the size of the button right I've got I got a size here this is tablet size what does this look like 192.62 by 5 oh no 164 by 48 that's what that is right and if we go up to the desktop view from 190 164.48 if we look here 16448 so that doesn't change right so if we do our navbar DOT add I'm gonna go down to our tablet View here's our navbar stuff I'm going to throw this right here navbar.add I don't need to change anything here with the colors and our width and height are going to change the 164 by 48 164 48 if we save that we should see an immediate adjustment that's that's a lot bigger that's accurate I guess so huh it looks like the border radius is going to have to change right this is a lot more oval around it and what we've got here and it doesn't I don't I don't see it here oops let's see I see 24. see this is the benefit of subscribing to front and Mentor you get your figma files and doing this kind of stuff is a lot nicer so this is a 24 pixel border radius and boom we've got those nicer rounded edges still no border but I don't need to change that so now my background image stuff is still here right but I I want to do background image let's just get rid of it like I can just do none and get rid of this stuff and now that just goes away for us right so I could do before and after and I could just do content so we can do navbar dot uh navbar dot add with a pseudo class of uh I guess let's do after um and let's do content and we'll just do that for now all right let's put let's put some test in there test right there we go that's showing up right in the middle already so you know what I could honestly just do uh what is What is the plus add new task right we could do plus add new task and uh is that good enough for me here you know I don't have a hover effect on this that's the thing I gotta do I guess which is a little bit weird because I thought I had hover effects on my buttons but we'll go back but hey that's there add new task cool I uh I like this one I think we've we've gotten that figured out are my hover effects just broken on everything it looks like something broke my hover effects on the purple buttons but I don't exactly know why yet button primary hover oh I wonder if so I've got hover effects listed on my utility classes for my buttons what is this button in the nav bar uh it doesn't even have anything on there right so I guess I maybe I did some of this before I made my utility classes maybe a little bit of out of order and this is just background color stuff right so this is this is button primary my color in there is neutral my background colors is 400 so if I just take my button primary class and if I just add that in here uh it's not gonna let me do oh nope I do have I'm sorry I do have a class it's just down here we've got ad of course I just did it and button primary so now if I go back and let's go back to my ADD class because I think I can get rid of some of the stuff that's in there now right here's my ad I don't need colors in there anymore but I do want the rest of this stuff and now when I've got my hover effect now it's back lovely same thing over here let's go look at my sidebar real quick as we also know this is going to be button primary so my sidebar is there with the logo and then I've got this board list right so we have to go into the board list which is here in my navbar folder I'm mapping through the names of the boards here and I'm returning a button for each each name in that list right now the class name is active if visible matches whatever the name is every time I click this right my own click set visible to whatever the name is going each name or mapping each name so the name is platform launch if I click this then and visible is set to platform launch so if visible is equal to the name of that particular button then it's active otherwise I just have it as undefined um and I guess I guess I need to just change this because I can't make this button primary oops otherwise undo please otherwise this is going to be because these are all going to look purple so I just need to make sure that active as a hover state so let's find active here we go button active right which I guess technically I could make this a utility class as well but um just for the sake of doing a quick fix here and do button active and then we'll add the hover State here and I don't know offhand what number this is I want to guess and say 300 no 200 it's not working at all so an important flag there and make sure something happens it's not happening let's look at what the look at what this is showing for us is inside bar board list button is active does it have something to do with my dark mode it doesn't button class is active what if I just get rid of oh wait actually there we go I had an extra pulling in there didn't I so we can get rid of this and we can bring back our uh color primary I think uh 300 is the one we want and I guess the important flag there was necessary for some reason I'll have to debug this a little bit more but right now now that's working out if I hover over that it gives me the nice lighter color and all my other hover effects are still working right and this is because this is floating around a lot but we'll fix that eventually see now it has the right spacing and there we go and the add new test button works so that was a fun little little fix on the nav bar uh we'll tackle this again in the next video we'll make this button work and we'll throw in all the logic uh to start making those adjustments to the boards so thanks for joining and we'll see you again next time

Channel: EricWinkDev

Views: 83

Keywords: javascript, typescript, react, codewithme, code with me, kanban, task tracker, how to, learn to code, how to code, programming

Id: a1GWL3hFjao

Length: 37min 1sec (2221 seconds)

Published: Thu Dec 29 2022