zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: floating back button for xl

Browse source
This commit is contained in:
patak 2023-01-05 13:35:08 +01:00
parent b4408422a8
commit f177ea1ea8
3 changed files with 23 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

33
components/nav/NavTitle.vue
View file

@ -6,17 +6,26 @@ const { env } = buildInfo
<template>
<!-- Use external to force refresh page and jump to top of timeline -->
<NuxtLink
flex items-end gap-4
py2 px-5
text-2xl
focus-visible:ring="2 current"
to="/"
external
>
<img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
<div hidden xl:block>
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
<div flex justify-between>
<NuxtLink
flex items-end gap-4
py2 px-5
text-2xl
focus-visible:ring="2 current"
to="/"
external
>
<img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
<div hidden xl:block>
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
</div>
</NuxtLink>
<div hidden xl:flex items-center me-8 mt-2>
<NuxtLink
@click="$router.go(-1)"
>
<div i-ri:arrow-left-line class="rtl-flip" btn-text />
</NuxtLink>
</div>
</NuxtLink>
</div>
</template>