Skip to content

Commit 2feda0b

Browse files
gwleuverinkHassanZahirnia
gwleuverink
and
HassanZahirnia
authored
add docsearch input to mobile nav (#219)
* add docsearch input to mobile nav * improve responsive sizing * ♻️ Refactor mcp.json to use relative paths for PHP command and artisan script * ✨ Update mobile menu layout and styling for improved responsiveness * ✨ Enhance mobile menu layout and styling for better usability and accessibility --------- Co-authored-by: HassanZahirnia <m.hassan.zahirnia@gmail.com>
1 parent a3fb4a5 commit 2feda0b

File tree

5 files changed

+100
-68
lines changed

5 files changed

+100
-68
lines changed

‎.junie/mcp/mcp.json‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
{
22
"mcpServers": {
33
"laravel-boost": {
4-
"command": "/usr/bin/php8.4",
5-
"args": [
6-
"/home/hassan/code/nativephp.com/artisan",
7-
"boost:mcp"
8-
]
4+
"command": "php",
5+
"args": ["./artisan", "boost:mcp"]
96
}
107
}
11-
}
8+
}

‎resources/css/docsearch.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
.DocSearch-Button {
14-
@apply m-0 flex items-center rounded-full bg-gray-50/50 font-normal ring-1 ring-slate-600/30 transition duration-300 ease-out ring-inset dark:bg-black/30;
14+
@apply m-0 flex h-10 items-center rounded-full bg-gray-50/50 font-normal ring-1 ring-slate-600/30 transition duration-300 ease-out ring-inset min-[1024px]:h-9 dark:bg-black/30;
1515
}
1616

1717
.DocSearch-Button:hover {
@@ -29,13 +29,17 @@
2929
}
3030

3131
.DocSearch-Button-Placeholder {
32-
@apply px-1 text-sm text-black/60 transition duration-300 xl:pr-5 dark:text-white/60;
32+
@apply pr-2 pl-1 text-sm text-black/60 transition duration-300 xl:pr-5 dark:text-white/60;
3333
}
3434

3535
.DocSearch-Button-Keys {
3636
@apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none sm:flex;
3737
}
3838

39+
.DocSearch-Button-Placeholder {
40+
@apply inline!;
41+
}
42+
3943
.DocSearch-Button-Key {
4044
background: none;
4145
box-shadow: none;

‎resources/js/app.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,15 @@ docsearch({
119119
apiKey: '9be495a1aaf367b47c873d30a8e7ccf5',
120120
indexName: 'nativephp',
121121
insights: true,
122-
container: '#docsearch',
122+
container: '#docsearch-desktop',
123+
debug: false,
124+
})
125+
126+
docsearch({
127+
appId: 'ZNII9QZ8WI',
128+
apiKey: '9be495a1aaf367b47c873d30a8e7ccf5',
129+
indexName: 'nativephp',
130+
insights: true,
131+
container: '#docsearch-mobile',
123132
debug: false,
124133
})

‎resources/views/components/navbar/mobile-menu.blade.php‎

Lines changed: 80 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -68,148 +68,160 @@ class="-ml-2.5 h-5 w-0.5 -rotate-45 rounded-full bg-current transition duration-
6868
role="dialog"
6969
aria-modal="true"
7070
aria-label="Site menu"
71-
class="fixed top-21 right-3 bottom-3.5 left-3 h-auto w-auto origin-top -translate-y-2 scale-y-90 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-100/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition transition-discrete duration-300 open:translate-y-0 open:scale-y-100 open:opacity-100 min-[500px]:right-3.5 min-[500px]:left-3.5 dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-2 starting:open:scale-y-0 starting:open:opacity-0"
71+
class="fixed top-20 right-3 bottom-3.5 left-3 w-auto origin-top -translate-y-2 scale-y-90 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-200/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition transition-discrete duration-300 open:translate-y-0 open:scale-y-100 open:opacity-100 min-[500px]:right-3.5 min-[500px]:left-3.5 dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-2 starting:open:scale-y-0 starting:open:opacity-0"
7272
>
73-
<div class="flex h-full flex-col overflow-hidden p-6">
73+
<div class="@container flex flex-col overflow-hidden px-6 pt-4 pb-6">
7474
<nav
75-
class="flex flex-1 flex-col items-start text-xl"
75+
class="@md:grid-cols-3 grid grid-cols-2 text-xl"
7676
aria-label="Primary"
7777
>
7878
@php
7979
$isHomeActive = request()->routeIs('welcome*');
8080
$isPricingActive = request()->routeIs('pricing*');
8181
$isDocsActive = request()->is('docs*');
8282
$isBlogActive = request()->routeIs('blog*');
83+
$isPartnersActive = request()->routeIs('partners*');
8384
$isSponsorActive = request()->routeIs('sponsoring*');
85+
$isLoginActive = request()->routeIs('customer.login*');
8486
@endphp
8587

8688
{{-- Home Link --}}
87-
<div class="w-full">
89+
<div>
8890
<a
8991
href="/"
9092
@class([
91-
'flex items-center justify-between py-3 transition duration-200',
93+
'flex items-center gap-2 py-3 transition duration-200',
9294
'font-medium' => $isHomeActive,
9395
'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isHomeActive,
9496
])
9597
aria-current="{{ $isHomeActive ? 'page' : 'false' }}"
9698
>
97-
<div>Home</div>
9899
@if ($isHomeActive)
99100
<x-icons.right-arrow
100101
class="size-4 shrink-0"
101102
aria-hidden="true"
102103
focusable="false"
103104
/>
104105
@endif
106+
107+
<div>Home</div>
105108
</a>
106109
</div>
107110

108-
<div
109-
class="h-0.5 w-full rounded-full bg-current opacity-5"
110-
role="presentation"
111-
></div>
112-
113111
{{-- Docs Link --}}
114-
<div class="w-full">
112+
<div>
115113
<a
116114
href="/docs/"
117115
@class([
118-
'flex items-center justify-between py-3 transition duration-200',
116+
'flex items-center gap-2 py-3 transition duration-200',
119117
'font-medium' => $isDocsActive,
120118
'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isDocsActive,
121119
])
122120
aria-current="{{ $isDocsActive ? 'page' : 'false' }}"
123121
>
124-
<div>Docs</div>
125122
@if ($isDocsActive)
126123
<x-icons.right-arrow
127124
class="size-4 shrink-0"
128125
aria-hidden="true"
129126
focusable="false"
130127
/>
131128
@endif
129+
130+
<div>Docs</div>
132131
</a>
133132
</div>
134133

135-
<div
136-
class="h-0.5 w-full rounded-full bg-current opacity-5"
137-
role="presentation"
138-
></div>
139-
140134
{{-- Blog Link --}}
141-
<div class="w-full">
135+
<div>
142136
<a
143137
href="{{ route('blog') }}"
144138
@class([
145-
'flex items-center justify-between py-3 transition duration-200',
139+
'flex items-center gap-2 py-3 transition duration-200',
146140
'font-medium' => $isBlogActive,
147141
'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isBlogActive,
148142
])
149143
aria-current="{{ $isBlogActive ? 'page' : 'false' }}"
150144
>
151-
<div>Blog</div>
152145
@if ($isBlogActive)
153146
<x-icons.right-arrow
154147
class="size-4 shrink-0"
155148
aria-hidden="true"
156149
focusable="false"
157150
/>
158151
@endif
152+
153+
<div>Blog</div>
159154
</a>
160155
</div>
161156

162-
<div
163-
class="h-0.5 w-full rounded-full bg-current opacity-5"
164-
role="presentation"
165-
></div>
166-
167157
{{-- Shop Link --}}
168-
<div class="w-full">
158+
<div>
169159
<a
170160
href="https://shop.nativephp.com/"
171-
class="flex items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
161+
class="flex items-center gap-2 py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
172162
aria-label="NativePHP Shop"
173163
>
174164
<div>Shop</div>
175165
</a>
176166
</div>
177167

178-
<div
179-
class="h-0.5 w-full rounded-full bg-current opacity-5"
180-
role="presentation"
181-
></div>
182-
183-
<div class="w-full">
168+
<div>
184169
<a
185-
href="/partners"
186-
class="flex items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
187-
aria-label="NativePHP Partners"
170+
href="{{ route('partners') }}"
171+
@class([
172+
'flex items-center gap-2 py-3 transition duration-200',
173+
'font-medium' => $isPartnersActive,
174+
'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isPartnersActive,
175+
])
176+
aria-current="{{ $isPartnersActive ? 'page' : 'false' }}"
188177
>
178+
@if ($isPartnersActive)
179+
<x-icons.right-arrow
180+
class="size-4 shrink-0"
181+
aria-hidden="true"
182+
focusable="false"
183+
/>
184+
@endif
185+
189186
<div>Partners</div>
190187
</a>
191188
</div>
192189

193-
<div
194-
class="h-0.5 w-full rounded-full bg-current opacity-5"
195-
role="presentation"
196-
></div>
197-
198190
{{-- Login/Logout --}}
199191
@feature(App\Features\ShowAuthButtons::class)
200-
<div class="w-full">
192+
<div>
201193
@auth
202-
<form method="POST" action="{{ route('customer.logout') }}" class="w-full">
194+
<form
195+
method="POST"
196+
action="{{ route('customer.logout') }}"
197+
class="w-full"
198+
>
203199
@csrf
204-
<button type="submit" class="flex w-full items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100">
200+
<button
201+
type="submit"
202+
class="flex w-full items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
203+
>
205204
<div>Log out</div>
206205
</button>
207206
</form>
208207
@else
209208
<a
210209
href="{{ route('customer.login') }}"
211-
class="flex items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
210+
@class([
211+
'flex items-center gap-2 py-3 transition duration-200',
212+
'font-medium' => $isLoginActive,
213+
'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isLoginActive,
214+
])
215+
aria-current="{{ $isLoginActive ? 'page' : 'false' }}"
212216
>
217+
@if ($isLoginActive)
218+
<x-icons.right-arrow
219+
class="size-4 shrink-0"
220+
aria-hidden="true"
221+
focusable="false"
222+
/>
223+
@endif
224+
213225
<div>Log in</div>
214226
</a>
215227
@endauth
@@ -218,11 +230,22 @@ class="flex items-center justify-between py-3 opacity-50 transition duration-200
218230
</nav>
219231

220232
<div
221-
class="mb-2 flex w-full items-center justify-between gap-2 pb-2"
233+
class="mt-6 mb-2 flex w-full flex-wrap items-center justify-between gap-2 pb-2"
222234
>
223-
<div>Theme:</div>
235+
{{-- Doc search --}}
236+
<div class="contrast-150 dark:contrast-100">
237+
<div
238+
id="docsearch-mobile"
239+
x-on:click="
240+
window.scrollTo({ top: 0, behavior: 'instant' })
241+
showMobileMenu = false
242+
"
243+
aria-label="Search documentation"
244+
></div>
245+
</div>
246+
224247
<div
225-
class="flex h-10 items-center gap-0.5 rounded-full bg-gray-100 p-1 text-sm ring-1 ring-black/5 dark:bg-black/20 dark:ring-white/10"
248+
class="flex h-10 items-center rounded-full bg-gray-100/90 p-1 text-sm ring-1 ring-black/5 dark:bg-black/20 dark:ring-white/10"
226249
role="radiogroup"
227250
aria-label="Theme preference"
228251
>
@@ -231,7 +254,7 @@ class="flex h-10 items-center gap-0.5 rounded-full bg-gray-100 p-1 text-sm ring-
231254
role="radio"
232255
:aria-checked="themePreference === 'light'"
233256
x-on:click="themePreference = 'light'; showMobileMenu = false"
234-
class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
257+
class="rounded-full px-2.5 py-1.5 transition duration-300 ease-in-out"
235258
:class="{
236259
'bg-zinc-300/70': themePreference === 'light',
237260
}"
@@ -244,7 +267,7 @@ class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
244267
role="radio"
245268
:aria-checked="themePreference === 'system'"
246269
x-on:click="themePreference = 'system'; showMobileMenu = false"
247-
class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
270+
class="rounded-full px-2.5 py-1.5 transition duration-300 ease-in-out"
248271
:class="{
249272
'bg-zinc-300/50 dark:bg-gray-200/10': themePreference === 'system',
250273
}"
@@ -257,7 +280,7 @@ class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
257280
role="radio"
258281
:aria-checked="themePreference === 'dark'"
259282
x-on:click="themePreference = 'dark'; showMobileMenu = false"
260-
class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
283+
class="rounded-full px-2.5 py-1.5 transition duration-300 ease-in-out"
261284
:class="{
262285
'bg-gray-200/10': themePreference === 'dark',
263286
}"
@@ -274,10 +297,12 @@ class="h-0.5 w-full rounded-full bg-current opacity-5"
274297
></div>
275298

276299
<nav
277-
class="mt-4 mx-auto flex"
300+
class="mx-auto mt-4 flex"
278301
aria-label="Social media"
279302
>
280-
<div class="grid grid-cols-4 justify-items-center gap-4">
303+
<div
304+
class="flex flex-wrap justify-center-safe gap-4 contrast-120"
305+
>
281306
<x-social-networks-all />
282307
</div>
283308
</nav>

‎resources/views/components/navigation-bar.blade.php‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,12 +164,9 @@ class="opacity-60 transition duration-200 hover:opacity-100"
164164
{{-- Doc search --}}
165165
<div
166166
class="-mr-0.5 transition-all duration-200 ease-in-out will-change-transform"
167-
:class="{
168-
'pr-0.5': showMobileMenu,
169-
}"
170167
>
171168
<div
172-
id="docsearch"
169+
id="docsearch-desktop"
173170
x-on:click="if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })"
174171
aria-label="Search documentation"
175172
></div>

0 commit comments

Comments
 (0)