blog/src/components/MobileHeader.astro

39 lines
951 B
Text

---
import themeConfig from '@/config'
import { getPagePath } from '@/utils/i18n/path'
const { title, subtitle } = themeConfig.site
const { titleSpace } = themeConfig.global
const currentPath = Astro.url.pathname
const { getLocalizedPath } = getPagePath(currentPath)
const marginBottom = {
1: 'mb-1.625',
2: 'mb-2.875',
3: 'mb-4.125',
}[titleSpace] || 'mb-2.875'
---
<header class="mb-10.625 lg:hidden">
<h3 class={`${marginBottom} mt-2.9375 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"
data-disable-transition-on-theme
>
<a href={getLocalizedPath('/')}>
{title}
</a>
</div>
</h3>
{subtitle && (
<div
class="text-3.5 opacity-0"
aria-hidden="true"
>
{subtitle}
</div>
)}
</header>