blog/src/components/MobileHeader.astro
2025-03-20 18:09:39 +00:00

43 lines
1.1 KiB
Text

---
import themeConfig from '@/config'
import { ui } from '@/i18n/ui'
import { getPageInfo } from '@/utils/page'
const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
const currentUI = ui[currentLang as keyof typeof ui]
const { title, subtitle, i18nTitle } = themeConfig.site
const headerTitle = i18nTitle ? currentUI.title : title
const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
const { titleGap } = themeConfig.global
const marginBottom = {
1: 'mb-1.625',
2: 'mb-2.875',
3: 'mb-4.125',
}[titleGap] || 'mb-2.875'
---
<header class="mb-15 lg:hidden">
<h2 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
<!-- Fix text cropping issues during view transition on ios by adding a div tag -->
<div
class="box-content inline-block pr-1.25"
transition:name={`site-title-${currentLang}`}
data-disable-transition-on-theme
>
<a href={getLocalizedPath('/')}>
{headerTitle}
</a>
</div>
</h2>
{headerSubtitle && (
<div
class="text-3.5 opacity-0"
aria-hidden="true"
>
{headerSubtitle}
</div>
)}
</header>