Skip to content

Commit 65412ec

Browse files
serhalpserhalp
committed
fix: move quick nav back to original location
and make it a teeny bit more compact
1 parent 7c01d25 commit 65412ec

1 file changed

Lines changed: 54 additions & 54 deletions

File tree

‎app/pages/[...package].vue‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -382,60 +382,6 @@ function handleClick(event: MouseEvent) {
382382
<!-- Package header -->
383383
<header class="area-header border-b border-border">
384384
<div class="mb-4">
385-
<!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
386-
<nav
387-
v-if="displayVersion"
388-
:aria-label="$t('package.navigation')"
389-
class="hidden sm:flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md w-fit mb-3 ms-auto"
390-
>
391-
<NuxtLink
392-
v-if="docsLink"
393-
:to="docsLink"
394-
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
395-
aria-keyshortcuts="d"
396-
>
397-
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
398-
{{ $t('package.links.docs') }}
399-
<kbd
400-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
401-
aria-hidden="true"
402-
>
403-
d
404-
</kbd>
405-
</NuxtLink>
406-
<NuxtLink
407-
:to="{
408-
name: 'code',
409-
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
410-
}"
411-
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
412-
aria-keyshortcuts="."
413-
>
414-
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
415-
{{ $t('package.links.code') }}
416-
<kbd
417-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
418-
aria-hidden="true"
419-
>
420-
.
421-
</kbd>
422-
</NuxtLink>
423-
<NuxtLink
424-
:to="{ path: '/compare', query: { packages: pkg.name } }"
425-
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
426-
aria-keyshortcuts="c"
427-
>
428-
<span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
429-
{{ $t('package.links.compare') }}
430-
<kbd
431-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
432-
aria-hidden="true"
433-
>
434-
c
435-
</kbd>
436-
</NuxtLink>
437-
</nav>
438-
439385
<!-- Package name and version -->
440386
<div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
441387
<h1
@@ -507,6 +453,60 @@ function handleClick(event: MouseEvent) {
507453
</ul>
508454
</template>
509455
</ClientOnly>
456+
457+
<!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
458+
<nav
459+
v-if="displayVersion"
460+
:aria-label="$t('package.navigation')"
461+
class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
462+
>
463+
<NuxtLink
464+
v-if="docsLink"
465+
:to="docsLink"
466+
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
467+
aria-keyshortcuts="d"
468+
>
469+
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
470+
{{ $t('package.links.docs') }}
471+
<kbd
472+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
473+
aria-hidden="true"
474+
>
475+
d
476+
</kbd>
477+
</NuxtLink>
478+
<NuxtLink
479+
:to="{
480+
name: 'code',
481+
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
482+
}"
483+
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
484+
aria-keyshortcuts="."
485+
>
486+
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
487+
{{ $t('package.links.code') }}
488+
<kbd
489+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
490+
aria-hidden="true"
491+
>
492+
.
493+
</kbd>
494+
</NuxtLink>
495+
<NuxtLink
496+
:to="{ path: '/compare', query: { packages: pkg.name } }"
497+
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
498+
aria-keyshortcuts="c"
499+
>
500+
<span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
501+
{{ $t('package.links.compare') }}
502+
<kbd
503+
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
504+
aria-hidden="true"
505+
>
506+
c
507+
</kbd>
508+
</NuxtLink>
509+
</nav>
510510
</div>
511511

512512
<!-- Description container with min-height to prevent CLS -->

0 commit comments

Comments
 (0)