1
00:00:02,000 --> 00:00:05,000
So, some kind of general layout would be nice.

2
00:00:05,000 --> 00:00:09,000
A general navigation bar, which we have on all our pages

3
00:00:09,000 --> 00:00:12,000
because at the moment we don't have that.

4
00:00:12,000 --> 00:00:13,000
Now for dat,

5
00:00:13,000 --> 00:00:16,000
we can of course dive into all our page components

6
00:00:16,000 --> 00:00:20,000
and start adding some some header at the top.

7
00:00:20,000 --> 00:00:23,000
So above our main content, we could add a header

8
00:00:23,000 --> 00:00:25,000
with a nav bar and so on.

9
00:00:25,000 --> 00:00:27,000
And we could do that

10
00:00:27,000 --> 00:00:31,000
but we would repeat that code for all our page components

11
00:00:31,000 --> 00:00:33,000
in the end, since I wanna have the same navigation bar

12
00:00:33,000 --> 00:00:35,000
in all those components.

13
00:00:36,000 --> 00:00:39,000
And the dat is where dis _app.js file

14
00:00:39,000 --> 00:00:41,000
now becomes important.

15
00:00:41,000 --> 00:00:45,000
This in the end is the root component

16
00:00:45,000 --> 00:00:49,000
where the different page components are rendered in.

17
00:00:49,000 --> 00:00:51,000
This component, which is rendered here

18
00:00:51,000 --> 00:00:55,000
that's your page component in the end next to js

19
00:00:55,000 --> 00:01:00,000
we'll use this _app component to hand your page content

20
00:01:00,000 --> 00:01:05,000
to it to then display it whenever you switch the page.

21
00:01:05,000 --> 00:01:06,000
So that's your page being rendered,

22
00:01:06,000 --> 00:01:08,000
this component.

23
00:01:08,000 --> 00:01:12,000
That means that we of course can wrap this component

24
00:01:12,000 --> 00:01:15,000
with some general layout component.

25
00:01:15,000 --> 00:01:17,000
We could wrap it with a fragment

26
00:01:17,000 --> 00:01:19,000
and add a header on top of it.

27
00:01:19,000 --> 00:01:23,000
And that is exactly what we're now going to do.

28
00:01:23,000 --> 00:01:26,000
For this in the components folder,

29
00:01:26,000 --> 00:01:29,000
I'll add a new sub folder side by side

30
00:01:29,000 --> 00:01:31,000
to event-detail, events, icons, and ui

31
00:01:31,000 --> 00:01:33,000
and I will name it layout.

32
00:01:35,000 --> 00:01:39,000
And in this folder, I'll now add a layout.js file

33
00:01:40,000 --> 00:01:44,000
and a main-header.js file.

34
00:01:45,000 --> 00:01:48,000
Now the layout.js file will be fairly trivial.

35
00:01:48,000 --> 00:01:52,000
It holds a functional component, the layout component

36
00:01:52,000 --> 00:01:55,000
and that component will receive some props.

37
00:01:55,000 --> 00:01:59,000
And of course, we also export this layout component here.

38
00:01:59,000 --> 00:02:04,000
And then here, I just want to return a fragment

39
00:02:04,000 --> 00:02:06,000
which we import from react.

40
00:02:06,000 --> 00:02:07,000
So we import from react.

41
00:02:07,000 --> 00:02:12,000
We import the fragment and then a main HTML element

42
00:02:12,000 --> 00:02:15,000
between which I output props.children.

43
00:02:15,000 --> 00:02:18,000
But then above that also my header

44
00:02:19,000 --> 00:02:22,000
and I'll create that header in a separate file

45
00:02:22,000 --> 00:02:25,000
in the main-header.js file.

46
00:02:25,000 --> 00:02:30,000
In there we add another component, the main-header component

47
00:02:31,000 --> 00:02:35,000
which we also export as a default here.

48
00:02:35,000 --> 00:02:38,000
And then in here in this main-header component

49
00:02:38,000 --> 00:02:40,000
we return our header coat.

50
00:02:41,000 --> 00:02:45,000
So here we'll have a header wrapper HTML element.

51
00:02:45,000 --> 00:02:49,000
And then in there a div, which holds our logo,

52
00:02:49,000 --> 00:02:51,000
our logo text in this case

53
00:02:51,000 --> 00:02:55,000
since we'll not have any image logo in this application

54
00:02:55,000 --> 00:02:58,000
and next to that logo we'll then have a nav bar

55
00:02:58,000 --> 00:03:01,000
with our navigation items.

56
00:03:02,000 --> 00:03:05,000
But let's start with the logo that will be fairly trivial,

57
00:03:05,000 --> 00:03:09,000
I'll make it clickable by adding a link here.

58
00:03:09,000 --> 00:03:13,000
And hence, we need to import link from next/link

59
00:03:13,000 --> 00:03:17,000
and I'll say, NextEvents here, that's my logo text.

60
00:03:18,000 --> 00:03:19,000
And it should be clickable

61
00:03:19,000 --> 00:03:22,000
and always take us back to the starting page.

62
00:03:22,000 --> 00:03:26,000
Hence ref here is just /nothing,

63
00:03:26,000 --> 00:03:29,000
slash nothing so dat when we click the logo

64
00:03:29,000 --> 00:03:31,000
we're taken back to the starting page.

65
00:03:32,000 --> 00:03:37,000
Now in the nav part here, I'll add an unordered list

66
00:03:37,000 --> 00:03:40,000
of all the navigation items

67
00:03:40,000 --> 00:03:45,000
though here it'll only be one nav item, which also is a link

68
00:03:45,000 --> 00:03:47,000
because it all does should be clickable.

69
00:03:47,000 --> 00:03:50,000
And here I'll say All Events

70
00:03:50,000 --> 00:03:53,000
because this should take me to the All Events page.

71
00:03:54,000 --> 00:03:57,000
Or we say Browse All Events

72
00:03:58,000 --> 00:04:02,000
and therefore here ref is /events to take us

73
00:04:02,000 --> 00:04:04,000
to this events page.

74
00:04:06,000 --> 00:04:09,000
Now some styling would be nice and therefore, again,

75
00:04:09,000 --> 00:04:12,000
attached you'll find a CSS file.

76
00:04:12,000 --> 00:04:17,000
You'll find the main-header.module.css file attached

77
00:04:17,000 --> 00:04:21,000
which contains some styles for this main-header component.

78
00:04:21,000 --> 00:04:23,000
And hence we should import

79
00:04:25,000 --> 00:04:26,000
classes from

80
00:04:26,000 --> 00:04:31,000
./main-header.module.css here

81
00:04:31,000 --> 00:04:34,000
and assign these classes to the HTML code.

82
00:04:35,000 --> 00:04:38,000
On the header element for example,

83
00:04:38,000 --> 00:04:41,000
you should assign a class of .header,

84
00:04:41,000 --> 00:04:45,000
So classes.header on that div with the logo

85
00:04:45,000 --> 00:04:48,000
it's classes.logo.

86
00:04:48,000 --> 00:04:49,000
On the nav,

87
00:04:49,000 --> 00:04:50,000
it's

88
00:04:50,000 --> 00:04:52,000
classes.navigation

89
00:04:52,000 --> 00:04:53,000
and that's it.

90
00:04:53,000 --> 00:04:56,000
These are the three classes which are added here.

91
00:04:57,000 --> 00:05:00,000
With dat we prepared the main-header component.

92
00:05:00,000 --> 00:05:02,000
And now in the layout component,

93
00:05:02,000 --> 00:05:05,000
we can add the main-header here

94
00:05:05,000 --> 00:05:06,000
above

95
00:05:06,000 --> 00:05:07,000
our main

96
00:05:07,000 --> 00:05:08,000
HTML

97
00:05:08,000 --> 00:05:10,000
element.

98
00:05:10,000 --> 00:05:12,000
So for this, we need to import main-header

99
00:05:12,000 --> 00:05:14,000
and then render it here.

100
00:05:14,000 --> 00:05:18,000
And now we just wanna wrap our overall layout

101
00:05:18,000 --> 00:05:21,000
around all the page content.

102
00:05:21,000 --> 00:05:23,000
And that is exactly what we can do

103
00:05:23,000 --> 00:05:27,000
with this _app.js file.

104
00:05:27,000 --> 00:05:30,000
We simply wrap this component

105
00:05:30,000 --> 00:05:32,000
which is our page content with,

106
00:05:33,000 --> 00:05:34,000
layout.

107
00:05:34,000 --> 00:05:38,000
So with our own layout component like this

108
00:05:38,000 --> 00:05:39,000
and for dis of course,

109
00:05:39,000 --> 00:05:42,000
you should make sure that you import layout

110
00:05:42,000 --> 00:05:45,000
this layout component which we just worked on.

111
00:05:45,000 --> 00:05:48,000
And we can wrap layout around that

112
00:05:48,000 --> 00:05:52,000
because in layout we do pass props.children.

113
00:05:52,000 --> 00:05:54,000
So the content between the opening

114
00:05:54,000 --> 00:05:59,000
and closing layout tags on to this main HTML element.

115
00:05:59,000 --> 00:06:01,000
So we render it between those main tasks.

116
00:06:01,000 --> 00:06:05,000
And hence, now if you save all files

117
00:06:05,000 --> 00:06:07,000
you should see this navigation bar at the top.

118
00:06:07,000 --> 00:06:09,000
And if I click on NextEvents

119
00:06:09,000 --> 00:06:11,000
I'm taken back to the starting page.

120
00:06:11,000 --> 00:06:13,000
If I click on browse, All Events,

121
00:06:13,000 --> 00:06:15,000
I'm taken to the All Events page

122
00:06:15,000 --> 00:06:19,000
where we haven't added any content yet.

123
00:06:19,000 --> 00:06:21,000
And therefore dats the next step,

124
00:06:21,000 --> 00:06:25,000
let's work on this All Events page now.