1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
import Search from "@/components/Search.astro";
import ThemeToggle from "@/components/ThemeToggle.astro";
import { menuLinks } from "@/site.config";
import { siteConfig } from "../../site.config";
---
<header class="group relative mb-28 flex items-center sm:ps-18" id="main-header">
<div class="flex sm:flex-col">
<a
aria-current={Astro.url.pathname === "/" ? "page" : false}
class="inline-flex items-center grayscale hover:filter-none sm:relative sm:inline-block"
href="/"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="me-3 h-15 w-9 sm:absolute sm:-start-18 sm:me-0 sm:h-16 sm:w-18"
aria-hidden="true"
fill="none"
focusable="false"
viewBox="0 0 360 360"
>
<defs></defs>
<g id="group0" transform="translate(70.8749995138331, 7.01999995184633)" fill="none">
<path
id="shape0"
transform="translate(13.2299999092488, 0)"
fill="#306b4e"
fill-rule="evenodd"
stroke="#306b4e"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M0 91.53C32.9712 58.5548 0.838759 20.1965 65.61 7.155C90.6937 0.313979 85.2036 3.0468 97.2 0C98.3977 0.598844 109.07 14.0691 108.675 15.255C108.457 17.8034 108.106 21.0139 107.152 22.7948C88.7999 18.6814 63.7461 26.7779 52.11 35.505C18.588 76.6103 48.6792 86.5536 22.005 95.445C18.7941 96.5153 0.27 93.935 0.27 91.53"
></path>
<path
id="shape1"
transform="translate(48.5999996666284, 29.3959603876917)"
fill="#306b4e"
fill-rule="evenodd"
stroke="#306b4e"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M0 109.114L8.1 96.559L8.64 40.939C35.4994 -24.1754 90.6285 2.75644 101.79 24.199L40.5 41.749L29.835 56.599L49.005 101.689L41.04 99.259L19.305 114.784C19.125 114.874 12.69 112.984 0 109.114Z"
></path>
<path
id="shape2"
transform="translate(89.2349993878927, 58.9949995953239)"
fill="#306b4e"
fill-rule="evenodd"
stroke="#306b4e"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M4.86 20.385L70.335 0L79.245 22.815L34.02 24.705L37.8 34.02L87.615 34.56L66.42 93.825L18.09 75.33L0 27.405C0 27.405 1.62 25.065 4.86 20.385Z"
></path>
<path
id="shape3"
transform="translate(0, 151.803088248821)"
fill="#306b4e"
fill-rule="evenodd"
stroke="#306b4e"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M73.17 6.01191C59.7458 10.5419 54.7859 14.4672 22.815 20.3219L22.275 41.7869L0 32.8769C22.0145 1.58636 46.4045 -7.36864 73.17 6.01191Z"
></path>
</g><path
id="shape4"
transform="translate(101.789996268193, 159.569994149873)"
fill="#b04304"
fill-rule="evenodd"
stroke="#b04304"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M0 26.19C25.2141 21.5944 52.0199 14.6103 79.38 0C102.4 9.84952 124.488 20.1337 157.95 25.11L157.14 71.28C72.4992 62.1903 35.5629 78.3158 0.27 95.31C0.99 94.95 0.9 71.91 0 26.19Z"
></path><path
id="shape5"
transform="translate(154.169994347847, 243.809991061482)"
fill="#b04304"
fill-rule="evenodd"
stroke="#b04304"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M0 92.34L26.73 111.24C68.8327 85.2955 105.901 55.7671 106.11 0C46.5948 1.94824 11.2248 32.7282 0 92.34Z"
></path><path
id="shape6"
transform="translate(117.989995674272, 280.709989708662)"
fill="#b04304"
fill-rule="evenodd"
stroke="#b04304"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M0 15.03L7.02 24.93C9.86684 17.4815 14.7638 11.673 19.98 6.12L11.43 0C8.46106 1.32415 4.65106 6.33415 0 15.03Z"
></path><path
id="shape7"
transform="translate(141.209994822985, 257.489990559949)"
fill="#b04304"
fill-rule="evenodd"
stroke="#b04304"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M0 12.51L7.47 17.73C12.2932 12.4756 18.0945 8.93282 23.85 5.31L17.19 0C14.5911 0.898115 8.86111 5.06811 0 12.51Z"
></path><path
id="shape8"
transform="translate(172.979993658239, 247.469668124269)"
fill="#b04304"
fill-rule="evenodd"
stroke="#b04304"
stroke-width="2.16"
stroke-linecap="square"
stroke-linejoin="bevel"
d="M0 4.44032L4.68 8.13032C8.94565 5.54974 14.0379 4.34681 18.99 2.91032L17.64 0.0303228C15.7496 -0.234517 9.86959 1.23548 0 4.44032Z"
></path>
</svg>
<span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span>
</a>
<nav
aria-label="Main menu"
class="bg-global-bg/85 text-accent sm:divide-accent absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md py-4 shadow backdrop-blur-sm group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:-ms-4 sm:mt-1 sm:flex sm:flex-row sm:items-center sm:divide-x sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
id="navigation-menu"
>
{
menuLinks
.filter((link) => link.path !== "/privacy-policy/")
.map((link) => (
<a
aria-current={Astro.url.pathname === link.path ? "page" : false}
class="px-4 py-4 underline-offset-2 hover:underline sm:py-0"
data-astro-prefetch
href={link.path}
>
{link.title}
</a>
))
}
</nav>
</div>
<Search />
<ThemeToggle />
<mobile-button>
<button
aria-expanded="false"
aria-haspopup="menu"
class="group relative ms-4 h-7 w-7 sm:invisible sm:hidden"
id="toggle-navigation-menu"
type="button"
>
<span class="sr-only">Open main menu</span>
<svg
aria-hidden="true"
class="absolute start-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 transition-all group-aria-expanded:scale-0 group-aria-expanded:opacity-0"
fill="none"
focusable="false"
id="line-svg"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3.75 9h16.5m-16.5 6.75h16.5" stroke-linecap="round" stroke-linejoin="round"
></path>
</svg>
<svg
aria-hidden="true"
class="text-accent absolute start-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-0 opacity-0 transition-all group-aria-expanded:scale-100 group-aria-expanded:opacity-100"
class="text-accent"
fill="none"
focusable="false"
id="cross-svg"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</mobile-button>
</header>
<script>
import { toggleClass } from "@/utils/domElement";
class MobileNavBtn extends HTMLElement {
#menuOpen: boolean = false;
connectedCallback() {
const headerEl = document.getElementById("main-header")!;
const mobileButtonEl = this.querySelector<HTMLButtonElement>("button");
mobileButtonEl?.addEventListener("click", () => {
if (headerEl) toggleClass(headerEl, "menu-open");
this.#menuOpen = !this.#menuOpen;
mobileButtonEl.setAttribute("aria-expanded", this.#menuOpen.toString());
});
}
}
customElements.define("mobile-button", MobileNavBtn);
</script>
|
