‫Next up, let's build the static layout
‫of the main application screen.
‫And to start, let's actually take now all
‫of our starter components here and move them
‫into the component folder that we already have.
‫And this can be a bit difficult inside VS Code,
‫so if you find it easier to do
‫in the File Explorer then just go do that there.
‫But anyway, with this, we now no longer need this folder.
‫So let's finally delete that.
‫And with this,
‫we are done handling all of these starter files.
‫So let's close up this one.
‫And now we have, as you see, a lot of different files here.
‫And what some projects do is to create a folder
‫for each of the components.
‫For example, here, this country item,
‫we would create a folder just for this
‫and then place the component itself, the CSS module
‫and maybe even some other files in there.
‫For example, like a test file.
‫But here, let's just keep it simple
‫with a flat file structure,
‫and we will just deal with having all these files here.
‫But anyway, let's now open up our app layout JSX file
‫so that we can now start working on this part.
‫So basically what we want to achieve
‫in the end is to having this sidebar here and this map.
‫All right.
‫And so basically we will now create
‫these two components first.
‫So let's do that here inside our components.
‫So sidebar.JSX.
‫And then also let's immediately do map.JSX.
‫All right.
‫And so starting with the first one,
‫we use again our snippet here.
‫And so then let's start working here on the sidebar.
‫So first of all, this will get the class of sidebar.
‫And so that class is actually inside the module
‫that is already here for this sidebar component.
‫So this class right here.
‫And so let's again start by getting in those styles.
‫And I will actually show you an easier way
‫of importing this a bit later.
‫But for now, let's just keep doing this .CSS.
‫And now we can come here and use styles.sidebar.
‫And now here we want to bring in our logo again,
‫so just as we can see there on the right side.
‫Then we also have the app nav.
‫So that's this component that we also already created.
‫Then we will have that list of cities
‫which we don't have yet.
‫And so for now, let's just write that here.
‫List of cities.
‫And then finally down here,
‫we also have this kind of footer.
‫And for this,
‫let's actually just use the HTML footer element.
‫So without creating a new component,
‫which I guess might make sense
‫but I just wanted to keep our list of components here
‫a little bit shorter.
‫So if you want, you can totally as an exercise do that.
‫So creating a new photo component,
‫and then also exporting these styles
‫that we're going to need here to a new CSS module.
‫So that will be footer.module.CSS.
‫So then taking these two styles into that other module.
‫But again, I will just keep those here
‫to keep it a bit simpler.
‫And now here, let's create a paragraph
‫with styles.copyright, like this.
‫And then let's just do copy, copyright.
‫And then new date,
‫and get full year so that we dynamically calculate
‫the current year here.
‫And then by WorldWise, Inc, let's say,
‫completely made up company.
‫And yeah, I just realized that it would be a lot nicer
‫to have this in its own component.
‫And so as I was saying before, please do that now
‫as a challenge, while I will simply leave it here
‫to keep it simple.
‫Now okay, and now let's remove all of this from here.
‫And let's then include this sidebar that we just built.
‫Okay, and that's looking a lot nicer already.
‫We are just missing some layout here, and that's just
‫because we are still missing our style here.
‫So we need to import that again.
‫But now let me show you an easier way.
‫So using again a snippet.
‫So come here to our index.CSS file
‫where I placed this snippet code for you.
‫So please copy that
‫at least if you want to use this snippet.
‫And then come again to user snippets
‫where we already placed some other ones.
‫So we've been using this one and this one.
‫And so right afterwards, let's paste that code.
‫And so now we will have a snippet
‫which we can use with this prefix of CSM.
‫So that stands for CSS modules.
‫And that will then automatically import those styles for us.
‫So save this, close it, close this one as well.
‫And then use CSM.
‫And there we go.
‫So it automatically uses again the file name here.
‫And so now we can just use the styles object.
‫So styles.app.
‫And beautiful.
‫So now we have our sidebar here on the left side,
‫and on the right side we are going to have that map.
‫And so that's coming here from this flex container.
‫All right, so let's then build this map.
‫And for now here we will just write map,
‫and then also use some more styles.
‫So our snippet CSM,
‫and you see this makes it really a lot faster.
‫So then here it is, map container.
‫And then let's include this right here as well.
‫So map and choosing this one
‫so that it automatically gets included.
‫And nice.
‫So there we have it.
‫And you see that we are not doing any composition
‫here in this case.
‫So our sidebar contains a couple of elements and components
‫which we could have just passed in here
‫as children components in this case.
‫So just like we have been doing before,
‫but since we are not passing any props here anyway,
‫let's just keep this page here very clean.
‫So I usually like to do that.
‫So having the pages without much stuff in them,
‫so that most of the code
‫is actually inside my components folder.
‫So then this page,
‫basically all it does is to just add some styles to the page
‫and then it includes all the components that are necessary.
‫Let's just remove that, that code there.
‫And with this, we are actually finished.
‫And so now with the static layout in place,
‫it's time to go back
‫to learning a bit more about React Router.