Skip to content

Commit 7b4fcc8

Browse files
calebporziocalebporzio
committed
Extract the navigation to a new Livewire component and listen for refresh events
1 parent 29a7d03 commit 7b4fcc8

File tree

6 files changed

+214
-180
lines changed

6 files changed

+214
-180
lines changed

‎src/Http/Livewire/NavigationDropdown.php

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<?php
2+
3+
namespace Laravel\Jetstream\Http\Livewire;
4+
5+
use Livewire\Component;
6+
7+
class NavigationDropdown extends Component
8+
{
9+
/**
10+
* The component's listeners.
11+
*
12+
* @var array
13+
*/
14+
protected $listeners = [
15+
'refresh-navigation-dropdown' => '$refresh',
16+
];
17+
18+
/**
19+
* Render the component.
20+
*
21+
* @return \Illuminate\View\View
22+
*/
23+
public function render()
24+
{
25+
return view('navigation-dropdown');
26+
}
27+
}

‎src/Http/Livewire/UpdateProfileInformationForm.php

+2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ public function updateProfileInformation(UpdatesUserProfileInformation $updater)
5757
}
5858

5959
$this->emit('saved');
60+
61+
$this->emit('refresh-navigation-dropdown');
6062
}
6163

6264
/**

‎src/Http/Livewire/UpdateTeamNameForm.php

+2
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ public function updateTeamName(UpdatesTeamNames $updater)
4848
$updater->update($this->user, $this->team, $this->state);
4949

5050
$this->emit('saved');
51+
52+
$this->emit('refresh-navigation-dropdown');
5153
}
5254

5355
/**

‎src/JetstreamServiceProvider.php

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
use Laravel\Jetstream\Http\Livewire\DeleteTeamForm;
1515
use Laravel\Jetstream\Http\Livewire\DeleteUserForm;
1616
use Laravel\Jetstream\Http\Livewire\LogoutOtherBrowserSessionsForm;
17+
use Laravel\Jetstream\Http\Livewire\NavigationDropdown;
1718
use Laravel\Jetstream\Http\Livewire\TeamMemberManager;
1819
use Laravel\Jetstream\Http\Livewire\TwoFactorAuthenticationForm;
1920
use Laravel\Jetstream\Http\Livewire\UpdatePasswordForm;
@@ -35,6 +36,7 @@ public function register()
3536

3637
$this->app->afterResolving(BladeCompiler::class, function () {
3738
if (config('jetstream.stack') === 'livewire' && class_exists(Livewire::class)) {
39+
Livewire::component('navigation-dropdown', NavigationDropdown::class);
3840
Livewire::component('profile.update-profile-information-form', UpdateProfileInformationForm::class);
3941
Livewire::component('profile.update-password-form', UpdatePasswordForm::class);
4042
Livewire::component('profile.two-factor-authentication-form', TwoFactorAuthenticationForm::class);

‎stubs/livewire/resources/views/layouts/app.blade.php

+1-180
Original file line numberDiff line numberDiff line change
@@ -20,186 +20,7 @@
2020
</head>
2121
<body class="font-sans antialiased">
2222
<div class="min-h-screen bg-gray-100">
23-
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
24-
<!-- Primary Navigation Menu -->
25-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
26-
<div class="flex justify-between h-16">
27-
<div class="flex">
28-
<!-- Logo -->
29-
<div class="flex-shrink-0 flex items-center">
30-
<a href="/dashboard">
31-
<x-jet-application-mark class="block h-9 w-auto" />
32-
</a>
33-
</div>
34-
35-
<!-- Navigation Links -->
36-
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
37-
<x-jet-nav-link href="/dashboard" :active="request()->routeIs('dashboard')">
38-
{{ __('Dashboard') }}
39-
</x-jet-nav-link>
40-
</div>
41-
</div>
42-
43-
<!-- Settings Dropdown -->
44-
<div class="hidden sm:flex sm:items-center sm:ml-6">
45-
<x-jet-dropdown align="right" width="48">
46-
<x-slot name="trigger">
47-
<button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
48-
<img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
49-
</button>
50-
</x-slot>
51-
52-
<x-slot name="content">
53-
<!-- Account Management -->
54-
<div class="block px-4 py-2 text-xs text-gray-400">
55-
{{ __('Manage Account') }}
56-
</div>
57-
58-
<x-jet-dropdown-link href="/user/profile">
59-
{{ __('Profile') }}
60-
</x-jet-dropdown-link>
61-
62-
@if (Laravel\Jetstream\Jetstream::hasApiFeatures())
63-
<x-jet-dropdown-link href="/user/api-tokens">
64-
{{ __('API Tokens') }}
65-
</x-jet-dropdown-link>
66-
@endif
67-
68-
<div class="border-t border-gray-100"></div>
69-
70-
<!-- Team Management -->
71-
@if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
72-
<div class="block px-4 py-2 text-xs text-gray-400">
73-
{{ __('Manage Team') }}
74-
</div>
75-
76-
<!-- Team Settings -->
77-
<x-jet-dropdown-link href="/teams/{{ Auth::user()->currentTeam->id }}">
78-
{{ __('Team Settings') }}
79-
</x-jet-dropdown-link>
80-
81-
@can('create', Laravel\Jetstream\Jetstream::newTeamModel())
82-
<x-jet-dropdown-link href="/teams/create">
83-
{{ __('Create New Team') }}
84-
</x-jet-dropdown-link>
85-
@endcan
86-
87-
<div class="border-t border-gray-100"></div>
88-
89-
<!-- Team Switcher -->
90-
<div class="block px-4 py-2 text-xs text-gray-400">
91-
{{ __('Switch Teams') }}
92-
</div>
93-
94-
@foreach (Auth::user()->allTeams() as $team)
95-
<x-jet-switchable-team :team="$team" />
96-
@endforeach
97-
98-
<div class="border-t border-gray-100"></div>
99-
@endif
100-
101-
<!-- Authentication -->
102-
<form method="POST" action="{{ route('logout') }}">
103-
@csrf
104-
105-
<x-jet-dropdown-link href="{{ route('logout') }}"
106-
onclick="event.preventDefault();
107-
this.closest('form').submit();">
108-
{{ __('Logout') }}
109-
</x-jet-dropdown-link>
110-
</form>
111-
</x-slot>
112-
</x-jet-dropdown>
113-
</div>
114-
115-
<!-- Hamburger -->
116-
<div class="-mr-2 flex items-center sm:hidden">
117-
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
118-
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
119-
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
120-
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
121-
</svg>
122-
</button>
123-
</div>
124-
</div>
125-
</div>
126-
127-
<!-- Responsive Navigation Menu -->
128-
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
129-
<div class="pt-2 pb-3 space-y-1">
130-
<x-jet-responsive-nav-link href="/dashboard" :active="request()->routeIs('dashboard')">
131-
{{ __('Dashboard') }}
132-
</x-jet-responsive-nav-link>
133-
</div>
134-
135-
<!-- Responsive Settings Options -->
136-
<div class="pt-4 pb-1 border-t border-gray-200">
137-
<div class="flex items-center px-4">
138-
<div class="flex-shrink-0">
139-
<img class="h-10 w-10 rounded-full" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
140-
</div>
141-
142-
<div class="ml-3">
143-
<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
144-
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
145-
</div>
146-
</div>
147-
148-
<div class="mt-3 space-y-1">
149-
<!-- Account Management -->
150-
<x-jet-responsive-nav-link href="/user/profile" :active="request()->routeIs('profile.show')">
151-
{{ __('Profile') }}
152-
</x-jet-responsive-nav-link>
153-
154-
@if (Laravel\Jetstream\Jetstream::hasApiFeatures())
155-
<x-jet-responsive-nav-link href="/user/api-tokens" :active="request()->routeIs('api-tokens.index')">
156-
{{ __('API Tokens') }}
157-
</x-jet-responsive-nav-link>
158-
@endif
159-
160-
<!-- Authentication -->
161-
<form method="POST" action="{{ route('logout') }}">
162-
@csrf
163-
164-
<x-jet-responsive-nav-link href="{{ route('logout') }}"
165-
onclick="event.preventDefault();
166-
this.closest('form').submit();">
167-
{{ __('Logout') }}
168-
</x-jet-responsive-nav-link>
169-
</form>
170-
171-
<!-- Team Management -->
172-
@if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
173-
<div class="border-t border-gray-200"></div>
174-
175-
<div class="block px-4 py-2 text-xs text-gray-400">
176-
{{ __('Manage Team') }}
177-
</div>
178-
179-
<!-- Team Settings -->
180-
<x-jet-responsive-nav-link href="/teams/{{ Auth::user()->currentTeam->id }}" :active="request()->routeIs('teams.show')">
181-
{{ __('Team Settings') }}
182-
</x-jet-responsive-nav-link>
183-
184-
<x-jet-responsive-nav-link href="/teams/create" :active="request()->routeIs('teams.create')">
185-
{{ __('Create New Team') }}
186-
</x-jet-responsive-nav-link>
187-
188-
<div class="border-t border-gray-200"></div>
189-
190-
<!-- Team Switcher -->
191-
<div class="block px-4 py-2 text-xs text-gray-400">
192-
{{ __('Switch Teams') }}
193-
</div>
194-
195-
@foreach (Auth::user()->allTeams() as $team)
196-
<x-jet-switchable-team :team="$team" component="jet-responsive-nav-link" />
197-
@endforeach
198-
@endif
199-
</div>
200-
</div>
201-
</div>
202-
</nav>
23+
@livewire('navigation-dropdown')
20324

20425
<!-- Page Heading -->
20526
<header class="bg-white shadow">

0 commit comments

Comments
 (0)