‫Next up, let's build our application's header
‫which will contain the username and an avatar
‫and also a small menu.
‫So let's come here to our header component.
‫And so this is where right now we have the logout component
‫but here we will now, as I just mentioned,
‫have that username and avatar and a small menu.
‫And let's start with that menu.
‫And let's, for that, create a new file.
‫So a new component called HeaderMenu.
‫And let's make this an unordered list
‫and let's actually use a styled component for that.
‫So let's call it StyledHeaderMenu, not Meader.
‫And then we use styled.unordered list.
‫And so this will just be a flex container
‫with a gap of 0.4 rem.
‫And that's actually it.
‫And then here we will have a couple of list item elements.
‫And then here, one of the items of the menu
‫will actually be that logout component.
‫So this one right here.
‫And then we also want to have a button
‫that will lead the user to the page
‫where they can update their settings.
‫So that could also perfectly find via menu
‫but I just want to reuse that button icon component
‫that we already have.
‫So here, let's use OutlineUser like this.
‫And then as we click here, we need to then navigate.
‫So let's grab that function.
‫And so where we want to go
‫is let's actually see in our routes.
‫So yeah, we have this one here,
‫which is the account route.
‫And so that's where we want to go
‫when the user clicks here on this button
‫with the user icon.
‫All right.
‫And if we think about this,
‫this actually looks very similar
‫to this logout component, right?
‫However, I think that in this case,
‫it's actually worth separating this into its own component
‫because it really has its own functionality
‫like getting this useLogout hook
‫and also it has even this loading spinner.
‫And on top of that,
‫logout itself is kind of a small feature in of itself,
‫and so then I think it deserves its own component,
‫while this one here is really just a simple button.
‫Then a bit later we will also have
‫the dark mode toggle here,
‫but for now, this is it.
‫And so let's include that here instead of logout.
‫So the HeaderMenu,
‫let's bring that in.
‫So import HeaderMenu from HeaderMenu.
‫So let's see what that looks like.
‫And so that actually looks pretty similar
‫to what we had before,
‫but now this leads indeed
‫to this update your account page.
‫Okay.
‫And next up, let's then create that user avatar.
‫And actually that component already exists
‫so let's just include that here.
‫And so as always, we need to import that here.
‫And features and authentication and user avatar.
‫Alright, so let's still leave that open.
‫And then we open up this component
‫that again is part of your starter files.
‫And so this doesn't return anything at this point
‫which is why we get that error there.
‫And so there we go.
‫Now this component here is actually another place
‫in which we need to get the current user.
‫And so then it's great
‫that we already created our custom hook for that.
‫So we can just get the user from useUser, right?
‫And here we don't even need the loading state
‫because we already know that if this page has loaded
‫that the user is already loaded as well.
‫Now here, let's lock that user to the console first.
‫Or maybe we don't need to
‫'cause we already have it in here.
‫So we can just inspect the user object here.
‫And so what we want is here this,
‫well, not the app metadata, but actually user metadata.
‫Now the problem with the currently logged in user
‫is that we created it right here on Supabase.
‫So here with this button,
‫and so therefore it doesn't have any metadata associated.
‫So there's no full name and there's also no avatar.
‫So this is maybe not the best one.
‫So let's log out here
‫and now we can just use this other
‫that we already have as well.
‫So that's test@test.com, I believe.
‫And yeah, that works.
‫And so let's see now
‫and indeed now we have the avatar
‫even though it is an empty string
‫and we have the name of the user, which is test user.
‫And so let's now retrieve these two from that object.
‫So the full name and the avatar,
‫we get it from user.user_metadata.
‫And so now here,
‫let's use all of that first with this styled component.
‫And then in there we use the avatar component
‫which as we can see up there is an image.
‫So here we use avatar,
‫but in this case it is just an empty string
‫and it will always be an empty string for new users.
‫And so by default,
‫we want to now display this image that we have here in data.
‫Or maybe I already placed it here.
‫Yeah, actually here it is already.
‫So this default user is what we want to display
‫if the avatar doesn't exist.
‫So default-user.jpg.
‫And then let's add an alt text as well.
‫So Avatar of, and then here just the fullName.
‫Okay, and then let's also add the name of the user itself.
‫So again, fullName.
‫And there it is.
‫Beautiful.
‫So we have our user's name and this default avatar.
‫All we need to do is to add some styling to the header
‫to place these side by side.
‫But this component here is finished.
‫And so here let's just add a bit of styling.
‫So let's make this a flex container
‫with a gap of 2.4 rem,
‫align the items to the center.
‫And then finally, let's justify everything to the end.
‫So justify-content: flex-end
‫and great.
‫So that looks a lot nicer.
‫And so at this point, this application
‫really starts to look like a real world application.
‫So we have all this beautiful styling
‫right here for our data.
‫We have this amazing looking navigation
‫or this main menu here on the left side.
‫And now we even have a small secondary menu up here.
‫So if we click here,
‫then again that takes us to the page
‫where the user can update the account.
‫So both the user's data
‫which is gonna be the name and the avatar and the password.
‫And so let's go implement these in the next video.