Category Archives: Laravel

Laravel Jetstream: Minimal Teams Dropdown Menu

I’m using Laravel Jetstream for a side project (activetrackers.com) and I wanted to make the teams dropdown menu minimal because I’m not using any of Jetstream’s current team or team switching functionality.

Only team owners need access to the teams menus, so instead of switching teams, I want them to be able to directly access to the settings page of each team.

Editing the Teams section of the navigation-menu-blade.php file, here’s what I came up with:

<!-- Teams Dropdown -->
@if ( count(Auth::user()->ownedTeams) > 0 )
  <div class="ml-3 relative">
    <x-jet-dropdown align="right" width="60">
      <x-slot name="trigger">
        <span class="inline-flex rounded-md">
          <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
            {{ __("Manage Groups") }}
            <svg>...</svg>
          </button>
        </span>
      </x-slot>
      <x-slot name="content">
        <div class="w-48">
          @foreach (Auth::user()->ownedTeams as $team)
            <x-jet-dropdown-link href="/teams/{{ $team->id }}">
              {{ $team->name }}
            </x-jet-dropdown-link>
          @endforeach
        </div>
      </x-slot>
    </x-jet-dropdown>
  </div>
@endif

Here are screenshots of the before and after for a user who owns two teams:

Before

After

Note: In my app, I updated “Teams” to “Groups” and used @if ( count(Auth::user()->ownedTeams) > 0 ) to only display the teams menu to team owners. I also made changes to the settings/profile dropdown, but that’s a topic for another post.