So let's start working in the components, I guess.
We're going to go new file.
I'm going to go with a knife bar and a jazz, so I create the component.
And right from the get go, I'm going to grab my wrapper.
So import of wrapper.
Now that is coming from.
And then, like I said, I need to go to the assets.
More specifically, wrappers.
And now let's look for number one.
OK, good.
Then let's right away, use it.
So let's say you're a rapper, and as far as the return, I'm going to go with heading for another.
Let's say it.
I don't think I'm going to do it anything right now.
In the next year, I'll create a rest of the components.
So let's say here small and then side bar guys, same drill.
Let's create the component, then let's import our wrapper.
And I think this is going to be the case where we can simply copy and paste.
Just make sure that you change the file here.
So let's go here.
Not with not but a small sidebar like.
Same deal.
We use the wrapper here and then we're going to go with heading for.
And small sidebar.
All right.
Beautiful.
And then lastly, let's do the same thing with big and sidebar jazz.
Let's create the component, Van, let's import everything, I think I already have it in a clipboard,
so it looks about right now I just need to change the file name and in this case, I'm looking for a
big side bar.
Let's had the wrapper here.
And then let's go with heading for and Big Side Bar with all of these ones in place.
Now let's navigate to the imagery in the components, and one by one, let's explore them as well.
So and here I'm looking for an avatar, also looking for a big sidebar or big sidebar here.
And I also want to grab what when I grab the small one so small sidebar, right?
And let's take all of these suckers here.
Let's add commas right away.
So we don't have some weird bugs.
Let's move them.
So I'll cut it out here.
Copy and paste and we are in good shape.
Now let's navigate back to our what our shared layout correct.
So I'll open this one up.
And then one by one, I'll close the times because again, I'm somewhat OCD about that.
And I just like that I have less time.
So here, here and here.
Essentially, what I want to do is import all of them from the component, and then let's set up the
two column layout structure.
So let's go here with import.
And I'm looking for all of them.
So no sidebar, small sidebar from online, we go up to components.
Now this will be two levels up.
Keep that in mind.
And then I also want to remove this comma.
So let's save it.
I have my components.
And as far as the layout, well, it's going to go something like this where I'm going to have the wrapper,
which is coming from shared layout, correct?
So if you want to take a look at the case, that's basically how I set up the two column layout.
Please just navigate there and you'll see all the code.
But inside of the wrapper, I have the main tag.
And then for this one, I want to add the class name of the dashboard.
So that's the class for this particular element.
And then inside of this element?
There's going to be a small sidebar, big sidebar, and then there, which is going to be that second
column.
So for time, being outdoors is going to stay here, but eventually, of course, will move it inside
of this second column.
So let's go up here and let's say small sidebar, and then the next one will be a big sidebar.
And before I placed the outlet inside of there, first of all, I want to add a few more things in there.
And second, let's right away talk about this because as you're looking at, you're like, Hey, man,
what are you talking about here?
Small sidebar, big sidebar.
And then you have to do.
How come this is a to call map?
And this is something that I want to mention that.
If I can, I actually set up the display functionality in the CSIS.
Now what am I mean by that?
Well, if you take a look at the wrappers more specifically small sidebar and big sidebar, which you'll
notice is that I'm using CIUSSS to hide it.
Let's say big sidebar is hidden by default.
Display none.
And only once I get to nine hundred ninety two, then I display the big sidebar.
Now you can probably already guessed that the same is in a small sidebar only other way around.
So now, once I get to 992, I hide the small sidebar.
But if the screen size is smaller than this is what we display as far as small sidebar is concerned.
And again, it's just my preference to do that using CSS.
Now, can you set up the logic here, for example, in a shared layout using React, for example, checking
the pixel sizes and then toggling between the small sidebar and big cyber?
Yes, of course you can.
But again, it's my preference to do that in a sense, because I just find it easier to set up and more
straightforward.
So literally one media query instead of setting up the state values here and things of that nature.
So hopefully this is clear.
Yes, I have a small sidebar and big sidebar and I have the deer, which is the second column.
And the reason why this works is because inside of these components, I have access that controls which
of them will be displayed at certain screen size.
So at the end of the day, this is only one component which will be rendered.
Hopefully, I make sense.
And now inside of the deal, like I said, there's going to be two more things inside of this column
a number which is going to be sitting on the top.
And then I'll take the.
I'll add the class of dashboard page because I'm using that in my CSS in the wrapper 40 shared layout.
Very, very important.
So it's out of the wrapper for shared layout.
You'll notice the CAC 40 dashboard page and in there I'll place the outlet.
And then as a result, that's where the page is always going to be sitting there, regardless of which
prejudice.
So these ones don't change, they stay the same.
That's the whole point for shared layout.
What's changing is this so we're just rendering the front page at the time.
Hopefully, this makes sense.
So now let's navigate back.
And like I said, we're going to go with the now bar first, and then we're going to go with another
div.
Yes, another div.
And then we'll add a class dashboard and then page.
And then inside of this there, this is where we want to place the outlook.
So let me move this sucker up once say and don't be surprised if some other things look funky.
We still have a long way to go, but let just this throughout what we currently can see.
So let me navigate to the job if anyone noticed.
So this is going to be my big sidebar.
OK, that looks about right.
Then I have over here a knife bar.
All right.
That looks also correct.
And that if I go to the small screen, I should see this small side bar again.
Yes, it looks funky.
Eventually, it's going to be positioned fixed and all that cool stuff.
But if you see this general structure, we are moving in the right direction.
So that's my small sidebar.
Navarre starts page again.
Eventually, this one will be fixed.
So therefore it's going to look something like this or we can toggle it and all that cool stuff.
And then once we get to the bigger screen, then we'll have a two come round.
So big sidebar over here and then the stats page or whatever page.
Keep in mind that if I'm going to navigate here to all jobs or our job or whatever, now this page will
be displayed.
And then over here on the top, I have the number, and with all of these things in place now, I can
start slowly setting up those components one by one.
So first, I want to work on these suckers over here.
The mob, the sidebars and all that.
And then we'll slowly move to pages and one by one set up to logic on a server and then implement it
on a frontend as well.