So now I want to go ahead and I want to create this organization sidebar component right here. So in order to see that you're either going to have to be in desktop mode or if you are like me and you keep half of your screen with code, you can zoom out so you can see what you are developing. And also I didn't forget about this little issue that once we create an organization and we click skip, nothing happens, but I am going to try and resolve that later in the tutorial. For now, I'm just going to focus on wrapping up our layout. I do definitely have a couple of ways we can fix that, but most of them include changing our layout a bit.
I mean, when it comes to routing, right? But before we go into that, I just want to focus on wrapping up the organization sidebar our navbar and start creating some boards here. So let's go ahead and find where we have organization sidebar so that is inside of dashboard underscore components organization-sidebar.psx. So let me zoom out even more here so I can see both of them at the same time and now let's go ahead and let's import link from Next link and let's also import image from next image. Let's also go ahead and import poppins from next font Google and let's leave it like this for now.
And now let's initialize the font using the Poppins import from Next Font Google. So subsets for this are simply just going to be Latin and weight is going to be 600. Like that. And what I want to do now is I want to display the text and the name of my application right here at the top. So I'm going to remove the back BG color red.
I no longer need that. We know how this is supposed to look like now. And inside, instead of rendering org sidebar, I'm going to render a link component, which we added. Let's give it an href property of an empty string. So an empty path like that.
And inside let's add a div with a class name of flex items center and gap x2. And then in here, I wanna render a image component and I wanna give it a source of slash logo.svg. So basically the same thing that you use inside of the loading component, right? Slash logo, SVG, whatever you've used there. And let's give it an out of logo.
Let's give this a height of 60 and a width of 60 as well. So now we should have the logo of our app right here. And just besides that logo, I'm going to add a span element and I'm going to write the name of our application. So whatever you want it to be. And let's give this span a class name and let's add CN from libutils.
So just make sure that you add that. So we can dynamically append this font class name here. So first let's write some default classes which are font semi bold and text to Excel. And then we can add font dot class name here. And that will change our font.
There we go. Perfect. So now inside of our organization sidebar, I know it's a zoomed out. So let me just expand a bit and zoom back in. There we go.
So you can see how this looks like now. This is our logo right here. Perfect. So what I wanna do now is below it, I wanna add an organization switcher so that we have another way of switching the active organization and also a better indicator of which one is active because this opacity by itself is just not exactly visible right so let me just zoom back out so I can see both of this for me and outside of the link component here we're gonna add an organization switcher from Clark next.js so just make sure you add organization switcher from Clark next.js and that's gonna be a self-closing element like that. And already you should be seeing something here.
So let me zoom in. There we go. You can see how now we can switch between different organizations and we can also create an organization from here. So what I want, and we can also trigger this manage organization as well like this. But what I want to do is first, I want to hide my personal account.
So we're not going to be working with personal accounts for this app. I only want organizations. So we can do that quite easily by adding a prop hide personal like that. So now when I expand here, you can see that, let me just refresh. There we go.
You can see how it no longer has my name here. It only works with organizations. Great. And now let's go ahead and give this a better appearance prop. So go ahead and expand this object and let me just expand this so you can see clearly.
Let's focus on the code for now. So we're gonna target the elements. We're gonna target the root box. We're gonna give it a display property of flex. We're gonna give it a justify content property of center, align items property of center as well, And width of 100%.
So yeah, I don't know if you knew that, but you can style clerk components, both the login, logout, all of those things, you can style them. They have the appearance prop and it can target pretty much any element that you want. So what I'm doing here is I'm just giving it some width and some, you're going to see now some borders, just so it looks a bit better in this, organization sidebar, because right now it looks fine, but I want it to have a bit of a border, right? It just looks too plain staying here. So let's go ahead and just add an organization.
Which one is this? Organization switcher trigger component. Let's give it a padding of 60, sorry, six pixels. Let's go ahead and give it a width of 100%. A border radius of 8 pixels.
And let's give it a border of one pixel solid and let's use E5, E7, EB color. Also I have this little extension here. If you're wondering, it's called color highlighting, color highlight. So whenever you have a hex code, it will show you how that color looks like. I also have error lens, which shows the error in the same line and I also use Tailwind CSS IntelliSense which is quite important if you're working with Tailwind it helps a lot.
All right and let's add justify content to be space between and let's add background color to be white like that. So now if I show you there we go. You can see how now it looks just a bit better It looks like an actual button, right? Perfect. And now let's go ahead below it.
So outside of the organization switcher and let's open up a div and let's give this div a class name of space Y1 and full width. And inside, we're gonna render a button from components UI button. And this one is very simply gonna have a link to an href of a root slash and render a layout dashboard from Lucid React. So this is an icon layout dashboard from Lucid React. Let's go ahead and give this icon a class name of h4 width 4 and margin right of 2.
And I'm just going to write theme boards here. I like that. So let's go ahead and take a look at that. There we go, we have this team boards here. So what we have to do now is give our button an as child prop.
Let's give it the size of LG and let's give it a class name of font normal justify start adding on x-axis of 2 and full width like this there we go now it's looking slightly better. So what I want to do now is I want to give it a variant of ghost. Like that. There we go. Perfect.
And let's go ahead now and copy and paste this button. And the one below it is going to go to our favorite boards. So we can write favorite. And let's use a star icon from Lucid React. So make sure that you import layout dashboard and star from Lucid React.
And then you can render that here. Let's take a look at this. There we go. We have team boards and we have favorite boards and we can already add a different link for this favorite boards. The URL is not gonna be different.
The only thing that's gonna be different is the query parameter. So we're gonna do the following. We're gonna go ahead and give this href to be an object, which takes in the path name, which is just an empty slash. And query is simply going to be favorites true, like that. So favorites true.
Also, whenever you're writing favorites, I see a lot of bugs happen to my viewers where they're inconsistent with writing. Sometimes they write favorites with a U and sometimes they write it without it. So whenever you write this, make sure that you are being consistent or you can create a constant and use it if it's easier for you. It is just so you avoid bugs in the future, because we are going to be looking for this query in the URL to decide what to show to the user. Great.
So we have this now. And now what I wanna do is decide whether we are, whether we should, which one should we render as the current active button? Right? So if I click here, there we go. You can see how my URL has changed and added the favorites through here.
And if I go back, it's removed. So depending on that query, I want to highlight a specific button to indicate to the user, all right, you're currently looking at this one. So let's go ahead and let's get our search params, which we can import from next. I think it's just next. Oh, wait, it's next slash navigation.
My apologies. So let's import use search params like that. And then in here, we can get the search params from use search params. And let's get the favorites from searchparams.getFavorites. So again, make sure you don't misspell favorites here, here, or right here.
Great. And now what we can do is we can dynamically change the variant depending on the favorites in the URL. So variant here, it's not just gonna be hard-coded ghost. Instead, if we have favorites and this is where team boards, that means that this one is gonna be ghost, otherwise It's gonna be secondary. So we can copy and paste this, replace it with the lower button, which is used to go to the favorite boards.
And that's gonna be the opposite. So if we have favorites in our URL query, we're gonna use secondary. Otherwise we're gonna use ghost, like that. So let's check that out now. So let me just go here and there we go.
You can see how now when I click on something, it indicates that I'm on it. Perfect. If you want to, you can change the secondary and the ghost. I don't know if you want to use outline instead of ghost. You can try out how that looks like.
Let's take a look. Yeah, in my opinion, I think that ghost looks better. So I'm going to bring it back to ghost. Great, So now we have a way to switch our organization. You can see how the opacity changes in the navbar, in the sidebar as well.
Perfect! And from here, yes, we can also manage our entire organization and we can also do invitations. So let's just go ahead and quickly try out an invitation here. So the way I'm gonna do that is I'm going to sign out and I'm gonna go ahead and log in with a new account here. And now when I'm in this new account, I'm going to go ahead and see we can create an organization from here now even.
So I'm going to create an invite test organization. I'm just going to click create an organization. And already in here, we can pass in an invite to the member So you can either do it immediately here or you can click in and go into the settings of the individual Organization and I'm gonna give a role of member to my other account. I believe this is my email and I will send the invitation and there we go invitation successfully sent. If you have any errors with this it's most likely because you didn't allow clerk to use emails So just make sure that you have inside of your user and authentication, make sure you have email address enabled, if you don't have this, then you will not be able to invite your users.
Great, so now I'm gonna log out and go back into my other account. And there we go. You can see that now I have this little indicator one and I am invited to the invite test organization and I can click join and there we go. I can select that organization now and that way we're gonna be able to share all boards across the same organization. Amazing.
So we just wrap that up. What we're going to do next is wrap up our NavBar and then we're going to finally be working on this content right here. Great, great job.