Section 8 (Lesson 5/10): We’re going to work on navigation in this lesson in order to give mobile users the ability to navigate around our workplace app. We’ll build a popup navigation menu and use the mobile navigation icon in the navbar to show the popup.

We’ll be covering:

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

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

I wanted to jump back into navigation in this lesson because we don't have a way for an Admin User to be able to navigate to the dashboard. Currently, that's only available for the Company and for the Candidate.

I also wanted to address responsive design, specifically for navigation, because at smaller widths, our navbar, the design changes, and we have the little icon, the mobile icon for navigation purposes. And Group Focuses aren't the best use case for mobile, so we're going to approach that a slightly different way. Okay, let's dive in!

So firstly, let's head to the log-in page, please. Let's double-click on Button Log in, bring up the Property Editor and edit the workflow. Go to step 3. Let's add a new step for an Admin User. Right-click, copy, and then paste. The destination of an Admin User is the admin dashboard, and the value is "overview". And the conditional expression to run the step would be if the Current user's User Type is Admin. Okay, so that one's done.

Now let's go to the reusable element for the navbar, and let's have a look at the GroupFocus. So I believe the GroupFocus Menu is on the avatar itself. Here it is: GroupFocus Navigation. So it's on this dashboard Group, Group Navlink (Dashboard). Double-click that to bring up the Property Editor and then click on the button "Edit workflow". And let's do the same here. I'm going to right-click copy and then paste as a step 3. We're going to choose the admin page, v equals "overview", and then we'll change "Candidate" to "Admin" in the Only when condition.

Okay, now we need to deal with mobile navigation, because on mobile, the navbar changes to the icon, the mobile navigation icon. So when that is clicked, what we're going to do is show a popup for someone to be able to navigate. Now there are many different ways you could build mobile navigation. I prefer to use solid popups. I think it's faster with more screen real estate. I used to design them on Floating Groups that would slide up on the left, I find this a little bit not as responsibly quick so I just prefer using a popup. So let's design one, a unique style of a popup with a solid surface so it just looks like just an overlay that's easy to navigate.

So let's click down and go to our Navbar and then I want you to open up the Design tab and then choose "Responsive". So at 768 px, this is what needs to be clicked to then show a popup.

Okay, so what we'll do is this. Let's go back to the UI Builder and let's find a Popup. Click once, click it again. This is going to be called Popup Mobile nav and we're going to have a unique style here. I'm going to detach the style. And let's choose a grey color of primary contrast. So that's solid white, basically. I don't want any border and no roundness is needed.

Now I'm going to click this checkbox that says "This popup can't be closed by pressing 'Esc'" or by clicking outside the popup, same thing. And that just basically means that to close a Popup, it needs to be with a workflow. And because I'm using a Popup that's disguised, it's just a solid page, almost, I don't want users to accidentally click outside the Popup. So I've checked that box.

On the Layout tab, we're going to choose Column. I'm going to uncheck fixed width, set this max width to about 480 px. And then remove the min width, min height, don't know, I'm going to leave that for now. And padding, I just wanted a little bit less for this, so I'm going to set this to be 8 pixels all the way around. You're not actually going to see this padding just because everything is white, but this does give us a slight safety margin.

Now we're going to head over to our Avatar reusable, please do the same, because our GroupFocus Navigation has everything we need! So let's remain this time in the Elements Tree. Click the arrow to dropdown. I want you to highlight all five of these elements like so. Right-click, and then "Copy special," "Copy with workflows".

Let's head back to our reusable element, the Navbar, then open up Popup Mobile nav, and now I'm going to click inside the popup and say, "Paste special," "Paste with workflows". Great, there it is there.

Now what we need is a workflow to actually close this Popup. So I'm going to grab my text element and we drop it beneath Log out. This will say "Close" and I want this to be center-aligned. Body Medium is absolutely fine for the Sytle. On the Layout tab, I'm going to remove the min width and the min height, and I'm going to fit width to content. And lastly, put it back in the center by choosing Horizontal alignment in the center. And let's click "Make last" and now we need a bit of space here, so we don't click two buttons at once. I'm going to choose top margin of 20 px. We've got some space we don't need, so I'm going to remove the min height on the Popup Mobile nav.

Okay, now to initiate this, let's close the Popup. Let's just open up the Group Container and go find this icon. Maybe if we go to the Responsive tab it will be a bit quicker. All right, I'm going to hit 768 px. Here it is here. What is it called? Group Menu. I'm going to change this to Group Mobile menu. That's better. Now we can add a workflow on Group Mobile menu to simply say just Show the Popup. All right, so that's to Show the Popup.

Now to hide the Popup, it's Let's just click back in the Popup Mobile nav. Let's just make sure that all of this makes sense. So on the Text Close, let's add a workflow. This would hide under Element Actions, Popup Mobile nav. And let's just look through each of these as well. So, when Button Log out is clicked on the far left, we log the user out. We don't need to hide the navigation. Instead, we hide the Popup Mobile nav and then we're going to the page log-in. Perfect.

When Group Mobile menu is clicked, we're showing the Popup. Okay, our nav link for the dashboard, earlier on, we added this Admin step, that's done. When Search is clicked, it goes to a search page, and when it Close is clicked it hides the Popup Mobile nav.

Okay, so let's go back to... let's go to our index page to test this out. Previewing the page and first of all, if I click on "Dashboard," it will take me to my admin dashboard. Great! I'm going to click back.

Now for mobile, what I'd like you to do is we need to change the page width, so set a mobile width. So if you are on a Chrome or Chromium-type browser, you can right-click and choose "Inspect". Okay, so yours might look a little bit different, I suspect a slightly different color. If you don't see this bar across the top, what you need to do is click this icon up here. I'll zoom in so you can see it and this basically toggles the device toolbar. And from here, I can just click on, let's go 375 px. Now, I can click on this icon and there is our navigation. So we can close that or come back and click on "Dashboard".

Now, we don't have enough time and also because this is a beginner's course, we don't have enough time to cover making dashboards mobile responsive. And for the most part, a dashboard is something you would use on your laptop or your desktop. It's usually work-involved.

Now, who would use a dashboard on mobile? Well, it would be the Candidate, so that is kind of realistic. And if you want to learn about making dashboards responsive, you can go to Buildcamp.io and look at my other course called Flexcamp. That is a masterclass in responsive design, and we go through quite complicated dashboards and make them all mobile responsive. But there is also another option here. Let's have a look.

If I bring up my Property Editor for the page, we see here that Bubble has provided this dropdown that says "Mobile version," and then it's asking us to choose a page. So if I was on the candidate page, I could make this responsive, fairly technical, but it is possible. Or, I could actually redesign a... I could create a new page, redesign the page, call the page "candidate-m" or "candidate-mobile", and what Bubble does is it detects what device a user is on, and then routes them to the correct page. So if I were to link in this new page called candidate-mobile here, basically we would have two pages. One is a desktop-designed page, the other is a mobile-designed page, and Bubble will simply route them through to the correct page.

That is because sometimes it is tricky trying to make a particular page responsive because data-heavy pages sometimes need to be redesigned. For instance, I look into my Stripe dashboard for payments every day and I have a look at payments, I look at disputes, I have a look at reports; there is a lot of data on those pages, and Stripe themselves don't have mobile-responsive pages. They basically have a min-width and with a scroll bar at the bottom for you to view the data but it's not a great experience on mobile.

So what Stripe did is they created an app. Now, I've downloaded the app on my phone, and it is far more basic, much less data, but just enough data for me to use my phone to be able to see, oh I had this many sales, oh, well I can refund a person if I need to. I can download some reports, basically. Just very simple reporting. And the lesson I'm trying to get across here is instead of fighting sometimes with data-heavy pages, sometimes you will actually need to redesign them for mobile if you expect your users to want to access them often on mobile, which perhaps our Candidate needs to do.

I want you to just go back to the Navbar reusable element, so open up this Popup Mobile nav again and I'm just going to remove the top padding here just so it's positioned. I'm just going to add a zero just so it's positioned a little bit higher. You can see that when it was initiated, it was slightly a little bit lower down. That's okay, this is how I do my mobile navigation.

Okay, so that is navigation sorted, we've redone the workflows, we've talked about responsive design, and I think we can end this lesson here because when we get back, we're going to start just looking at some optimizations. There are a few other things I'd like to talk about, a few bugs I'd like to fix as well and that's going to be super fun and relaxing so I'll see you in the next lesson.