(upbeat music) Much of our apps functionality is done. Now it's time we enhance the user experience. Let's start with the navigation, the menu items, icons, labels, URLs, all the little things that help the user navigate our app. Let's start with the sidebar. To me, the sidebar looks too wide. Let's reduce the width. We can do that in the panel configuration.

Let's reduce the width. We can do that in the panel configuration. Go to base panel provider and right here, you can use the sidebar width and specify a width in pixels or in RAM. Let's try something like 200 pixels, refresh. That looks much better. We have a lot more space for to browse the books. This might be a little too small though, considering the logo width.

This might be a little too small though, considering the logo width. It would be great if the sidebar could kind of cover the logo and come up to here. So I'll increase the width slightly to 220 pixels, refresh, and that looks great. Now let's change what these menu items have. Books and book users. We do that in the resources. Let me close this open book resource.

We do that in the resources. Let me close this open book resource. Here, we can use the navigation label property to specify what we want the menu item to save. So yeah, catalog would be great compared to books. Let me refresh catalog and notice that this hasn't changed. Here, we still see books. If you wanna change both books and catalog, you can change this to model label instead. And however, notice what happens.

you can change this to model label instead. And however, notice what happens. If you do this, you get the plural form and there is no such word as catalogs. So we'll have to additionally set the plural label. I think plural, model, label also as catalog. Refresh, and now it says catalog. And while we are doing this, let's also change the URL. The URL here is currently books.

let's also change the URL. The URL here is currently books. So the slug can also be catalog itself. Refresh, yeah, of course, books is not found now. Let's go to dashboard and click on catalog. Yeah, now if you look down there, it's catalog, okay. And we also want this as the first item, right? So we can change that using navigation sort property and set that to one. This won't take effect because we'll have to set the same

and set that to one. This won't take effect because we'll have to set the same for the other resources as well. So open the book users resource, book user resource. Let's do the same thing. We will set the model label here to my books. Yeah, my book, I think the plural is taken care of. Now refresh, yeah, now it says my books. Here, here, everywhere. You don't have to set the plural.

Here, here, everywhere. You don't have to set the plural. It has taken it automatically. And then let's change the slug for this. My books, yeah, that should be good. And the sort, navigation sort equals two. Dashboard by default is, I think, minus one or minus two. So you can start from one and go ahead. Refresh, again, not found. Let's go to books.

Refresh, again, not found. Let's go to books. Books is not found, sorry, my books. Yes. So we have catalog as the second item after dashboard and then my books, great. Now let's customize these icons. These are hero icons by default filament uses them, but it doesn't stop you from installing any icons that you would wish.

but it doesn't stop you from installing any icons that you would wish. Let's go to blade icons and see what's available. So this is blade icons from here. You can pick any icon set and install it into filament. Let me search books here. And yes, we have a lot of beautiful icons. I somehow like tabular icons. I feel it has a huge collection and the icons are good as well.

I feel it has a huge collection and the icons are good as well. So click on tabular any icon. This is how you install the entire set. So copy this, paste it in the terminal. All right, we now have the icons and we can use them anywhere we want. Let's start with the book resource. It already exists here and it's using hero icon outline rectangle stack.

It already exists here and it's using hero icon outline rectangle stack. We can change that to tabular books like soap. This is the one we saw there. Let's refresh. And yeah, we have the catalogs icon here. For the book user resource that is my books, let's also change it to another tabular book icon, tabular book two. This is something I had seen.

tabular book two. This is something I had seen. So refresh. Yeah, that is the icon. We can similarly replace all the hero icons, all of these icons that we see here with tableau. So wherever you're using hero icons, you can go ahead and replace it. But there's one thing you need to remember while using blade icons.

But there's one thing you need to remember while using blade icons. That is sometimes if you include too many icons, it might affect the performance of your app. It might slow down, but there's a simple solution to that. You can simply cache the icons and then clear it. You can refer to the documentation to see how it's done. Now let's try and remove this top bar because all we have is a logo

Now let's try and remove this top bar because all we have is a logo which will anyway stay on the left and this user icon. Let's see, let's go to the base panel provider, open base panel provider, and simply set the top bar to false. Okay, now what happens is it just moves down to the left here and there's a lot more space. It feels less distracted and all the navigation that we need is in one single place.

It feels less distracted and all the navigation that we need is in one single place. Everything else works same. That's great. I noticed now that these three labels also might have to be changed. Requested is great. We could change that to requested books and currently reading, not borrowed, and then past reds, that would be great.

and currently reading, not borrowed, and then past reds, that would be great. So let's go to the book user table. That's where we have the filters. No, we have the filters in the list book users. Yeah, we just have to pass in the names we need here, requested books. This could be currently reading and sure we have past red. Past reads, yeah.

and sure we have past red. Past reads, yeah. Looks much better, easy to understand. And now it would be great to have these menu icons directly on the sidebar so that I don't have to go to my books and then click on currently reading. For this, the best way to do this is build a custom navigation. Let's do that in our app panel provider.

is build a custom navigation. Let's do that in our app panel provider. Open app panel provider. I can actually close all the other files. Right. So right here, instead of letting filament auto discover our resources and put them on the sidebar, we can do this on our own. Here we can use the navigation method and create custom navigation.

Here we can use the navigation method and create custom navigation. But first, let's decide what we want. So we have dashboard and catalog and then we have my books, which will have all these three. So we have my books as a group and the other two items becomes another group. So we need navigation groups. If you go to the filament documentation, registering custom navigation groups,

If you go to the filament documentation, registering custom navigation groups, here is the code of how you do it. So let me simply copy this, navigation and paste it in app panel provider. Like so, we need two navigation groups. Let me remove all these items here. I will add another navigation group and let's import all these navigation builder, navigation group.

and let's import all these navigation builder, navigation group. Okay. And the first group, we don't have to name it anything. If we just leave it blank, it'll appear in the top level. The second one, let's call it my Shelf or my books, anything. So the first navigation group has two items. One is the dashboard. So here we use the navigation item

One is the dashboard. So here we use the navigation item and make dashboard exactly. But let me import this and also instead of using hero icon, let's use tableau. Tableau, I'm not sure what dashboard looks like. Tableau, let's try that. And URL is get URL. Next for the book resource,

And URL is get URL. Next for the book resource, we can use the spread operator book resource and get the navigation items like so. So it takes care of all the icon, the sorting and everything. Let's just import this. App one, yeah. Refresh. Yeah, we do have a group. It doesn't look like anything has changed, so that's great.

Yeah, we do have a group. It doesn't look like anything has changed, so that's great. And we don't have the My Shelf displayed here because we haven't added any items. Let's add the items. Navigation item, make requested books. And the icon could be not table book request. I don't know if there is such a icon table clock plus, something like that must be there that is pending. And the URL book resource get URL.

something like that must be there that is pending. And the URL book resource get URL. Sorry, book user resource get URL. Okay, let's see. Yeah, this is good. Let's add the other one similarly to more. Here we have currently reading. And this could be a book open or simply book might do. And then past reads.

or simply book might do. And then past reads. This could be that table book to icon. And here we need to navigate to the currently reading tab. So we could simply append tab equals currently reading. No, this would probably be borrowed. Borrowed is also the same and tab would be returned. Okay, let's check it out. Refresh. Yeah, we do have currently reading and past reads.

Refresh. Yeah, we do have currently reading and past reads. If you noticed, it did go to the exact tab, but we're not able to see the highlight well. We will change that in the next episode, but everything looks good. We will have to change these icons to match the ones on the menu. Let's do that next. Go to the book user resource.

Let's do that next. Go to the book user resource. Sorry, list book users. That's where we have these icons. Let's change them all to table or clock. Plus hero icon, not sorry, table or book. And here we have a table or book to refresh. Yeah. The way we see badges here of the numbers, it's great if we can add the badges right here also.

The way we see badges here of the numbers, it's great if we can add the badges right here also. So go to the navigation item. Let's add a badge function or the user books. Yes, where status requested is count. That looks perfect. Let's add them to the other two tabs as well while just changing the status to borrowed and returned. Refresh and we do have the same set of numbers here. So now at this point,

Refresh and we do have the same set of numbers here. So now at this point, I feel the sidebar with got a little too narrow. Let me increase it slightly, maybe 240 pixels. Where was that base panel provider? Yeah, refresh. Yeah, that looks perfect. Now let's not change it anymore. The last thing we need to do is highlight the tab when it is active.

The last thing we need to do is highlight the tab when it is active. So we don't know we are currently reading because we haven't set that. The method is active when exactly. So this menu item is active when the route is filament app, pages dashboard. Let's add that. We don't have to add it to the book resource. It's taken care of right here for the currently reading.

We don't have to add it to the book resource. It's taken care of right here for the currently reading. Let me copy this and paste it here. Request route is filament app resources. And the resource is my books because we changed the slug remember dot index, yes. And the request to get tab is null. So the first one we don't have to set a tab. It's the default. So when the tab is null, it goes.

It's the default. So when the tab is null, it goes. Let's cross check refresh. Yeah, requested book looks highlighted. Let's do the same for the other two as well. Once again, let me copy it from here, paste and paste it. Here we'll change the tab to borrowed. This would be return refresh. It all works great now. There are a couple more things.

It all works great now. There are a couple more things. Now, let's say I request that request this book. The number here should change to four, but it doesn't. It changes only when we go to the next page. That's not the best user experience. So what we do is we go to the action where we are doing this and we refresh the sidebar once we request a book. So that is done in the books table.

and we refresh the sidebar once we request a book. So that is done in the books table. Scroll down to the action. Yes, this is the action. So once this is complete, let's add an after function. Let's inject live wire. We want to refresh the sidebar for which we can dispatch the event, not browser event. We can dispatch refresh sidebar. You can check the filament documentation for this.

We can dispatch refresh sidebar. You can check the filament documentation for this. Let's see if this works. Refresh currently requested books is four. Let's go to the catalog, request another book and it changes to five. That's great. We'll have to do the same in the requested books also when I cancel a request. Let's say yes.

when I cancel a request. Let's say yes. Here it's updated to four, but here it still says five. Go to the book user stable. Scroll down to the action. I think this is the one. No, not this. This is the returned books. Let's go to the canceled one. Yes, right here.

Let's go to the canceled one. Yes, right here. Somewhere after the model, we could say after same thing function, inject live wire and dispatch the event, not refresh. This batch refresh sidebar. All right, now let's cancel some request. Yes, and it changes to three here and here as well. Now filament has another option of turning on the SBA mode.

Yes, and it changes to three here and here as well. Now filament has another option of turning on the SBA mode. So when you navigate to other tabs, it feels even more seamless. Let's enable that in the panel provider. Go to base panel provider and simply set SBA to, yeah, you just have to add the SBA method here. Now refresh. If you notice, it's a little bit faster, right?

Now refresh. If you notice, it's a little bit faster, right? That's great. So we have shaped the navigation a lot more. Next, let's change the look and feel of the entire application in the next episode. You