All right, and I think we're going to start by setting up our number, just keep in mind that number
is transparent and what that means is that we'll have to add a hero so we can see it better.
So once we just add no, it's going to be kind of tough to see it.
But then once the hero is going to be rendered as well, and of course, we will nicely see we not only
because the number by itself is transparent, so I'll leave the hero the way it is.
And what I'm looking for, of course, is the number.
Now, I do want to quickly grab my global context just so I can speed this up.
And then instead of the number, let's start by looking for two functions and then also one state value
zone here.
I would want to access the open side, more open side bar and then for reason for that is, of course,
on a small screen.
We're going to have this toggle button that toggles the sidebar.
That's why, of course, I would want to have that function online.
I would want to have a function to open and close the seven years ago.
And I'm sorry that there's going to be one state where effectively we'll have three functions, we'll
have open submenu and then also close submenu function.
And all that is coming from use global context.
And we try to invoke it as far as our return.
We're going to go here with a last name off now, so let's set up now, let's add a class name and it's
going to be equal to now.
Eventually, there's going to be some more functionality, but not right now.
But delete this one.
And then instead of the knife again, we have a day for the class of nerve center.
And then we're looking for the idea with a class of knive, Aitor over here.
And then right next to the header, there's going to be on our list with a class of narrowings.
Now, in this case, I'm not going to iterate over the links because these links are not coming from
my data and they're not going to be links.
They are going to be buttons, and that is done on purpose.
So within an hour of heter, we're going to have a image.
Let's outsource right away.
And I have important in the file as well.
So we have logo.
It is coming from the images and I just need to serve quarter.
So we go with logo.
As far as the alternative, I'm going to go with it again.
Coding or you know what, let's see.
Here is the logo and of course got a stripe so that just a right stripe and we're going to add a class
name.
So class.
Name and no one will be equal to, I believe, knive logo, so let's ARIADNI logo, let's save an artist
that is our logo.
Awesome.
And still within us there will be setting up our toggle button as well.
So button and then let's add some classes here.
Last name, ETN and then Toggle Vitton.
And on the click I would want to invoke open sidebar, which by the way is right away open by default,
but of course eventually will change that.
So on.
Kaleck is equal to open sidebar.
So once we click on a button, we should be able to open up the sidebar.
And then of course, we're going to go with F.A.A. Barsh and that is the icon that will place inside
of the button.
And then I would want to work on Winx.
So there is our button.
Of course, once we click we open up the sidebar, which is open by default because it's just going
to be easier while we set up the structure for the sidebar.
And that instead of the links, like I said, we're not going to iterate over those links because they
will be buttons at the end of the day.
So allow.
This item and then in here, let's add a button, let's set up a class name, and this one will be a
link between and eventually there's going to be some functionality, same like I have already, General
NAV, but not the moment.
And then let's.
All right.
Some buyers now, these values, though, must match what you have in there.
So notice here I have the pages and I have links.
So the values inside of buttons need to match the text buyers where we have the object.
If the object page values this product set up as product, if it says developers set it up as developers
and hopefully you get the gist.
So the first one will be products.
Then we copy and paste.
Then we'll add these two and we'll set it up as developers.
OK, so I'm the last one will be company.
Now, these buttons will only show up on a big screen and that's why you cannot see them.
So if I make my screen bigger for I check it out.
What I have here, these are my values.
Again, it's going to be kind of tough to see what is happening right now because we haven't added everything.
And also one thing that is missing is the button for the.
So this is not going to be any kind of functional button.
It is just there for show.
So we go with Button, then let's add a class name and we're going to go with Button and then sign in
my friend B10.
And then instead of this button, let's just say sign in, we're going to say it and I'm almost done.
But I just need to fix one bug where I placed all my buttons and the same link that is of course not
set up that I was looking for.
So we go here with Ally and then copy and paste and I'll create one or less than.
My apologies have these values.
And now, of course, this is something that we should see on a screen.
Again, it is kind of tough to see the links because we haven't had the hero, which probably will work
on next since I would want you to see the number.
And once the hero is going to be in place, it is going to be much more easier to see those.
But that should be a general setup for the number.
Again, we grab some functions from our global context.
For time being, we just use one.
But eventually, of course, we'll use the other ones as well.
And as far as our turn, we go with NAV, we have the header, we have some links that are buttons and
also just one button for the show and one is the side and button.