Skip to content

Commit 347a56e

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Update mobile menu layout and styling for improved responsiveness
1 parent dcaee6c commit 347a56e

File tree

1 file changed

+63
-50
lines changed

1 file changed

+63
-50
lines changed

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

Lines changed: 63 additions & 50 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="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="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
@@ -220,9 +232,10 @@ class="flex items-center justify-between py-3 opacity-50 transition duration-200
220232
<div
221233
class="mt-6 mb-2 flex w-full items-center justify-between gap-2 pb-2"
222234
>
223-
224235
{{-- Doc search --}}
225-
<div class="transition-all duration-200 ease-in-out will-change-transform">
236+
<div
237+
class="transition-all duration-200 ease-in-out will-change-transform"
238+
>
226239
<div
227240
id="docsearch-mobile"
228241
x-on:click="
@@ -286,7 +299,7 @@ class="h-0.5 w-full rounded-full bg-current opacity-5"
286299
></div>
287300

288301
<nav
289-
class="mt-4 mx-auto flex"
302+
class="mx-auto mt-4 flex"
290303
aria-label="Social media"
291304
>
292305
<div class="grid grid-cols-4 justify-items-center gap-4">

0 commit comments

Comments
 (0)