Creating the Journal Page

[00:00:00]
>> All right, well, let's make this journal page cuz it's just 404 right now. So, to make the journal page, we're going to Dashboard route group, and we will make a new layout. So make a new layout in here. Reminder, a layout is just a component that wraps all of its sibling and children pages and layouts.

[00:00:21]
So it's like a template, it just wraps it, it's great for sharing UI across sibling and child routes. So, we want all of the pages in our dashboard to have this certain layout. So instead of, let's just take this side nav and this top nav, move it to components and we'll bring it into every single page that we want.

[00:00:39]
Let's just make it once and then we will wrap every page inside of it, and we get that. And the benefit of that is, one, we don't have to bring it in every single page. Two, because it's a layout, it doesn't re-render when the route changes. So we don't have to worry about, why is my nav bar flashing every time someone changes routes?

[00:00:58]
You don't have to worry about that, it stays static. So, that's what we're gonna do. So we'll say, Dashboard Layout. Like this, and this, export default that. And because it's a layout, the only requirement that it needs is that it just, I mean, it's not even a requirement.

[00:01:20]
But if you don't do it, it's like why are you using a layout? Is that you need to just render the children, that's really it. You don't have to, it's not gonna break if you don't. But it's not gonna serve its purpose if you don't. So, render those children.

[00:01:34]
So for now, we'll just keep the dashboard as a pass through just to render the children. That way we can get the journal page on the screen. And we'll come back and make this actually look like something soon. So we've got a layout here, and then we need a new folder, call it journal.

[00:01:52]
So we can have that segment. And then we want a page, we wanna be able to go to /journal. So that means we have to make a page in the Journal folder. This allows us to go to /journal which is where our app is trynna navigate us to, So, we'll make a journal page And for now, we will just return some data that says Journal.

[00:02:26]
That way we can just see something on the page. Cool, everybody with me? Awesome, let's just verify we didn't break anything. I click here, should go to /journal like that. Cool, so what is the journal page? Well, if you remember from the demo I gave you at the beginning, the journal page is where we list all the journal entries that we have.

[00:02:55]
And we can also create a new one. So, that means this page is gonna be responsible for pulling in, fetching, getting all the journals in an ordered manner by date, organizing them. And then also holding, being a container for the new journal button that we can use to click on to create a new journal.

[00:03:14]
So it has those two functionalities. We'll focus on getting the journals. Well, I guess we should focus on creating a journal first since we don't have any journals to get. So, we'll focus on, we'll pick which one, it doesn't really matter. We'll figure it out, but we'll do that.

[00:03:30]
But first, let's get this dashboard looking like a dashboard. Cuz right now it's not, and it's bothering me. So, let's do that. So in this dashboard layout, let's write some CSS here. I'm basically just going to just do a simple dashboard layout. You got being on the left, you got a little skinny nav bar on the top.

[00:03:49]
And then you got your content below the nav bar on the top and to the right of the sidebar on the left. There's a lot of ways to do it, there isn't a right way. I'm not making this responsive, so I'm just gonna use absolute positioning for a lot of stuff here.

[00:04:02]
So, first thing I'm gonna do is make this dashboard. I could just drill into making this like h-full and w-full. And then if its parents are full, it's parents are full, it'll be full screen. I can just shortcut all of that and just be, yeah, each screen and w-screen.

[00:04:23]
You're as big as the screen, that's how big you are. So we got that, and then I'm gonna make this relative. Cuz I'm gonna make some absolute position things. So I need something relative, now want this to be. And the next thing I'm gonna do is make the sidebar.

[00:04:43]
So, I'll just use a side here, you can use diff. This literally doesn't make a difference, I'm just trying to be correct. So I'll use an aside here. I'll make this absolute, put a top of 0, and a left of 0, and a height of full. And a border, right, with a border that is black.

[00:05:12]
And 5% opacity, maybe 10%, we'll play around with that. And I'll just put the word Mood in here, like that.
>> Layout.
>> And then next to that, I, I gotta give this a width. Let's make this a width of, say, 200 pixels. Use a number here. And I'll make a div here that offsets that cuz this sidebar is gonna be on the left 20 pixels wide.

[00:05:50]
So I have to account for that. So I'll give this a class name, I'll give this a margin right of, I'm sorry, margin left of 200 pixels, same width as this. To offset that. Then inside of here, I will make a header with a nav inside of it.

[00:06:16]
Actually, I don't even need a nav, I'm just gonna make a header, and here it'll just be, Hello, and then for this header, this is also gonna be absolutely positioned. So I'll say absolute. Actually, you know what? I don't need to make this absolute position, this could be relative.

[00:06:34]
But I will give it a height, I'll give it a height of, I don't know, 60 pixels. That might be too big, that might be too small, we'll see. Border bottom, with a border of black/10. We'll just say hello there. And then finally, this is where our content will go.

[00:07:10]
Cool, so let's see how ugly this is. [LAUGH] It actually worked out. [LAUGH] It's exactly what I wanted it to be. So, we have our thing on the left, our navigation on top and then our content right here. So this is the journal page right here. I guess it does work out on the first time sometimes.

[00:07:30]
We all get that one time. I gotta go play the Lotto tonight, hit those numbers.