src/components/layout/Header.astro 4.0 K raw
1
---
2
import ThemeToggle from "../ThemeToggle.astro";
3
import { MENU_LINKS } from "@/data/constants";
4
5
const url = new URL(Astro.request.url);
6
---
7
8
<script>
9
	import { toggleClass } from "@/utils";
10
11
	document.addEventListener("DOMContentLoaded", () => {
12
		const header = document.getElementById("main-header") as HTMLElement;
13
		const toggleMenuButton = document.getElementById("toggle-navigation-menu") as HTMLButtonElement;
14
		let menuOpen = false;
15
16
		toggleMenuButton.addEventListener("click", () => {
17
			toggleClass(header, "menu-open");
18
			menuOpen = !menuOpen;
19
			toggleMenuButton.setAttribute("aria-expanded", menuOpen.toString());
20
		});
21
	});
22
</script>
23
24
<header id="main-header" class="group relative mb-28 flex items-center sm:pl-[4.5rem]">
25
	<div class="flex sm:flex-col">
26
		<a
27
			href="/"
28
			class="inline-flex items-center sm:relative sm:inline-block"
29
			aria-current={url.pathname === "/" ? "page" : false}
30
		>
31
			<svg
32
				class="mr-3 h-10 w-6 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12"
33
				aria-hidden="true"
34
				focusable="false"
35
				fill="none"
36
				xmlns="http://www.w3.org/2000/svg"
37
				viewBox="0 0 400 400"
38
			>
39
				<title>Logo</title>
40
				<svg
41
					width="387"
42
					height="334"
43
					viewBox="0 0 387 334"
44
					fill="none"
45
					xmlns="http://www.w3.org/2000/svg"
46
				>
47
					<path
48
						d="M6.80859 330H379.955L275.803 149.691L243.564 175.635L214.147 154.88L193.382 175.635L165.695 154.88L147.526 175.635L113.457 145.367L6.80859 330Z"
49
						fill="#7c6f64"></path>
50
					<path
51
						d="M193.382 7L113.457 145.367L147.526 175.635L165.695 154.88L193.382 175.635L214.147 154.88L243.564 175.635L275.803 149.691L193.382 7Z"
52
						fill="#a89984"></path>
53
					<path
54
						d="M113.457 145.367L6.80859 330H379.955L275.803 149.691M113.457 145.367L193.382 7L275.803 149.691M113.457 145.367L147.526 175.635L165.695 154.88L193.382 175.635L214.147 154.88L243.564 175.635L275.803 149.691"
55
						stroke="black"
56
						stroke-width="7"></path>
57
					<line x1="206.608" y1="101.617" x2="230.392" y2="142.787" stroke="black" stroke-width="5"
58
					></line>
59
				</svg>
60
			</svg>
61
			<span class="text-xl font-bold sm:text-2xl">Steve Simkins</span>
62
		</a>
63
		<nav
64
			id="navigation-menu"
65
			class="absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md bg-[color:var(--theme-menu-bg)] py-4 text-accent shadow backdrop-blur group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:mt-1 sm:-ml-4 sm:flex sm:flex-row sm:items-center sm:divide-x sm:divide-dashed sm:divide-accent sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
66
			aria-label="Main menu"
67
		>
68
			{
69
				MENU_LINKS.map((link) => (
70
					<a
71
						href={link.path}
72
						class="py-4 px-4 sm:py-0 sm:hover:underline"
73
						aria-current={url.pathname === link.path ? "page" : false}
74
						rel="prefetch"
75
					>
76
						{link.title}
77
					</a>
78
				))
79
			}
80
		</nav>
81
	</div>
82
	<ThemeToggle />
83
	<button
84
		id="toggle-navigation-menu"
85
		class="group relative ml-8 h-7 w-7 sm:invisible sm:hidden"
86
		type="button"
87
		aria-label="Open main menu"
88
		aria-expanded="false"
89
		aria-haspopup="menu"
90
	>
91
		<svg
92
			id="line-svg"
93
			class="absolute top-1/2 left-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"
94
			aria-hidden="true"
95
			focusable="false"
96
			xmlns="http://www.w3.org/2000/svg"
97
			fill="none"
98
			viewBox="0 0 24 24"
99
			stroke-width="1.5"
100
			stroke="currentColor"
101
		>
102
			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"></path>
103
		</svg>
104
		<svg
105
			id="cross-svg"
106
			class="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-0 text-accent opacity-0 transition-all group-aria-expanded:scale-100 group-aria-expanded:opacity-100"
107
			class="text-accent"
108
			aria-hidden="true"
109
			focusable="false"
110
			xmlns="http://www.w3.org/2000/svg"
111
			fill="none"
112
			viewBox="0 0 24 24"
113
			stroke-width="1.5"
114
			stroke="currentColor"
115
		>
116
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
117
		</svg>
118
	</button>
119
</header>