How to personalise Mailcoach navigation and menu items

Premise

I started a new project for a client were we essentially just needed Spatie's Mailcoach application as a standalone app. Sure we can easily do that as indicated in the official documentation:

composer create-project spatie/Mailcoach

My problem was that I wanted to take advantage of Jetstream's features such as the Two Factor Authentication.

Therefore I had go with a fresh installation of Jetstream (Livewire edition to better match Mailcoach integration) and then install Mailcoach on top.

Cool, but now how do we modify the existing Mailcoach navigation and menus ?

As most of Spatie's packages, this one too is amazingly done and provides simple solutions to extend the application's features.

So how do we hook to the user dropdown menu (top right in desktop view) and add new entries ?

Well it's quite simple, Mailcoach dispatches and event in its BootstrapMailcoach Middleware, hence we only have to listen to it and use some of Spatie's magic to add a MenuItem to the user menu dropdown. To do so we simply have to create a new listener (ServingMailcoachListener) and use Mailcoach::addUserMenuItemsBefore() in the handle function:

use Spatie\Mailcoach\Mailcoach;
use Spatie\Mailcoach\Domain\Settings\Support\MenuItem;
use Spatie\Mailcoach\Domain\Shared\Events\ServingMailcoach;

...

public function handle(ServingMailcoach $event): void
{
    Mailcoach::addUserMenuItemsBefore(
        new MenuItem('Account', route('settings.account'), 'fa-users'),
    );
}

By visiting the Spatie\Mailcoach\Mailcoach class we can see that there are other useful methods that can be used such as:

• addUserMenuItemsBefore(): to add a menu item in the user menu dropdown before the default ones;
• addUserMenuItemsAfter(): to add a menu item in the user menu dropdown after the default ones;
• addSettingsMenuItemsBefore(): to add a menu item in the settings lateral menu before the default ones;
• addSettingsMenuItemsAfter(): to add a menu item in the settings lateral menu after the default ones;
• addMainMenuItems(): to obviously add more menu items in the main menu;

And that's it! Easy peasy!