Now, I mentioned that I also wanted
to outsource this header background here
into a separate component, and that's what I'll do next.
For that, in that components folder,
I'll add my
main-header-background.js file,
and in there, export a component
that's named MainHeaderBackground, like this.
And now I'll simply grab this div here
from the root layout
and return that here in that MainHeaderBackground component.
As a little bonus, we can now also extract that CSS class,
which is set up in that globals CSS file,
and put it into a CSS modules file
so that we practice working with that again as well.
So, I'll add another file
next to this main-header-background.js file,
and I'll name it main-header-background.module.css.
And now we should grab this header background class
and this SVG selector here from the globals CSS file,
and cut it from there.
And instead add it here
to this main-header-background.module.css file.
You should now also tweak that SVG selector
and actually select SVGs inside of a element
with header-background as a class.
Otherwise, this won't work with CSS modules.
With that done,
back in the main-header-background-component file,
we should import classes
from ./main-header-background.module.css like this,
and replace this here, this class name,
with classes, and then the class name here
is header-background.
Now, that's a invalid JavaScript property name
if used like this,
and therefore I'll use that square bracket notation
and access the property value like this.
With that, we can save this and go back to layout.js
and then also output the MainHeaderBackground here,
or since it, as the name suggests,
belongs to the MainHeader,
we can actually not do that,
get rid of the import and the usage
in the root layout.js file,
and instead use it here in main-header.js.
There we could return a fragment
so that we can add a sibling element next to the header,
and that sibling is now that MainHeaderBackground,
which I guess makes a lot of sense
if we look at it like this.
And with that, if we save everything,
we got the same result as before.
But now using another extra component,
which you of course don't have to do,
but which I did want to add here for practice purposes.
Now, I also wanna group all these main-header related files
together into a separate subfolder inside of components
so that we keep that components folder manageable
and easy to navigate.
And hence, I'll add a main-header folder
in that components folder,
and move all these main-header related files
into that main-header subfolder
inside of that components folder.
With that, you then just have to make sure
that in the root layout.js file,
this import path here is updated,
which in my case, my IDE did for me.
And with that, the page still works as before.