در حال بارگذاری ...

Planning a Custom Menu0:00

Okay, before we go any further, I think it's time for a little bit of housekeeping. I've noticed our main menu is becoming a little unwieldy, and there's a lot of resources there. This will happen as you build your Nova application. You will add more and more resources, and they'll just happily jump into that main menu. But over time, it becomes difficult to navigate around. Thankfully, we can implement our own custom menu. It's a breeze to do, so let's do it now. But before we do, let's just think about what we want in our menu. We have this dashboard here, which doesn't really do anything for us. It's a nice starting point.

We have this dashboard here, which doesn't really do anything for us. It's a nice starting point. But for now, I think we can remove it. Let's think about how we might want to group our resources. Some of our resources we don't even need. So addresses we could remove, because we'll always access and create addresses through either a customer or a publisher. We could also remove recordings, because we'll always add recordings via a book. That leaves books, genres, publishers, and authors, which could be grouped together under a books category, and customers, which could go in its own category to be expanded upon later, as well as users, which might be nice in some form of support category down at the bottom.

Implementing Menu Sections1:15

and customers, which could go in its own category to be expanded upon later, as well as users, which might be nice in some form of support category down at the bottom. Let's dive into the Nova service provider, which is where you'll place your custom menu. And in the boot method, I'm going to call Nova, and then the static mainMenu method. It expects a closure, which receives the current request, if you want to use that to customize the menu, and it returns an array. Now this array contains all the menu items we expect to appear in that menu. I think at the top, seeing as we're a customer-oriented application, we should have our customer group. So we can use a menuSection for this. menuSection, make, and we're going to give it a name.

So we can use a menu section for this. Menu section, make, and we're going to give it a name. We'll call this customers, and I can chain on an icon. Now the icons are Heroicons, and you can search Heroicons by going to Heroicons.com and browsing through. For us, let's search for user, and I think user-group would be a good option. So we'll grab that one, and we can paste the text user-group into the icon method. Now coming back to the make method, the second parameter that we pass is an array, which contains any menu items we want to add. So in our case, let's add a menu item for the resource of customers. So we'll grab the Customer Nova resource.

So in our case, let's add a menu item for the resource of customers. So we'll grab the Customer Nova resource. And once we do that, you'll see that all of the previous options have gone, and if I click customers, yeah, I'm taken straight to the customer index. That's our first group done and out of the way. Obviously, there's only one item in it at the moment, but we're going to expand on that as time goes on. Let's add a second menu section. This time it's going to be for books, and we need to add the array and the icon method. You don't have to add an icon, but I think it makes much more sense if an icon does exist. It cleans things up.

You don't have to add an icon, but I think it makes much more sense if an icon does exist. It cleans things up. We'll use the book-open icon in this particular case. What's going to go in here? Well, we want the menu item for our Book resource, so we can grab the Book resource here, app/Nova/Book. We want the menu item for Author, so I'll use the resource method once again, and I want the Author resource from Nova. And we also said Publisher, which is a resource, so we'll add the Publisher, and Genre, which is, again, a resource in Nova. Let's take a look at what we've got now.

Making Sections Collapsible3:41

and genre, which is, again, a resource in Nova. Let's take a look at what we've got now. Yep, sure enough, we have this nice section. Now, I don't always need to see books. The only time I'll be editing this is when we get stock of new books or when I need to delete old books or update some metadata. So what we can do is we can define this as collapsible by chaining on the collapsible method. And when we do so, we can now collapse this. It will save that in our preferences, and it won't show those items until we expand again. The last section I want to add is a support section, so simple as that.

Adding a Support Section4:08

It will save that in our preferences, and it won't show those items until we expand again. The last section I want to add is a support section, so simple as that. And the icon we can use here is cog, which I think makes a lot of sense for support. And we'll add the array, which will contain a single menu item for now that we'll link to our User resource. So app/Nova/User, and yep, there we go, support users. So that's how easy it is to create your very own custom main menu, remove items that you don't really need top-level access to, and add custom items. Now there are many different things that we can add beside resources to this menu. And throughout the rest of the series, we're going to be adding to the menu as we see fit.

Setting Initial Path4:50

Now there are many different things that we can add beside resources to this menu. And throughout the rest of the series, we're going to be adding to the menu as we see fit, which is why it's good to get it out of the way now and understand how the custom main menu works. There is one thing I just want to talk about. If I click this link here, it's still taking me to this dashboard as the initial URL. I think it would make more sense to go to the customers index as the initial URL. So back in Nova, maybe above the Nova main menu here, I can say Nova initial path, and I'm going to point the application to resources/customers. Now whenever I log in or I click this logo at the top, I'm taken straight to the customers index. I don't have to see that example dashboard.

Transition to Nova Search5:30

Now whenever I log in or I click this logo at the top, I'm taken straight to the customer's index. I don't have to see that example dashboard. All right, well with housekeeping out of the way, why don't we dive a little deeper into search in Laravel Nova.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟