OK, so in this video and the next few videos after this, we're going to be working on our authentication.
So the first step that we need to take is we need to create a header for our page that will allow us
to have a couple of buttons.
So we'll have an image of Instagram and a couple of buttons for logging and sign up.
OK, so in this video, we're just going to create the the header, but in the next video, we will
start to implement the actual functionality.
So first thing we need to do in apogee is down below where we have our return.
First of all, we're going to create a div that will encompass the whole app.
So I'm going to create a div with a class name of app.
OK and put everything inside sight, the stiff.
All right.
So I have my dear now inside here, I'm going to have another div that is going to be for the app header,
so I'm going to have Div with a class name equals app underscore header.
OK.
And inside here, we will have a few things, so first of all, we will have an image.
That has a class name of.
App underscore header image.
OK, now we will have a source that will fill out in a second and then all that is going to be empty
or we can put Instagram.
OK.
Close that image.
Now, for the actual URL of the image, for the source, I'm just going to go to Google and find or
look for Instagram.
Logo.
And I just want to pick out an image that looks pretty nice, so something like this?
That is an error.
Not this, maybe something like this or maybe like this, it's even better, so if I go to that page,
I'm going to copy the image address.
Let's see if I can paste it here.
And without the parameters, save that, and let's have a look at our.
This is perfect.
OK, so we're of course going to style this.
This is way too big at the moment, but it is.
It is looking really good, right?
So we have our header image.
Now we also want here another device that will basically contain two buttons, so we will have a sign
in and sign up.
OK, so basically log in and create an account.
So I'm going to create a button.
OK.
That was an import was created for us from Material UI Core and here, so I have my button.
I have an on click.
On Click.
Why isn't it on click?
There we go.
And here we will have equals some functionality and we will have a set open sign in.
Of true, we need this state to variable, OK, so we're going to create that in a second.
Now let me just finish the button and I'm going to say logging.
So let's go ahead and create our open signing variable here at the top.
I'm going to say Konst open sign in and set open sign in.
That's going to use state with a false.
OK, so the open sign in this is going to be a a window to actually sign in and that's going to be closed
by default.
So false.
So I have open sign in the button and I'm going to create a very similar button, but for open sign
up.
So instead of log in, I have sign up.
OK.
Of course, I need to create the variable as well.
Open sign up.
Up here and state falls, OK, so I have Instagram and I have my two buttons.
Of course, we need to style this because it looks terrible at the moment.
Now, if we go to abduct CSIS, we can add here our our classes so app underscore header.
And we have.
About header image.
OK.
Right, so let's add, let's do the image first, because that has quite a bit of impact.
So I'm going to say object fit contain and I'm going to limit the width to one hundred and fifty p x,
OK.
If we save that, we get our Instagram quite small.
Maybe a little bigger, maybe 200.
OK, that's looking good now for the header.
I'm going to say position that's going to be sticky and top is going to be zero.
I want a z index of one, so it's on top of everything else, and background color is going to be white.
OK, let's check it out.
All right.
So if I scroll now, you can see that the header is sticky at the top with a slight background color
here compared to the great of our our usual normal background.
Now I want these buttons to show up on the right hand side here.
So what I can say is I'm going to say border button.
Let's add a border button to make a distinction for the header one p x solid and light grey.
I'm going to have objects fit contain.
And display Flex and I wants to justify content with space between, OK, so if we save that, we will
see that the log in and sign up are here on the right hand side.
OK, so we have our header sticky at the top with some log in and sign up buttons.
Now, just in addition to that, I want to align everything in the middle and I want to add some padding,
so I'm going to say the line items center and I'm going to add a bit of padding.
So X should be good.
OK, so that gives us a nice head in there.
Yeah, it's looking better, I think.
And we have our log in and sign up.
Of course, these don't do anything right now.
We have we are setting the state OK, but we are not doing anything with that state.
Of course, we will add this functionality in the next video, but for now, I think it's all looking
pretty good.
We have a header that sticks at the top while we scroll and we have our two buttons here.
So like I said in the next video, we're going to implement the functionality for opening the window,
at least for signing and sign up.