forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: reorder Mobile Menu (#1185)
authored by
Daniel Roe
and committed by
GitHub
145cc8db
8edb91bd
+99
-93
+99
-93
app/components/Header/MobileMenu.client.vue
+99
-93
app/components/Header/MobileMenu.client.vue
···
99
99
</button>
100
100
</div>
101
101
102
-
<!-- Navigation links -->
103
-
<div class="flex-1 overflow-y-auto overscroll-contain py-2">
104
-
<!-- Main navigation -->
105
-
<div class="px-2 py-2">
106
-
<NuxtLink
107
-
:to="{ name: 'about' }"
108
-
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
109
-
@click="closeMenu"
102
+
<!-- Account section -->
103
+
<div class="px-2 py-2">
104
+
<span
105
+
class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
106
+
>
107
+
{{ $t('account_menu.account') }}
108
+
</span>
109
+
110
+
<!-- npm CLI connection status (only show if connected) -->
111
+
<button
112
+
v-if="isConnected && npmUser"
113
+
type="button"
114
+
class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
115
+
@click="handleShowConnector"
116
+
>
117
+
<img
118
+
v-if="npmAvatar"
119
+
:src="npmAvatar"
120
+
:alt="npmUser"
121
+
width="20"
122
+
height="20"
123
+
class="w-5 h-5 rounded-full object-cover"
124
+
/>
125
+
<span
126
+
v-else
127
+
class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
110
128
>
111
-
<span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
112
-
{{ $t('footer.about') }}
113
-
</NuxtLink>
129
+
<span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
130
+
</span>
131
+
<span class="flex-1">~{{ npmUser }}</span>
132
+
<span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
133
+
</button>
114
134
115
-
<NuxtLink
116
-
:to="{ name: 'privacy' }"
117
-
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
118
-
@click="closeMenu"
135
+
<!-- Atmosphere connection status -->
136
+
<button
137
+
v-if="atprotoUser"
138
+
type="button"
139
+
class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
140
+
@click="handleShowAuth"
141
+
>
142
+
<img
143
+
v-if="atprotoUser.avatar"
144
+
:src="atprotoUser.avatar"
145
+
:alt="atprotoUser.handle"
146
+
width="20"
147
+
height="20"
148
+
class="w-5 h-5 rounded-full object-cover"
149
+
/>
150
+
<span
151
+
v-else
152
+
class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
119
153
>
120
-
<span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
121
-
{{ $t('privacy_policy.title') }}
122
-
</NuxtLink>
154
+
<span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
155
+
</span>
156
+
<span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
157
+
</button>
123
158
159
+
<!-- Connect Atmosphere button (show if not connected) -->
160
+
<button
161
+
v-else
162
+
type="button"
163
+
class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
164
+
@click="handleShowAuth"
165
+
>
166
+
<span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
167
+
<span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
168
+
</span>
169
+
<span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
170
+
</button>
171
+
</div>
172
+
173
+
<!-- Divider -->
174
+
<div class="mx-4 my-2 border-t border-border" />
175
+
176
+
<!-- Navigation links -->
177
+
<div class="flex-1 overflow-y-auto overscroll-contain py-2">
178
+
<!-- App navigation -->
179
+
<div class="px-2 py-2">
124
180
<NuxtLink
125
181
:to="{ name: 'compare' }"
126
182
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
···
164
220
<!-- Divider -->
165
221
<div class="mx-4 my-2 border-t border-border" />
166
222
167
-
<!-- External links (from footer) -->
223
+
<!-- Informational links -->
224
+
<div class="px-2 py-2">
225
+
<NuxtLink
226
+
:to="{ name: 'about' }"
227
+
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
228
+
@click="closeMenu"
229
+
>
230
+
<span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
231
+
{{ $t('footer.about') }}
232
+
</NuxtLink>
233
+
234
+
<NuxtLink
235
+
:to="{ name: 'privacy' }"
236
+
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
237
+
@click="closeMenu"
238
+
>
239
+
<span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
240
+
{{ $t('privacy_policy.title') }}
241
+
</NuxtLink>
242
+
</div>
243
+
244
+
<!-- Divider -->
245
+
<div class="mx-4 my-2 border-t border-border" />
246
+
247
+
<!-- External links -->
168
248
<div class="px-2 py-2">
169
249
<span class="px-3 py-2 font-mono text-xs text-fg-subtle uppercase tracking-wider">
170
250
{{ $t('nav.links') }}
···
226
306
/>
227
307
</a>
228
308
</div>
229
-
</div>
230
-
231
-
<!-- Divider -->
232
-
<div class="mx-4 my-2 border-t border-border" />
233
-
234
-
<!-- Account section -->
235
-
<div class="px-2 py-2">
236
-
<span
237
-
class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
238
-
>
239
-
{{ $t('account_menu.account') }}
240
-
</span>
241
-
242
-
<!-- npm CLI connection status (only show if connected) -->
243
-
<button
244
-
v-if="isConnected && npmUser"
245
-
type="button"
246
-
class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
247
-
@click="handleShowConnector"
248
-
>
249
-
<img
250
-
v-if="npmAvatar"
251
-
:src="npmAvatar"
252
-
:alt="npmUser"
253
-
width="20"
254
-
height="20"
255
-
class="w-5 h-5 rounded-full object-cover"
256
-
/>
257
-
<span
258
-
v-else
259
-
class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
260
-
>
261
-
<span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
262
-
</span>
263
-
<span class="flex-1">~{{ npmUser }}</span>
264
-
<span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
265
-
</button>
266
-
267
-
<!-- Atmosphere connection status -->
268
-
<button
269
-
v-if="atprotoUser"
270
-
type="button"
271
-
class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
272
-
@click="handleShowAuth"
273
-
>
274
-
<img
275
-
v-if="atprotoUser.avatar"
276
-
:src="atprotoUser.avatar"
277
-
:alt="atprotoUser.handle"
278
-
width="20"
279
-
height="20"
280
-
class="w-5 h-5 rounded-full object-cover"
281
-
/>
282
-
<span
283
-
v-else
284
-
class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
285
-
>
286
-
<span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
287
-
</span>
288
-
<span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
289
-
</button>
290
-
291
-
<!-- Connect Atmosphere button (show if not connected) -->
292
-
<button
293
-
v-else
294
-
type="button"
295
-
class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
296
-
@click="handleShowAuth"
297
-
>
298
-
<span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
299
-
<span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
300
-
</span>
301
-
<span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
302
-
</button>
303
309
</div>
304
310
</nav>
305
311
</Transition>