[00:00] Welcome back, all right. So we have two pages in our project here. Let's add a way to switch between the two. So we'll start off by creating a new view. And actually before that, we'll actually create a new folder. So in our project browser here, I'm going to select the views folder which does switch us back to the home of the perspective module, I'll right click on views, and let's create a folder. Let's call this navigation. I'll click create folder, and then with that navigation folder selected, let's create a view in there. So I will right click, I'll select new view, let's call this Top Nav. I'll set the root container type to flux, and I don't need a page URL. This is not going to be a primary view so I can leave that unchecked for now. I'll click the create view button, which will take us over to our newly created view. Okay, so as far as navigation goes and perspective, you do have a number of options.

[01:04] What I want here though is I would like to actually have a sort of top Docked View that sits at the really the top of any of our pages. And that view will have some sort of interactions that the users can click on that will handle the navigation. So we'll use a built-in component for that. If we head over to the component panel here and I'll actually collapse everything, just to show you we do actually have a category of just navigation based components here. So I'll actually grab the horizontal menu. And when I drag it over into the container here, as the name implies, yeah it's just a horizontal menu effectively. All right, so we know how flex containers work, I don't plan on putting any other components in here right now. So I'll go ahead and get the panel out of the way here. So with this component selected, let's set Grow to one. I'll hit enter. Now I do, like I said earlier, I do like to resize view so they're somewhat similar to how they're going to look in the session, but I'm going to intentionally leave this pretty large right now just to kind of show you something later on.

[02:01] So without messing around with the settings on this component, we'll come back to it later. Let's go ahead and actually try to get, create a Docked View and use this component. So what we'll do is we'll head back to the home of the perspective section here. So I'll click on the leftmost tab at the bottom. All right, so I've been talking about page configuration in a couple of these videos so far, but I haven't really done a whole lot with this sort of large structure here. So this large structure here basically allows you to define Dr. Views. So you can put a view on the Northern edge of the page or the Southern edge or West or East, and you can do it per page. So for our history page here, we could have that history window we created with the power chart as the primary view, and then we could add like a docked view to the North and the South, or what have you. Now, the first thing that was selected, the shared settings as the name implies, if you configure a dock here, then it gets applied to all of your pages. So I think that's what I actually want to do. I want this view to be available to all the pages we end up creating. So with shared settings selected, I'll go to the little ad area here, I'll click on that, and then we need to go and find which view we want to dock to this particular position.

[03:11] So in our navigation folder, we do have Top Nav I'll select that and click okay. And that's really all we have to do to get a Docked View. Let's go ahead and save our project, and let's get a session open. So I'll go to tools, launch perspective and launch session and my browser opened off screen. So let me move that over, and there we are. So we do have our little Docked View at the top here you can see. It does actually have some built in navigation. So starting with the leftmost item if I click on menu item, it gives me this little sub item, if I click on the second one, it does actually open up a new tab and go to some other website. So Google in this case. So, all right, cool, it already has that kind of baked in navigation, we just need to modify it. So instead of going to an external URL, we go to a different page.

[04:01] All right. Now notice the size here too, right? So if I switch back over to that Top Nav in the designer here, right? There's a little bit of a size discrepancy here, right? So the view is actually, what does that 800 pixels tall? It doesn't seem like it's 800 pixels here in my browser. And the reason for that, if we go back to the dock or the dock configuration, so if we go back to the home of the perspective module here and for share settings here, which is selected already, for Top Nav and click the little pen icon here, which basically allows us to further edit the Docked View. So there's other things we can do to it. So we can kind of change how it behaves, we can have like a handle, we can make it hide, stuff like that. The size property is what's going on here. So it's set to 150, and this is always based off of the edge that the view is docked at. So top and bottom, this means size correlates to height. So if it's on the the West or the Eastern edges, then that would be width. So this is basically setting our Docked View to 150 pixels in height. So we can actually reduce that.

[05:03] So how about a 75? So I'll click okay here, and if I save my project is going to happen real quick off screen here, but it will go ahead and automatically resize itself. So it looks a little bit better. I think I'm okay with 75 pixels. So the big point of that was basically to show you that regardless of what you have your view sized as, the dock configuration here does have a setting that basically overrides that. So let's go back to our Top Nav here, and I do want to resize. It does look a little silly this big. So I'll go ahead and resize the whole thing about 75 pixels, it doesn't have to be perfect but that's fine right about there. All right, and let's change some of the menu items here. So I'm going to select the horizontal menu. So I'll just click on it there, and we can look in the property editor here. So under the props section or category here, there's this items array over here. And so each one of these elements correspond to a top level item you see on the component. Now these last two, I don't really need right now.

[06:01] Right now, we really have two things to navigate to within our project. We have the overview and then we have the history with the big chart. So I don't necessarily need these last two items. So for item three, I'm going to right click on it and I'll select delete, and I'll do the same thing for item two. There you are. So we have just these two. Now these two behave a little bit differently, right? One has like a down menu and then one is just a effectively a button, right? It just, the thing we click on and then it automatically does some navigation for us. So let's start with the link to Google there. So that'd be item one. So it's going from left to right, as you can kind of tell as we were deleting items here. So if you look at item one here, we can see that the target is set to an external URL. Which is why it took us to a different website. So you can actually replace the target, and if you have her on the tool-tip there, it kind of gives you a little hint. But yeah, if you use a URL, it takes to an external website or you can actually use a path to a page. So when I need a path to a page if I go back to the home section here, I keep talking about what the actual page URL entry is like slash or slash history, this is what it's talking about.

[07:05] So if we put slash history in as the target, it will know, oh, okay, within this project, there's a page called history or slash history, navigate to that, right? So that's actually what I want to use for the second item. So back to Top Nav for me, I'll go ahead and select the horizontal menu again, I'll go back to item one, so I can replace target here. I can delete all that slash history. I'll hit enter there. And it's actually changed the text too. So instead of the label saying link to Google, just history and we'll hit enter. Now I want to do something very similar for this first item here. The first time, it should just take us back to the overview. Now, the first item I'm going to collapse item one just so I don't confuse myself here. I'm going to expand item zero, since that's the one we're going to be looking at. So the reason items zero is the sort of, if I go to preview mode here, is a sort of a multi-tiered list of things here, that's because if we look at the item zero here, it has its own nested items property.

[08:06] You can put an item inside of an item basically, and that's how it gets sub menus or sub items. Now, I don't necessarily want to do that in this case. So for items, zero items, I'm actually going to get rid of this sort of nested zero here, right? This inner nested zero. So I'm going to right click on zero here, and I will delete that. There we are. So there's nothing under items anymore. Okay, so I want to go to the overview. Now, target is blank here, and you kind of saw it from the the tool tip again, but basically if a sub item is defined, then we basically ignore what the target is for this particular item. So we needed to get rid of that stuff at first. Now the target here, if I want to go back to the overview, the overview is just our initial or our first page, which is just represented with a slash. And again, let's change the label here. So we will just like all the texts in there, and how about just a overview I'll hit enter and there we go.

[09:03] Okay, let's save our project and move my browser back over. All right, so we do have our updated, little menu, horizontal menu component there. If I click on history, it takes us to the history page. We go back, click on overview, it takes us back to the overview. There we are. So as we continue to work on this project here, if we want to add new pages, we can just add them to this component here. Now for the last thing, there is this little icon over here and I did want to talk about that, I did want to show that somewhere. So if we go back to this horizontal menu component in the designer here, let's look at item one here. Since that actually has the icon, there's an icon area here or object and we can see that there is a path to an icon defined. So inside a perspective we do actually include a library of icons you can use. So really small, simplistic kind of SVGs that you can kind of embed in place wherever. There are several components that can actually use icons. So we do have, for example, we do actually have a dedicated icon component that you could use here, but a lot of the other components allow you to sort of add on an icon somewhere.

[10:06] So now's a good time to basically talk about how icons work. So the library of icons we include as the material library. I will include a link to this page here, but let me switch over to a web browser so I can show you the library. So all of the icons listed on this page here, you actually have access to within perspective. You simply need to type in the name into the appropriate icon path property. So right now we're using like a little link on history here. So it looks like it's using the link icon, which if I were to search this page, and we'll do whole word here. So it looks like it's just using that. So let's pick some different icons here. So for the overview, let's see, there should be a little home icon, there we are. So we can actually just use home. So the way that works is it's the name of the library, slash and one of the icon you want to use this. So if I were to move this back out of the way here, if I go to the overview, we can go to icon, there's no path.

[11:05] So you saw it earlier with the item one, but we can just type material slash and then whatever the name of the icon is. So in our case home. I'll hit enter, and there we are. We have that little icon right there. Now for history I don't really want the little link there. So maybe do believe there's a trending. Let's do not toll words. Yeah, there we go, we'll do a trending underscore up, right? So we'll go ahead and change the path here, not for items zero, we'll do for item one, we'll change the icon path instead of using a link, trending underscore up, hit enter, and there we go. Okay, so that about wraps up this video here. Let's make sure we save our project, since we made some last minute changes there. Now in the next video, we'll go ahead and get started on the details view. So I'll see you then.