So let's get cracking.
I'll save it over here and then we want to get back to the number.
So the moment I only have the wrapper and I only have the home, I can show of my change this around
where I'm going to go with F.A. and then online and left.
That's the first one that we want to have a fair user circle affair user and then I'm looking for a
circle.
And then lastly, we want to go with F.A..
And then we want to go with this one.
All of them are coming from reactor icons like I just said, Well, and let's get also our use app and
then context that is coming from our context, of course.
So we're going to go over here and look inside of the context.
And we're also going to do the same thing with the logo.
So it's their logo from.
And since this is sitting right next to the bar, we can just simply point to a logo.
Now there's going to be a big, fat error in the console simply because we don't have a port for back
home, correct?
So let's just remove this one.
And like I said, what we want to do is set up that three column layout inside of the nerve center.
So let me close the sidebar.
I'm going to go here with nav center and line inside of it.
We're going to go with our first button or the toggle button than the day of where we'll have the logo
and the logo text more specifically match board.
And then let's set up that button container.
So let's start with our simple toggle button.
So we have a button here.
We'll go to class name or go toggle and then hyphen between probably you.
I want to close the terminal.
I don't think we need to use it for now.
And then let's go with on click.
And for now, I'll just passing that console log just so I can see that functionality works.
And more specifically, I want to go with a log and will pass in some kind of string ruler.
So let's say here, toggle and that sidebar now inside of the button.
This is where I want to display my aunt on the FAA.
I'm online.
And once we have this one in place, we can take a look at our complete project and it should look something
like this.
So this is what we'll see now as a side note, if right away it doesn't update whatever you see in the
browser, what you can test out is the following setup where you need to go to the client here.
And this is important.
We're not talking about the server, but you can go to the client.
You can create a new file and you need to go again with that in RE.
And in here, you can go fast and then refresh so fast.
Underscore refresh on that one is equal to false.
So you can try this one out now you will have to stop everything and restart.
So I'm going to go here with npm start and I'm not going to spend more time on this one.
You can Google.
Why is this happening with Create React app?
And in my experience, to tell you, honestly, this one is kind of fun.
There's times when this one works and there's times when it just doesn't.
So you literally still need to manually refresh.
And again, I don't want to spend too much time on this one because this is literally everything to
do with Create React app and nothing to do with our application.
So the moment I have my application spinning up and I can simply go back to the navar and then close
this down at the end.
And I want to set up my second call.
So right next to the button, I'm going to go with Dev and that instead of not there, I want to set
up my logo.
That's first, and then I'm going to go with my heading three with a class name of logo text.
So class name and then let's go with logo and then text.
And then inside of it would set up the text, which in my case is going to be a dashboard.
Let's say it, I'll close the terminal and then once I navigate here, not now I have my dashboard text
again.
This is going to depend on the screen size.
So on the small screen?
Check it out and I'll have my logo.
And then we want to set up that third column.
So again, we need to make sure of your setup is exactly the same.
So you have a button side by side with a device with logo and logo text unless you want to go with that
button container.
So let's go with div, and the class will be BTN and then container.
And then inside of it, let's set up first button to show or hide the dropdown.
So let's go here with button.
Now the type actually here is also going to be a button.
My badges actually want to do the same thing here.
So go here where we have the first button and type, and then it's going to simply have a class of between.
Class nine will be beaten and not as far as the on click.
Well, let's just pick this up, but I'll take this one and we simply want to change what we're logging.
There's really no point to type this from scratch.
So let's just say here show hide, hide and dropdown drop down.
Let's say this one.
And then inside of this button, I want to set up two icons as well as the text.
Now, eventually, that text will depend on the user name.
So notice the complete one since the user names John.
That's why it is displayed over here for time being.
Of course we will on this one.
So first, let's start with this f a online user and then circle.
That's the first one where you want to display online or right next to it.
I'm going to go with John again.
Hardcoded.
And then lastly, we have the FAA and we're going to go with this one.
That's the icon will set up over there and then inside of the button container again, please be very
careful where you set this one up, because if you'll set it up in the wrong place, then of course,
the access is not going to work.
So in the button container right next to the button, I want to go with this.
And here I'll add drop down and show drop down class.
Now, eventually, we'll toggle this one.
But for timing, let just go in there.
And like I said, drop down.
And another class I want to add is show drop down.
Now, once I have this in place, then inside of the if I want to go with button and then the text will
be a log on.
So let's set this up.
I'm going to go with button then type where I said it will be equal to a button.
Then the class name will be drop down and then hyphen between.
And as far as the text, let's just say logout.
And then let's also add the on click here.
Then it's just going to be a console.log.
So copy and paste.
And as far as the logic here, well, let's just go with a log out years or so, of course.
Eventually, we will set up the logout functionality as well.
So once we save this, once we navigate to the big screen, this is what we should see while the toggle
one, you're not actually open up my console just so I can see.
Yep, notice I have toggle sidebar.
So I know that functionality works and I also have these two.
I have one to show and hide the dropdown, and then I have another one where we're logging out the user.
And if this is what you see on the screen, that means that we have successfully set up the structure
for our bar.