Section 7 (Lesson 2/8): In this lesson, we’re going to build our internal navigation using a new container, which is called a GroupFocus. This will let us click on our avatar in the nav bar to show a custom-designed navigation menu.

You’ll also learn about:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Okay, we're going to do it now: we are going to build our internal navigation using a new container, which is called a Group Focus. Let's jump in!

So I gave you a quick preview of the internal navigation component, which is called a Group Focus. So what I'd like you to do, please, folks, is open up your Navbar and "Edit element". And I'd like you to look for basically the Group User. So this internal navigation we're building is for a logged-in user where they can click on their avatar to then reveal a Group Focus navigation system.

So this Image Avatar, if you double-click on the Image Avatar and you bring up the Property Editor, we will only ever be using this internal navigation system for logged-in users. And this Image Avatar is in multiple locations. The avatar can be found on the index page when a user is logged in and it can be found in their respective dashboards.

So what I'd like to do is this. I'd like you to please go to Edit and Convert to a reusable element. We're converting the Image Avatar to a Reusable Element because we need to use it in multiple locations, and we're going to build the internal navigation system inside the reusable element. Let's name this "Avatar". Okay, don't forget, if you want to get back here, it's under the reusable elements section. Great!

So let's just, first of all, sort out a few bits and pieces here. So if we just go back to the Navbar for one second, we just want to check on the size of this image element. So you can remain where you are, I'll do this work for us. So on the Layout tab, we have 40 pixels. Fantastic. We're going to go back to the Avatar reusable element and bring up your Property Editor and I'd like you to change the layout here. It can remain fixed, okay? But I wanted 40 px by 40 px. This image element here, I'm just going to put it back inside. This also needs to be 40 px by 40 px. Just make sure that that is neatly positioned. So currently, the reusable element is a Group. That's absolutely fine. And inside the Group, we have our Image Avatar.

Now, what I like you to do is scroll down to Containers and find yourself a Group Focus. Click once. And just click again inside the Image Avatar. It's going to position this Group Focus in the top left-hand corner. And the reference element is going to be Image Avatar. Now, you can see how it's basically pinned to this Image Avatar.

Let's first change the color of this, please. Let's choose our primary contrast. For the roundness, let's choose 8 px. Over on the Layout tab, column will work well. Let's choose a min width - let's actually choose a fixed width for this of 240 px.

Now, I would like the right-hand edge to be flush with the right-hand edge of this Image Avatar. So what we'll do is on the Appearance tab, we need to offset on the left. Now, in order to know which direction to go in, we first have to put a number in here. I'm going to try minus 200. I'm going to now push it down, maybe about 6 pixels. And what I'm going to do is on the border style, I'm going to choose Solid and then the border color. Looking good. And let's choose a slight shadow, so we're going to choose outset. We're going to choose a blur radius of 8 px for this. Spread radius of 2 px. Just a creative choice. Box shadow color. We're going to first start with our dark text color and then change that to 10%. We'll only really see the effects of that once this is up and running.

We're going to rename GroupFocus A to GroupFocus Navigation, and now we need to actually run a workflow to show this GroupFocus because it's hidden by default. So click back on Image Avatar and click Add workflow. And now we're simply just going to go down to Element Actions and Show. Actually, slightly better way to do this would be Element Actions and Toggle, because this is something you've not seen before, I suspect. So Toggle what? Toggle GroupFocus Navigation. And what Toggle means is when we click Image Avatar, if GroupFocus is not showing, then it will show it. And if GroupFocus is showing, it will hide it. So it does the direct opposite! So Toggle is really useful.

You can see it's pulled back up here for a second, that's okay. We're going to be designing it very shortly. Another thing we need to do here is on the avatar, I'd like you to add a type of content here because this image actually needs to be dynamic. We don't know which person is logged in and which data we need to refer to, so we have to configure that. So we're going to choose User. And then I'm going to click on the Image Avatar itself, and instead of the Current User's Avatar, we're going to choose Parent group's User's Avatar because now we're going to be referencing data from the reusable element. We're going to be pushing data into that reusable element wherever we drop the reusable element onto the canvas. I'll explain a little bit more later on. So Parent group's User's Avatar as the dynamic image, because the avatar, which is the reusable element, has Type of content User. I'm just going to see if I can quickly fix this. Let me just refresh the page. Okay, I managed to recenter it by refreshing the page.

Let's design this element now. Padding, let's use 20 px all the way around. That's our internal padding. And now grab some text, drop it inside, type "Dashboard". Now you'll notice we're not using link elements because remember, link elements are only useful for public-facing pages. It's a way for Google to tie together your internal link navigation. When a User has signed up, you can still use a link if you want, but I actually need to use conditional statements here, so I'm choosing to use just a standard workflow on a Text element or a Group. So that's our Dashboard. I'm going to remove the min width and I'm going to remove the min height.

Let's now find ourselves a Material Icon. Now this needs to represent a dashboard. So I've type "Dash," and let's use one of these icons here. Actually, this one in the far right. So "space_dashboard.out". Going to use our charcoal color. And on the Layout tab, we're going to use 24 px by 24 px. Okay, we want these next to each other, of course. So highlight Text Dashboard. Actually, I'm going to highlight the Material Icon first and then Text Dashboard, and now I'm going to Group elements in a row container. I'll call this Group Navlink (Dashboard).

Okay, on the Layout tab, I'm going to remove the min height. Now on the roundness on the Appearance tab, please add 8 px. Background style, change flat color to our primary contrast. We're going to be using conditionals to create a hover effect with the mouse.

Now back on the Layout tab, first of all, some gap spacing, please. Let's try 12 px here on the column. Too much? Try 8 px. That works. Okay, we need a bit of padding around it, so let's try 8 px all the way around. Might be too much. Let me have a look. No, I think that works well.

Now, this Text Dashboard is not centered, so I've clicked on Text Dashboard and I'm going to choose vertical alignment in the center. Okay, that's a bit better. And on the conditional tab, let's do the following. Let's say that when "This Group is hovered," then let's change the color. Let's change the background color to our Surface color.

A neat little feature that you might not be aware of is on the Appearance tab, we're going to change the animation of this text transitioning from from this current color to the Surface color. And to do that, we'll go to the bottom of the Appearance tab and we click "Select a property to define a new transition". Going to choose the "Background style" because on the Conditional tab, we've got the background color. It's a background style, and I usually find that a noticeable transition animation starts at around 250 ms, so that's what I like to use. And you can play with these settings here, but we're just going to use Ease. Let's actually reduce the padding here. Let's choose 16 px all the way around. Because 16 plus 8 equals 24. I think that's a nice bit of spacing around everything. Okay, I'm happy with that. Let's copy and paste and do a few more!

I'm going to highlight that, I'm going to choose Command+C, Command+V on Mac. I'm going to say, "Search" for this one. Maybe we can say, "Search jobs". I'm going to type "work" in the Material Icon Property Editor to search for the briefcase icon. There it is down there. Okay, let's do another one. Say "Blogs" for this one. And I'm guessing we need maybe an article for the material icon. There's the one on the right-hand side.

What else do we have? If we go back to my navbar, I'm just going to remind myself what the navigation links are- okay, let's change these to "Browse jobs," "Blog," and "About Us". Fantastic. Copy and paste using the keyboard shortcut. Now, obviously, the Blogs and About Us aren't going to go anywhere, right? We're just doing a bit of design work, having some practice here. I need something that represents a building for the About Us icon, and I don't actually know what it's called, so that looks like a bank, I'm not going to use that. Is that a building? I think it might be, but because I've copied and pasted, I don't actually know what the shortcut is. Find any icon here! Press pause here and find any icon you like! Not that important.

Lastly, we're going to grab a button. Drop that in. All right, let's push it to the top. Let's type "Log out," and I'm going to change this to a tertiary button. No, I'm not. I'm going to change it to a secondary button. Yes, that's better. On the Layout tab, I'd like edge to edge, so uncheck fixed width, remove min width, and the height of this, let's choose 40 px. And then "Make last" once you're done with that. All right, and in this rare occasion that I need just a bit of space between 2 elements, I'm actually going to just use a margin here. So add a top margin of 12 px. Very nice!

Okay, let's sort out the workflows. So add a workflow on Button Log out. Go to Account, Log the user out, and then let's hide (under Element Actions) Group Focus Navigation. And if someone's logged out, of course, we need to take them somewhere because they could be in their dashboard. It doesn't look good if you log them out and then the screen starts to change, things start to be hidden by privacy rules, so let's navigate them: Go to page and then go back to page log-in.

Now for the workflows for dashboard. So I'm going to add a workflow on Group Navlink (Dashboard). And the first one I'll do is Navigation --> Go to page and let's do the company first so "company" is the destination. The data to send is the Current User's Company. I have to send page data to the company dashboard. Let's send more parameters. So "Overview" is where we want to land, so v = overview.

Now, we need the conditional statement to differentiate between the three types of Users here. Now, we don't have the admin dashboard, we're building that in Section 8 next week, so we'll come back to this to finish it off, but let's just sort out the candidate routing as well using the conditional statement. Okay, so let's just also go Navigation --> Go to page in step 2. For this, we'll go to the candidate page or the candidate dashboard. Now, v = account.

In terms of the conditional statements, very simply, each User has a User Type. So let's use that User type to distinguish which steps should run here. So only when the "Current User's User Type is Company," then Go to page company. I'm going to right-click copy expression, and then right-click paste expression in step 2, and then change "Company" to "Candidate" in the Only when condition. I just want to remind myself what the parameter needs to be for the candidate. Okay, definitely Account, so v = account. And on the company, it's overview, so v = overview. Perfect.

And Browse jobs, this could have been a link, but it doesn't matter. Again, this is a logged-in view. We're going to add a workflow on Browse jobs. Navigation --> Go to page and "search" is the destination page. And that's all we're going to do for this internal navigation but we are going to also sort out the mobile navigation as well.

Now, in order to use this reusable element, let's go back to the navbar and let's go find the Group User. There it is there. So what I'm going to do is I'm going to leave that there a second. I'm going to scroll down to Avatar under reusable elements, click once and then drop it inside Group User. There it is there.

Now that that's inside, it's asking for a data source. So remember, we set a type of data on the reusable element, and we changed the data source for the Image Avatar from the Current User's Avatar to the Parent group's User's Avatar. So this is why we did it, so we can feed data through from basically where we are using this reusable element, such as in the navbar!

Okay, so the Data source is going to be the Current User because it's expecting a User data type. Now we can delete this one here, this Image Avatar, because it's static, it's not doing anything. So because this is Current User, if I edit the element, it is referencing a type of content of User, and we're sending through the Current User and then because this is basically a layer, we are then referencing the Parent group's User's Avatar and we know that's going to be the Current User because we've just configured it in the navbar!

So that's all we need to do on this page. But why don't we go ahead and test this? So I'm going to go back to index and then preview the page. Okay, so this is working and if we hover, the mouse pointer changes to a hand. And if I click, there we go! And we've got our little shadow around it, which looks pretty good! So I could log out and do what I need to do. Look at this hover effect. Very, very nice. Let's go to the dashboard. There we go, and we landed at Overview.

All right. Hope you enjoyed that. Finally, we got it done and I'll see you in the next lesson!