elk/components/nav/NavTitle.vue

60 lines
1.7 KiB
Vue
Raw Normal View History

<script setup lang="ts">
const { env } = useBuildInfo()
const router = useRouter()
2023-01-11 05:31:35 +01:00
const back = ref<any>('')
const nuxtApp = useNuxtApp()
function onClickLogo() {
nuxtApp.hooks.callHook('elk-logo:click')
}
2023-01-11 05:31:35 +01:00
onMounted(() => {
back.value = router.options.history.state.back
})
router.afterEach(() => {
back.value = router.options.history.state.back
})
2022-11-27 17:57:16 +01:00
</script>
2022-11-14 04:33:09 +01:00
<template>
<div flex justify-between sticky top-0 bg-base z-1 py-4 native:py-7 data-tauri-drag-region>
2023-01-05 13:35:08 +01:00
<NuxtLink
flex items-end gap-3
2023-01-05 13:35:08 +01:00
py2 px-5
text-2xl
select-none
2023-01-05 13:35:08 +01:00
focus-visible:ring="2 current"
to="/home"
@click.prevent="onClickLogo"
2023-01-05 13:35:08 +01:00
>
2023-01-19 13:42:05 +01:00
<NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
<div v-show="isHydrated" hidden xl:block text-secondary>
{{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
2023-01-05 13:35:08 +01:00
</div>
</NuxtLink>
<div
2023-05-01 18:08:09 +02:00
hidden xl:flex items-center me-8 mt-2 gap-1
>
2023-05-01 18:08:09 +02:00
<CommonTooltip :content="$t('nav.back')">
<NuxtLink
:aria-label="$t('nav.back')"
:class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
@click="$router.go(-1)"
>
<div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
</NuxtLink>
</CommonTooltip>
<CommonTooltip :content="$t('action.compose')">
<NuxtLink
to="/compose"
:aria-label="$t('action.compose')"
btn-action-icon
>
2023-05-01 18:08:09 +02:00
<div text-xl i-ri:quill-pen-line user-only class="rtl-flip" btn-text />
</NuxtLink>
2023-05-01 18:08:09 +02:00
</CommonTooltip>
2022-11-14 04:33:09 +01:00
</div>
2023-01-05 13:35:08 +01:00
</div>
2022-11-14 04:33:09 +01:00
</template>