- 00:00:01 welcome to this video great Reggie on
- 00:00:03 board my name is Max and in the last
- 00:00:05 video of this project series we started
- 00:00:08 working on our toolbar we learned about
- 00:00:10 theming and you learn how to create a
- 00:00:13 responsive navigation here now the
- 00:00:16 navigation isn't finished though I want
- 00:00:18 to finish it in this video and I want to
- 00:00:20 show you how to dynamically populate
- 00:00:22 your toolbar and your navigation drawer
- 00:00:24 in this application now for that I'll go
- 00:00:27 back to the app to view file where I was
- 00:00:29 working and actually I want to store my
- 00:00:33 menu the menu set up in a property in my
- 00:00:38 data property of the view instance so
- 00:00:40 here I'll add a new property and I'll
- 00:00:43 name it menu items and this should be an
- 00:00:45 array now I'll represent each menu item
- 00:00:48 as a JavaScript object where I expect to
- 00:00:51 have the icon because I need an icon for
- 00:00:54 both my drawer as well as my toolbar so
- 00:00:59 ad icon here and I will also add another
- 00:01:05 property the title so basically the text
- 00:01:08 I want to display we can start right
- 00:01:10 away I can grab the I can we have here
- 00:01:12 the supervisor account edit here and
- 00:01:15 save you meet us as a title does that be
- 00:01:19 my first object my first menu item of
- 00:01:22 course it's not being displayed right
- 00:01:24 now but we'll build your menu here and
- 00:01:26 then we'll display it so next I can
- 00:01:29 duplicate this and now it's all about
- 00:01:31 finding fitting icons and assigning
- 00:01:34 titles now for this application I
- 00:01:37 already searched for a couple of icons
- 00:01:39 you can of course search the material
- 00:01:41 icons page I showed in the last video of
- 00:01:43 the series to find the one you like the
- 00:01:45 most
- 00:01:45 the next item I want to add in the menu
- 00:01:48 is the room icon this is a fitting icon
- 00:01:53 for the organized meetup menu item which
- 00:01:58 will later allow us to go to the page
- 00:01:59 where we create a new meter duplicate
- 00:02:02 this thereafter I want to have the
- 00:02:04 person icon which is a fitting icon for
- 00:02:08 the menu point of profile of the user
- 00:02:11 profile which you should be able to
- 00:02:13 visit fruit
- 00:02:14 is button here in the end then I'm going
- 00:02:17 to duplicate just twice again the fourth
- 00:02:20 item actually should be face and this
- 00:02:24 should be the signup menu item and the
- 00:02:27 last one lock underscore open for
- 00:02:30 sign-in is there
- 00:02:32 well last menu item I want to add now
- 00:02:34 here's an important note in this
- 00:02:36 application I'll of course a doth
- 00:02:38 indication later and once we have that
- 00:02:41 implemented will only show menu items
- 00:02:44 which make sense
- 00:02:45 so for authenticated users we want to
- 00:02:47 show the first free and for adult
- 00:02:50 finical users the last two because on
- 00:02:52 opening credits users certainly need to
- 00:02:54 sign up or sign in before they can do
- 00:02:56 something with our application so this
- 00:02:59 is the setup I want to use now we have
- 00:03:02 two menu items stored in this array now
- 00:03:04 I want you output them dynamically here
- 00:03:06 in the template how do you output
- 00:03:09 content dynamically in a view chase
- 00:03:10 application how do you output an array
- 00:03:12 dynamically well with v4 so to the
- 00:03:17 wrapping list I'll which holds our
- 00:03:19 action in the text we can add v4 and
- 00:03:22 simply loop for our items so I'm looping
- 00:03:25 fruity oops
- 00:03:27 menu items here the menu items property
- 00:03:30 we just created it is a good practice to
- 00:03:33 assign a key then so lets dynamically
- 00:03:35 bind a key for each loop item and I'll
- 00:03:39 use item title which will be a unique
- 00:03:41 string so it makes up for a good key and
- 00:03:43 then I can start replacing your
- 00:03:45 hard-coded values here with the dynamic
- 00:03:47 ones like item icon referring to that I
- 00:03:50 can property we set up down there in our
- 00:03:53 items and of course replace the text
- 00:03:56 with item title here with that let's do
- 00:04:01 the same for the toolbar
- 00:04:03 here we got our buttons through which I
- 00:04:06 want to loop so v4 and then again item
- 00:04:09 in menu items assign a key here item
- 00:04:13 title and replace both the icon and the
- 00:04:16 text so I Adam icon and item
- 00:04:24 title like that let's save just let's
- 00:04:28 see if we worked as it should we have a
- 00:04:31 look at our application this looks are
- 00:04:33 kind of good I think we have some fixing
- 00:04:35 to do regarding the width of our toolbar
- 00:04:37 they will keep in mind in the final
- 00:04:39 application there will only be a maximum
- 00:04:43 of three items displayed because will
- 00:04:45 either have sign up and sign in being
- 00:04:47 hidden because we're authenticated or
- 00:04:49 yabber free because we're not
- 00:04:51 authenticated so actually it's not a
- 00:04:53 problem in the final application if I
- 00:04:55 decrease this in width and have a look
- 00:04:57 at the drawer this looks good q with
- 00:05:00 that we got our design finished or the
- 00:05:04 toolbar finished we got our items added
- 00:05:06 of course none of them does anything we
- 00:05:09 haven't set up routing so that will be
- 00:05:11 the task we have to check on next add
- 00:05:14 routing to your application to make sure
- 00:05:17 we can actually go somewhere when we
- 00:05:18 click these items so let's tackle
- 00:05:20 routing next we already have to router
- 00:05:23 install since we chose to do so when we
- 00:05:25 set up this project and we got one route
- 00:05:27 route by default the hello route
- 00:05:30 components hello file here and we don't
- 00:05:33 actually see that being displayed the
- 00:05:35 reason for this is that we have no
- 00:05:37 router view so let's start by reading
- 00:05:39 that in the apt of you fall in the main
- 00:05:41 section let's add router view here and
- 00:05:45 let's save this now we see our welcome
- 00:05:49 page this is what we started with now I
- 00:05:53 of course I want to use that I want to
- 00:05:55 use my own pages I will go back to the
- 00:05:58 application therefore and remove the
- 00:06:00 hello the view fall and I want to add
- 00:06:02 some other components there now here
- 00:06:05 I'll first of all create a subfolder a
- 00:06:08 subfolder named meetup with a capital M
- 00:06:11 here that's the naming convention I'm
- 00:06:13 going to follow here and in that folder
- 00:06:15 I want to store all the meetup related
- 00:06:17 components I'll also create another
- 00:06:19 folder named user where I want to store
- 00:06:22 the user related components and then on
- 00:06:25 the root level
- 00:06:26 I'll trade a file home dot view so
- 00:06:29 that's going to be to be the home page
- 00:06:30 on which we start eventually in that
- 00:06:33 home page I'll add a template
- 00:06:37 so therefore now we're I'll simply say
- 00:06:39 the homepage and I'll start with a
- 00:06:42 simple template like this and all the
- 00:06:44 components for now we'll then fill them
- 00:06:46 with life throughout this project let me
- 00:06:49 copy that
- 00:06:49 template and in the meetup folder I now
- 00:06:52 also want to create some fitting pages
- 00:06:54 which will need oops another directory
- 00:06:56 though here I'll first of all treat a
- 00:06:59 meet-up stub you file which will be the
- 00:07:02 page we visit when we want to see a list
- 00:07:04 of all meetups so let me quickly create
- 00:07:07 that file open it and paste in the same
- 00:07:10 content here I'll say the meetups page
- 00:07:11 of course now whenever we click there we
- 00:07:15 are on the meetups page
- 00:07:16 we all set a page to create a new meetup
- 00:07:19 though so I'll also create a new file d
- 00:07:22 create meetup the view file this
- 00:07:26 component here will actually contain my
- 00:07:28 create meetup page now the next
- 00:07:32 component I want to add is in the user
- 00:07:34 folder because there we also have a
- 00:07:37 profile a signup and a sign-in page so
- 00:07:40 let's add the profile that view file in
- 00:07:43 that user folder and as a side note
- 00:07:45 I'll later reorganize these files and
- 00:07:48 structure them a bit differently but for
- 00:07:49 now this will do so here we'll have the
- 00:07:52 user page then I'll also add the sign in
- 00:07:56 dot view file here let's add that the
- 00:08:00 sign-in page and finally let's add a
- 00:08:05 third file here sign up that view and
- 00:08:09 let let's add you sign up page here what
- 00:08:14 that I got all the pages I need for now
- 00:08:15 again we'll of course work on them
- 00:08:17 throughout the project now we can
- 00:08:19 register our routes in the index chest
- 00:08:21 file in the router folder as a side note
- 00:08:23 if you're wondering how that gets into
- 00:08:25 our project and you may not chase fault
- 00:08:28 we are importing that file web pack
- 00:08:32 simply is configured to automatically
- 00:08:33 fetch the indexed up J's file if we're
- 00:08:35 just referencing a folder as we are here
- 00:08:38 so this could be completed to slash
- 00:08:40 index but again web completes it
- 00:08:42 automatically in this setup here and
- 00:08:45 then the router which is exported in
- 00:08:47 that file keep in mind we're using the
- 00:08:50 router
- 00:08:50 we're exporting a new router that is
- 00:08:53 simply added as a router to a root view
- 00:08:55 instance so this is how that comes
- 00:08:57 together now in that router I want to
- 00:08:59 register more routes or different routes
- 00:09:01 the root path for example should lead to
- 00:09:05 the home component so first of all I
- 00:09:08 have to overwrite this import I'll
- 00:09:10 import home and you can assign any name
- 00:09:12 you want here from components home
- 00:09:14 here's another neat feature this
- 00:09:16 specific web peg set of offers us we
- 00:09:19 have an alias for the root folder the
- 00:09:22 root folder in the source project I
- 00:09:24 should say so at slash refers to Soros
- 00:09:28 which is why with add slash components
- 00:09:31 we reach this file here and there I'm
- 00:09:33 now importing the home valve dot view
- 00:09:35 also gets added automatically
- 00:09:38 so importing home get a couple of our
- 00:09:40 files and need for example meetups here
- 00:09:43 under components and there is under meet
- 00:09:46 up meet ups dot view refer it to this
- 00:09:49 file next I'll also import the create
- 00:09:53 meetup component from the create meetup
- 00:09:58 file in the same folder and then from
- 00:10:01 the user folder I'll need the profile
- 00:10:03 component so here that's from slash user
- 00:10:06 here the profile that view file is what
- 00:10:09 we're referencing and then we get the
- 00:10:11 sign up from user to sign up file and of
- 00:10:16 course to sign in file which I'll store
- 00:10:18 in a sign in variable here now what G is
- 00:10:22 all imported I can start adding routes
- 00:10:24 the first route I'll give it a name of
- 00:10:27 home and the name is optional you don't
- 00:10:29 have to assign a name we can simply omit
- 00:10:31 it here I guess I won't use it but we'll
- 00:10:33 see you can use a name to navigate them
- 00:10:35 instead of the path so I'll leave the
- 00:10:38 name for now and I'll add a new route
- 00:10:40 here here I want to set up a path of
- 00:10:45 slash meet-ups and I want to load a
- 00:10:49 component the meetups component of
- 00:10:52 course can also assign a name here
- 00:10:54 meetups to stay in line with the other
- 00:10:57 set up then a new path is meetup slash
- 00:11:02 new maybe and for
- 00:11:03 you can choose any parts you would
- 00:11:04 prefer oops don't forget to get the
- 00:11:07 comma here after the name I'll add a
- 00:11:09 name here of create Meetup
- 00:11:11 and I'll load the component create
- 00:11:15 meetup like that I'll add another route
- 00:11:19 here with a pop of slash profile I'll
- 00:11:22 give it a name of you guessed it
- 00:11:26 profile and I'll load a component here
- 00:11:28 the profile component finally we're at
- 00:11:33 the last two routes here these sign up
- 00:11:37 pop should load a component where route
- 00:11:42 loaded named sign up and I'll use my
- 00:11:45 sign up component here and finally the
- 00:11:49 last route I know you'll love adding
- 00:11:52 routes is slash sign in with the name of
- 00:11:56 sign in it's super hot here by the way
- 00:11:58 so that really is fun to record this so
- 00:12:02 let's add sign in here these are the
- 00:12:05 routes I'm going to use in this
- 00:12:06 application let's actually see if it
- 00:12:08 works we get the router view we got
- 00:12:10 routes so if we go there and we enter
- 00:12:13 slash sign in now click that we see the
- 00:12:18 sign in page if we add whoops slash sign
- 00:12:22 up there we see the setup page now
- 00:12:24 regarding that navigation drawer which
- 00:12:26 kept occurring that was related to the
- 00:12:29 way we load our routes um we could of
- 00:12:32 course also prevent this but I don't
- 00:12:34 want to use this route style
- 00:12:36 anyways using this hash Bank symbol and
- 00:12:39 therefore having a different section for
- 00:12:40 client side and server side routes this
- 00:12:43 development server actually is
- 00:12:44 configured to fall back to that
- 00:12:46 index.html file in case of 404 errors
- 00:12:50 anyways so we can use the prettier URL
- 00:12:53 style which you can set up in our
- 00:12:54 index.js file on the router after the
- 00:12:57 routes all set mode to a string which is
- 00:13:00 history and this uses the HTML file
- 00:13:03 history mode which is just a slash so
- 00:13:06 just these normal routes here instead of
- 00:13:09 a hash tag in between and as I mentioned
- 00:13:12 your server needs to be configured to
- 00:13:13 handle this because if your server is
- 00:13:16 not
- 00:13:17 this route obviously is always resolved
- 00:13:19 first on the server and it won't be
- 00:13:21 found there because we only set it up on
- 00:13:22 a client so your server needs to return
- 00:13:25 the client in 404 error cases please to
- 00:13:27 return the index.html file in such cases
- 00:13:29 so that your index.html file can take
- 00:13:33 over and can handle that route this will
- 00:13:35 become important later once you deploy
- 00:13:37 this application so far so good though
- 00:13:39 we have the routing setup
- 00:13:41 now let's hook up all these links so
- 00:13:43 that it actually works so back in the
- 00:13:46 app thoughtyou file here i want to
- 00:13:49 assign links to all my routes right and
- 00:13:51 we again need to do this of course in
- 00:13:54 our menu items here in the code so there
- 00:13:57 I'll quickly add a link property to all
- 00:14:00 of them and links should be a string now
- 00:14:04 for view meetups this should just be
- 00:14:08 meetups for organizing me that that
- 00:14:11 should be slash meetup new for the
- 00:14:15 profile that should be slash profile and
- 00:14:17 for signup it should be slash sign up
- 00:14:20 for sign in it of course should be slash
- 00:14:23 sign in having the links here is nice we
- 00:14:26 also need to get them into our template
- 00:14:28 though there's one other thing I want to
- 00:14:30 link up there the title if you click the
- 00:14:32 tile I when I go back to the root page
- 00:14:34 so here I'll actually also sign a link
- 00:14:37 to the title here and you can view this
- 00:14:40 by wrapping the dev meetup here into
- 00:14:44 something you know from vanilla UJS so
- 00:14:47 to say because it is what I love you
- 00:14:48 chairs a router link element so that's
- 00:14:52 not beautified that's when they love you
- 00:14:53 here we turn this into a link by adding
- 00:14:56 router link to that meetup we're
- 00:14:58 wrapping it in – to be precise then we
- 00:15:01 set Q and I'll just set it to slash and
- 00:15:04 that actually is it for now I want to
- 00:15:07 give it a tag of span though so that I'm
- 00:15:09 not using anchor tag to make it look
- 00:15:11 nicer and with that I'll also add a
- 00:15:14 style where I set the cursor to a
- 00:15:16 pointer so that we again get this
- 00:15:18 hovering in fact this this pointer when
- 00:15:21 we hover over it with that now you can
- 00:15:23 see it looks like a link works like a
- 00:15:25 link you'll also notice though that this
- 00:15:27 navigation drawer again pops up so time
- 00:15:30 to
- 00:15:30 this issue we can simply fix it by
- 00:15:32 adding the temporary directive to the
- 00:15:34 drawer which basically means that it's
- 00:15:37 not always present it tries to add it
- 00:15:40 otherwise if the page loads so with that
- 00:15:42 if we now save this and let's go to
- 00:15:45 another page first and click that link
- 00:15:47 again now we're back without the drawer
- 00:15:49 opening so that's all working but our
- 00:15:51 links still aren't hooked up so let's go
- 00:15:55 back there and now I want you add some
- 00:15:58 links now for that we need to link our
- 00:16:01 list tiles and our buttons here let's
- 00:16:05 start with the list tiles
- 00:16:06 I'll wrap these items here over multiple
- 00:16:10 lines and then we can add a useful
- 00:16:13 property or directive to that can add
- 00:16:17 router to the list how to inform you
- 00:16:19 defied that a click on this should use
- 00:16:21 the router and then the queue property
- 00:16:24 to bind to something now here we won't
- 00:16:26 just pass a string instead we need to
- 00:16:28 bind to the item link add a colon
- 00:16:32 because we need to add a dynamic value
- 00:16:34 here the link of the current item if we
- 00:16:37 do this and we shrink this application
- 00:16:40 so that we can see the drawer and we
- 00:16:43 click on profile now you see the user
- 00:16:45 page click on organize meetup to create
- 00:16:48 main media page and so on so now this is
- 00:16:50 working as it should and it's kind of
- 00:16:53 similar for the tool bar there I also
- 00:16:56 want to connect the router to it so it's
- 00:16:59 on the button now I'll also organize
- 00:17:03 that over multiple lines and here to the
- 00:17:05 button we also add the router directive
- 00:17:08 and you can't add this to any component
- 00:17:10 but too many – I am components where it
- 00:17:13 typically make sense to navigate and
- 00:17:15 just as before we also need to set Q and
- 00:17:18 bind this to item linked with that if we
- 00:17:23 now reload this click on View Madhav's
- 00:17:25 you see that all seems to work fine here
- 00:17:29 get the basic setup of our navigation
- 00:17:32 was a lot of work but with that we're
- 00:17:35 now well-prepared to start working on
- 00:17:37 the individual pages and I want to start
- 00:17:40 with the home page and this caruso of
- 00:17:42 different
- 00:17:43 in the next video