gwen.works
this repo has no description
1<script>
2 function toggleNav({
3 currentTarget,
4 }: MouseEvent & { currentTarget: HTMLButtonElement }) {
5 const nav = document.getElementById("nav")!;
6 const closeIcon: SVGElement = currentTarget.querySelector(".icon-close")!;
7 const openIcon: SVGElement = currentTarget.querySelector(".icon-open")!;
8
9 if (nav.dataset.state === "open") {
10 // Unlock body scroll
11 document.body.style.overflow = "auto";
12 closeIcon.style.display = "none";
13 openIcon.style.display = "block";
14 nav.dataset.state = "closed";
15 } else {
16 // Lock body scroll
17 document.body.style.overflow = "hidden";
18 closeIcon.style.display = "block";
19 openIcon.style.display = "none";
20 nav.dataset.state = "open";
21 }
22 }
23
24 document.getElementById("nav-toggle")!.addEventListener("click", (event) => {
25 if (!event.currentTarget) return;
26 if (!(event.currentTarget instanceof HTMLButtonElement)) return;
27 // @ts-ignore
28 toggleNav(event);
29 });
30</script>
31
32<nav id="nav" data-state="closed">
33 <button id="nav-toggle"
34 ><svg
35 class="icon icon-open"
36 width="21"
37 height="21"
38 viewBox="0 0 21 21"
39 fill="none"
40 version="1.1"
41 id="svg4"
42 xmlns="http://www.w3.org/2000/svg"
43 xmlns:svg="http://www.w3.org/2000/svg"
44 ><rect
45 style="fill:currentColor;stroke:none;stroke-width:1.21228"
46 id="rect267"
47 width="21.059233"
48 height="3.8504581"
49 x="-0.060698148"
50 y="-0.019991903"></rect>
51 <rect
52 style="fill:currentColor;stroke:none;stroke-width:1.21228"
53 id="rect267-3"
54 width="21.059233"
55 height="3.8504581"
56 x="-0.059473194"
57 y="8.125473"></rect>
58 <rect
59 style="fill:currentColor;stroke:none;stroke-width:1.21228"
60 id="rect267-3-6"
61 width="21.059233"
62 height="3.8504581"
63 x="-0.058047015"
64 y="17.126282"></rect></svg
65 >
66 <svg
67 class="icon icon-close"
68 style="display: none;"
69 width="21"
70 height="21"
71 viewBox="0 0 21 21"
72 fill="none"
73 version="1.1"
74 id="svg4"
75 xmlns="http://www.w3.org/2000/svg"
76 xmlns:svg="http://www.w3.org/2000/svg"
77 ><path
78 style="fill:none;stroke:currentColor;stroke-width:2.92512;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
79 d="M 1.1074475,1.058842 19.968611,19.968194"
80 id="path1195"
81 sodipodi:nodetypes="cc"></path>
82 <path
83 style="fill:none;stroke:currentColor;stroke-width:2.92512;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
84 d="M 19.930427,1.0451515 1.0692456,19.954514"
85 id="path1195-6"
86 sodipodi:nodetypes="cc"></path></svg
87 ></button
88 ><ul>
89 <li>
90 <a href="/">works</a>
91 </li><li>
92 <a href="/blog">blog</a>
93 </li><li>
94 <a href="/design">design</a>
95 </li><li>
96 <a href="/music">music</a>
97 </li><li>
98 <a href="/software">code</a>
99 </li><li>
100 <a href="/contact">contact</a>
101 </li><li>
102 {
103 // TODO find out if theres a way to get the rewritten pathname
104 Astro.locals.lang === "fr" ? (
105 <a
106 href={`https://en.gwen.works${Astro.url.pathname.replace(/^\/works\//, "/")}`}
107 >
108 in english
109 </a>
110 ) : (
111 <a
112 href={`https://fr.gwen.works${Astro.url.pathname.replace(/^\/works\//, "/")}`}
113 >
114 en français
115 </a>
116 )
117 }
118 </li>
119 </ul>
120</nav>
121
122<style type="text/css">
123 #nav-toggle {
124 font-size: 3rem;
125 cursor: pointer;
126 color: var(--primary, black);
127 }
128
129 nav {
130 position: fixed;
131 top: 0;
132 right: 0;
133 font-size: 2rem;
134 z-index: 10;
135 }
136
137 ul {
138 display: flex;
139 flex-direction: column;
140 flex-wrap: wrap;
141 justify-content: center;
142 list-style: none;
143 padding: 1rem 2rem;
144 margin: 0;
145 gap: 0.75rem;
146 }
147
148 li {
149 display: block;
150 text-align: right;
151 }
152
153 li::before {
154 content: "";
155 }
156
157 a {
158 font-weight: 600;
159 text-decoration: none;
160 opacity: 0.75;
161 transition: all 0.125s ease;
162 }
163
164 a:hover,
165 a:focus-visible {
166 opacity: 1;
167 font-weight: 800;
168 }
169
170 @media (max-width: 800px) {
171 #nav-toggle {
172 position: fixed;
173 bottom: 0;
174 right: 0;
175 width: 5rem;
176 height: 5rem;
177 z-index: 100;
178 padding: 0.5rem;
179 outline: none;
180 border: none;
181 background-color: var(--secondary, #fff);
182 box-shadow: none;
183 display: flex;
184 justify-content: center;
185 align-items: center;
186 }
187
188 #nav-toggle .icon {
189 height: 1em;
190 width: 1em;
191 color: var(--primary, #000);
192 }
193
194 nav#nav:not([data-state="open"]) > ul {
195 display: none;
196 }
197
198 nav#nav[data-state="open"] {
199 position: fixed;
200 top: 0;
201 right: 0;
202 bottom: 0;
203 left: 0;
204 z-index: 100;
205 background-color: var(--secondary, #fff);
206 overflow: auto;
207 display: flex;
208 justify-content: end;
209 }
210
211 nav#nav[data-state="open"] ul a {
212 font-size: calc(min(12vw, 10vh));
213 }
214
215 nav#nav[data-state="open"] ul {
216 flex-direction: column-reverse;
217 align-content: center;
218 justify-content: end;
219 margin-right: 2rem;
220 margin-bottom: 5rem;
221 }
222
223 nav#nav[data-state="open"] ul li {
224 padding: 0;
225 text-align: right;
226 }
227 }
228
229 @media (min-width: 800px) {
230 #nav-toggle {
231 display: none;
232 }
233
234 main {
235 padding-top: 5rem;
236 }
237 }
238</style>