How to add a Count into Sidebar Menu Items?

So I used the Livewire Surge project as a starting point for an initial project about two months ago (my first “real” Laravel and Livewire project).

Something I struggled with trying to add was the ability to add some little badges next to the left-hand sidebar menu items that would contain the count of items contained within that menu item.

For example, clicking on the “Work in Progress” menu item might display 70+ items and it would be nice to have a badge next to the menu item that would indicate how many are there (e.g. 74).

For the life of me though I’ve been struggling with understanding where I would need to add the needed variables for them to be seen properly.

I thought I should add the variables in to the app/View/Components/Layouts folder which contains a very barebones App Component Class, but if I add the variables there and try and call them from the resources/views/layouts/app.blade.php file I just get an error that the variable is not defined.

Has anybody else already figured this out or has more general Laravel/Livewire knowledge to point me in the right direction?

Thank you!

If you intend to use the sidebar in many places you can use view composer. Or you can just do the count directly inside the item App\Models\Model::count()

@skywalker,

Have you used the same approach in a Livewire project already in the sidebar area and been successful?

The multiple view composer option mentioned in the link you shared does seem like it would be a potentially useful approach for sharing data amongst one or more views easily…I’m just not 100% sure if it will work in the context of Livewire or not.

In the example Surge project that @calebporzio put together, there are the following files that make up the “template” part of the application:
resources/views/layouts/base.blade.php (provides the “shell” of the page with a slot for where the body goes into)
resources/views/layouts/app.blade.php (the actual body of the page, which includes the sidebar area and in turn has a slot for the content part of the page that is currently being loaded via Livewire components)

Over on the application side of things we have:
app/Views/Components/Layouts/Base.php
app/Views/Components/Layouts/App.php

All these seem to do is they have a render method calling view() with one of the layouts above.

I thought these files would be where I could centrally add in the needed data for the sidebar (e.g. the App.php file seemed like the ideal central spot to do so), but adding any variables in there or into Base.php and then trying to access them from within the layout files didn’t seem to work (I’d always get an “undefined variable” error).

While the videos provided by Caleb have been good as a starting point, this seemed like a key omission that would be helpful to clarify for newbies to Laravel (and Livewire) since it seems like a common use case that users would want to include some sort of dynamic count info next to a menu item in the sidebar (or navbar) areas.

Thank you for any extra tips/approaches for this need you might be able to share!

I just ran a test with this option (shown above the view composer description you shared @skywalker):
https://laravel.com/docs/8.x/views#sharing-data-with-all-views

And that does appear to work with a basic value I’m passing in to have displayed in the sidebar area so I can continue exploring that option a bit further (and see how that might work with the view composer approach as well and try and sort that out).

Thanks for the tip!

Great, I’m glade I could help.

Happy coding mate :smiley: