Section 3 (Lesson 2/8): We’re going to focus on the layout of our company dashboard in this interface design lesson. We’ll build a navigation menu on the left and a navbar at the top.

Key highlights include:

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

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

Diving straight in. The first thing we're going to do is create a new page and call it "company." I'm clicking on the drop-down, heading down to "Add a new page..." and naming it "company," all lowercase. We're not going to clone this page. Okay, let's bring up the Property Editor, please, and let's just sort out some of the page settings.

First thing we'll do is give this a page title: Company | Workplace. Now this company name, where I've typed Company, that will be dynamic later on in the section. So the first company we're signing up is called "Orbit." So the company will be replaced with the company name Orbit.

Over on the Layout tab, let's change the alignment to Column. Let's set the default builder width to 1400. We'll leave the min height as is, that might change later. Okay, so the first thing we'll do is design our left-hand Floating Group menu. So down in the visual elements, in the container section, we're going to find a Floating Group, click it once, and just drop it on the page. Let's call this "FloatingGroup menu."

So you can see we have some different options here. So float vertically relative to the top, and horizontally to the left is what we want, but we have options to float from the bottom and to move this around. But this is going to basically stretch top to bottom. We'll set that up in a second.

Let's just edit the style of the Standard Floating Group, which I've actually gone ahead and done. What we want to do is change the background color to our Surface color, okay? Surface color. That's all we're going to do for now.

Back on the Design tab, I'm going to scroll down. I'm going to check to "Define each border independently," because I want a right-hand border here. And don't worry, in a second, we'll see the FloatingGroup menu snap to the bottom, stretch to full height. So border style, right, solid, I'm going to change this to our borders color. Fantastic.

Let's sort out the actual layout here, so on the Layout tab, I'm going to set this to a column, top to bottom. We are going to have a fixed width, okay? It's going to be 280. This is just a creative choice. In the past, I've designed dashboards at 320, 160, 80 even. It really depends on the type of data you're working with. If you want more space in the right-hand side or less space, entirely a creative choice.

Okay, so now we're going to uncheck "Fit height to content" and let's see the behavior. So it's stretching top to bottom and it'll just remain fixed into position. We can remove the min height because we're not using it. Let's set up some padding as well. Let's choose 32 top and bottom, and let's choose 16 left and right. Looking good!

So now we need our logo, or the company logo, in the top left-hand corner with the company name. So that's obviously going to be an image element. We're looking for an image element at the top, here it is, and I'm just going to draw in a basic shape. This will be renamed to "Image Logo," and for now, please just jump into your resources folder. We're just going to upload a static image so we can continue with our design work. Go look for the logo called "Orbit.svg."

Okay, let's just fix the layout. So Layout tab, we're going to change the width to 32 pixels. And then we're going to check "Keep element aspect ratio fixed." Done. Very nice.

Back in the Appearance tab, let's just round off these corners with 8 pixels. Looking really good! So this will obviously change to a dynamic image once a company user signs up and we complete our company form.

Let's grab some text, please, because we're going to add the company name. Just drop it beneath it for now. Type in company name. Let's type the word "Orbit." Again, this will be dynamic when we have a logged-in user with a real company. Let me change this to Body Large, and I'm going to change the weight to Semi Bold.

Over on the Layout tab, I'm going to remove the min width and the min height. Now, I want Orbit to the right of this image, so I'm going to click on the image, I'm going to hold down shift, click on Orbit, then right-click and say "Group elements in" --> a "Row container," right. Row container. There we go. We name this to "Group Brand." And we need some space between the logo and the word Orbit, so I'm going to add some gap spacing, and on the column, I'm going to choose 8. And let's close down this group now because we have too much height. So towards the bottom, we have the min height. I'm just going to press backspace and delete the value in there. And finally, to finish this off, I'm going to click on Orbit and say, vertically align in the center, please. Fantastic.

So you see that we have a lot of space for a longer company name, and later on we'll talk about strategies for super long company names. Maybe the company has three words. What happens then? So we'll create some interesting logic to reduce the text size based on the number of characters.

Now we need our navigation buttons. So we had Overview, we had Jobs, we had Candidates, and Settings. So let's set up the first one, and then we'll just simply copy and paste!

So I'm going to grab a Material Icon, first of all. Just drop it in anywhere. Big old smiley face. Let's type the word "home," and then I want to use the outline icon. Let's change the icon color to our charcoal color, remove the roundness, and on the Layout tab, we're going to choose 24 by 24. Lovely.

Now we need some text. Here is my text in the Visual Elements section. Let's drop it in and type the word "Overview." On the Layout tab, let's remove the min width and the min height. Now we need to group them in their own row as well. We want them to basically look like buttons. So I'm going to click on Material Icon, click on the text, right-click, "Group elements in" --> a "Row container." Now I'm going to name this "Group Navlink," and then in parenthesis, I'm actually going to type "Overview." So sometimes there is a need to give a group a specific name, and that's because it's clickable. And the clickable elements show up in the workflow section, which we'll get to very soon in the next lesson. And sometimes we want to be able to distinguish between which navlink: is this an Overview navlink or a Settings navlink...? We want to distinguish which one is in the workflow section, and all we have is names to go on.

So we're going to use unique names for these clickable elements. I'm going to set a fixed height because that will never change. I'm going to set it to 48 pixels. Fantastic. Now I'm going to add some padding to this. I'm going to say 12 and 12, left and right. We don't need padding top and bottom because it's a fixed size.

Let's finish setting this up. I'm going to just detach the style for now. You can go ahead and do the same. Background Style, let's choose flat color. And instead of white, we're going to match the color of the floating group, which is the surface color. And we'll cover why this is useful in the next lesson. I'm going to choose a roundness of 8. No border style.

Okay, let's center these elements. So let's click on MaterialIcon home.outline, head over to the Layout tab, and vertically line in the center. Let's do the same with Text Overview: layout tab, vertically align in the center. And then We need 8 pixels of gap between. I'm going to click back on Group Navlink (Overview), and then apply gap spacing between the elements on the column is going to be 8. Okay, looking good!

Because we have left and right padding of 12 and 12, I'm going to do the same on the Group Brand, okay? Don't forget, you can navigate to certain elements up here. You can also do it on the left-hand side in the elements tree. Group Brand. Fantastic. So now we're going to choose left and right padding of 12 and 12. Everything then lines up really, really nicely.

Let's add some gap spacing on the FloatingGroup menu itself, so check the box and let's choose some row gap of 32. Things are starting to take shape! So we need three more, so I'm literally going to use my keyboard shortcut on my Mac and go Command C, Command V. I'm going to rename this instead of "Overview," it's going to be "Jobs," and I'm going to remove the word "copy."

Let's go find a briefcase for this Material Icon. So I'm going to type "work," and here is a briefcase outline icon. We want the same style, so if we're using outline icons, that's what we have to go find. Instead of the word "Overview," in the text, let's change it to "Jobs." That looks really good!

So now please highlight Group Navlink (Jobs), hold down shift, do the same with Group Navlink (Overview). We need to group these together. So group in a column. I want them closer together because they are like elements; they have a similar function. They need to be closer together. Put them in a column. Rename this to "Group Links." We don't need any gap spacing because there's already enough here. Okay, let's finish this up.

So we're going to copy and paste Group Navlink (Jobs). Change it to "Group Navlink (Candidates)." And then let's go look for an icon that represents candidates. I'm going to type in "users." So that didn't work. Let me scroll down, and this is quite a vast icon set. What I'm looking for is a group of users, which I'd assume it would have been called users, but maybe the Material Icon is called something else. Let me just speed up this part of the video so I can find it. Okay, so it's called a "group." Got there in the end. And second to last one for me, it might be different for yours, but we want an outline design and a group of some people. Okay, let's change the word "Jobs" here to "Candidates." Fantastic.

One more: "Group Navlink (Settings)." This needs to be a cog icon, so we're going to type "settings." And we should have an outline icon here. There it is there. Remember, you have access to my Editor if you're unsure of what these are. This is going to be called "Settings." Fantastic. And we'll get to the functionality around clicking these and navigating in the next lesson.

What I'm going to do is add a little bit more space between the icon and the text, it's pulling to the left a little bit. So I want to show you another method here. We can actually highlight all of these together, holding down shift. Then I can go to Layout and I can change the column gap to 12. So we can basically bulk edit from a design perspective. That looks a bit better. And because we've added more space there, let's do the same in Group Brand. Just add 12. All right, so there is a little bit of space. Well, I should say a fair amount of space here. Yes, we need some space for dynamic company names, we don't know how long those will be, but I still think we have a lot of space to work with here. So let's actually change the min width to 260 instead of 280. It just feels a touch better.

Let's now just drop in a very simple FloatingGroup Nav before we take the break. So Floating Group, drop it in. Let's rename this to "FloatingGroup Nav." This is going to be a column. Now we want it positioned at the top, so I'm going to remove the fixed width, so it spans edge to edge. I'm going to remove the min width. I'm not using min width for this navbar. I'm going to set a fixed height of 80 pixels, 8-0. We've got some overlap happening here, so this is where we'll use some margin. So because this is a fixed width of 260, we can simply add some margin on the left here and say position this Floating Group at 260 pixels in, and therefore we have no overlap.

Now, I want the color to be different on this guy, so we're going to choose background color, choose our solid contrast, and let's just give it a touch underline here. So check "Define each border independently," find the bottom border style, choose solid with your border color. Okay, so this will remain in position and content will scroll underneath it.

Now I want to add just the user's avatar on the right-hand side. So I'm going to choose, I'm going to look for my image. I'm going to draw it inside the Nav. And just head over into your resources folder and let's just upload a static image for Hana. All right, Hana Li being uploaded. Let's change the name to "Image Avatar." On the Layout tab, let's choose 32 on the width, and then check to keep the aspect ratio fixed. Now, I want this on the right-hand side. There it goes. So I've chosen the horizontal alignment on the right. And then in the FloatingGroup Nav, I'm going to position content alignment in the center.

Now, I'm after some text for the logout flow. So I'm going to drop some text inside the FloatingGroup Nav. I'm going to name this "Text Log out" and type "Log out" in the Appearance tab. I'm going to remove the min width. I'm going to say fit width to content. Watch what happens. So the text element itself, which is different to the text inside, the text element has shrunk down to fit with to the text content. I'm going to remove the min height.

Okay, now we need "Log out" on the right-hand side as well, so what I'm going to do is I'm actually... Yeah, so we can do that. So I pushed it to the right-hand side with horizontal alignment, but actually we need both of these in the same group, so we can put them next to each other on a row layout. So I'm going to choose Hana's image with the Log out, right-click, "Group elements in" --> a "Row container." And we are jumping around a little bit here. That's okay. We're going to fit width to content. Pushes it back to the right-hand side where I wanted it. Let's rename this to "Group Actions." We're going to on the Layout tab, we're going to add some gap spacing. Going to choose 8 here and I'm going to remove the min height. Okay, almost there.

And then on the to "Log out", the text piece, on the Layout tab, let's choose vertically align in the center. Now, she's all the way to the very, very right, so why don't we add some padding? So let's choose right padding 32. Yeah, I like that. Maybe we can make her image slightly bigger before the break, so let's just choose 40, 4-0. And one more thing, let's change the column gap to 12. I'm guessing when I wrote 8 here in the column gap, you're probably thinking to yourself, Greg, I know you're going to change it to 12. But it may look like a small change, but it becomes consistent throughout this app build.

Okay, so we can call that the scaffolding. We've laid the groundwork for the layout of our dashboard and when we get back, we're going to look at how we click on these navlinks and then use the URL parameters to show the correct view in the dashboard area. I'll see you in the next lesson.