1---
 2import { getIntlayer, type Locale } from "intlayer";
 3import LocaleSwitcher from "@/components/widgets/LocaleSwitcher.astro";
 4import { DEFAULT_LOCALE, SITE_CONFIG } from "@/config.ts";
 5import { getRelativeLocaleUrl } from "@/utils/url.ts";
 6
 7interface Props {
 8  availableLocales: Locale[];
 9}
10
11const { availableLocales } = Astro.props;
12const locale = (Astro.currentLocale ?? DEFAULT_LOCALE) as Locale;
13const globalI18n = getIntlayer("global", locale);
14---
15
16<header class="header">
17  <a class="header-home" href={getRelativeLocaleUrl("/", locale)}
18    >{SITE_CONFIG.title}</a
19  >
20  <nav>
21    <ul>
22      <li>
23        <a href={getRelativeLocaleUrl("/posts", locale)}
24          >{globalI18n.posts.title}</a
25        >
26      </li>
27      <li>
28        <a href={getRelativeLocaleUrl("/about", locale)}>{globalI18n.about}</a>
29      </li>
30      <li>
31        <a href={getRelativeLocaleUrl("/links", locale)}
32          >{globalI18n.friendLinks}</a
33        >
34      </li>
35    </ul>
36    <LocaleSwitcher availableLocales={availableLocales} />
37  </nav>
38</header>
39
40<style lang="scss" is:global>
41header.header {
42  position: relative;
43  border-bottom: 0.1rem;
44  border-bottom-style: solid;
45  display: flex;
46  justify-content: space-between;
47  align-items: baseline;
48  padding-block: 0.25rem;
49
50  &::after {
51    content: "";
52    position: absolute;
53    left: 0;
54    right: 0;
55    bottom: -0.3rem;
56    background: currentColor;
57    height: 0.05rem;
58  }
59
60  .header-home {
61    font-size: 1.25rem;
62    font-weight: 500;
63  }
64
65  a {
66    color: inherit;
67    text-decoration: none;
68
69    &:hover {
70      text-decoration-line: underline;
71    }
72  }
73
74  nav {
75    display: flex;
76    align-items: baseline;
77    gap: 0.75rem;
78
79    > ul {
80      display: flex;
81      margin-block: 0;
82
83      > :not(:last-child) {
84        margin-inline-end: 0.5rem;
85      }
86    }
87  }
88}
89</style>