|
1 | 1 | <script lang="ts"> |
2 | 2 | import { page } from "$app/state"; |
3 | | - let links = [ |
4 | | - ["Notifications", "/notifications"], |
5 | | - ["Tab Cloaker", "/tab-cloaker"], |
6 | | - [ |
7 | | - "Master Doc", |
8 | | - "https://docs.google.com/document/d/11yw7n2F84XOkAwpM8tF-ZYHESuus1Gg7dmJ-WJum1fk", |
9 | | - ], |
10 | | - ["ROM Library", "/roms"], |
11 | | - ["Discord", "https://discord.gg/GDEFRBTT3Z"], |
12 | | - ]; |
13 | | -
|
14 | | - // Use dirty URLs if hosted on amazonaws |
15 | | - if (typeof window !== "undefined" && window.origin.includes("amazonaws")) { |
16 | | - links = [ |
| 3 | + const links = (typeof window !== "undefined" && window.origin.includes("amazonaws")) |
| 4 | + ? [ |
| 5 | + ["Notifications", "/notifications"], |
17 | 6 | ["Tab Cloaker", "/tab-cloaker.html"], |
18 | 7 | [ |
19 | 8 | "Master Doc", |
20 | 9 | "https://docs.google.com/document/d/11yw7n2F84XOkAwpM8tF-ZYHESuus1Gg7dmJ-WJum1fk", |
21 | 10 | ], |
22 | 11 | ["ROM Library", "/roms.html"], |
23 | 12 | ["Discord", "https://discord.gg/GDEFRBTT3Z"], |
| 13 | + ] |
| 14 | + : [ |
| 15 | + ["Notifications", "/notifications"], |
| 16 | + ["Tab Cloaker", "/tab-cloaker"], |
| 17 | + [ |
| 18 | + "Master Doc", |
| 19 | + "https://docs.google.com/document/d/11yw7n2F84XOkAwpM8tF-ZYHESuus1Gg7dmJ-WJum1fk", |
| 20 | + ], |
| 21 | + ["ROM Library", "/roms"], |
| 22 | + ["Discord", "https://discord.gg/GDEFRBTT3Z"], |
24 | 23 | ]; |
25 | | - } |
26 | 24 |
|
27 | 25 | const currentPath = page.url.pathname; |
28 | 26 | let menuOpen = $state(false); |
|
48 | 46 | </li> |
49 | 47 | {/each} |
50 | 48 | </ul> |
51 | | - <button class="mobile-menu-button" onclick={() => menuOpen = !menuOpen} aria-label="Open menu"> |
52 | | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 49 | + <button |
| 50 | + class="mobile-menu-button" |
| 51 | + onclick={() => (menuOpen = !menuOpen)} |
| 52 | + aria-label="Open menu" |
| 53 | + > |
| 54 | + <svg |
| 55 | + xmlns="http://www.w3.org/2000/svg" |
| 56 | + width="24" |
| 57 | + height="24" |
| 58 | + viewBox="0 0 24 24" |
| 59 | + fill="none" |
| 60 | + stroke="currentColor" |
| 61 | + stroke-width="2" |
| 62 | + stroke-linecap="round" |
| 63 | + stroke-linejoin="round" |
| 64 | + > |
53 | 65 | <line x1="3" y1="12" x2="21" y2="12"></line> |
54 | 66 | <line x1="3" y1="6" x2="21" y2="6"></line> |
55 | 67 | <line x1="3" y1="18" x2="21" y2="18"></line> |
|
61 | 73 | {#if menuOpen} |
62 | 74 | <!-- svelte-ignore a11y_click_events_have_key_events --> |
63 | 75 | <!-- svelte-ignore a11y_no_static_element_interactions --> |
64 | | - <div class="mobile-menu-overlay" onclick={() => menuOpen = false}> |
| 76 | + <div class="mobile-menu-overlay" onclick={() => (menuOpen = false)}> |
65 | 77 | <div class="mobile-menu" onclick={(e) => e.stopPropagation()}> |
66 | | - <button class="close-button" onclick={() => menuOpen = false} aria-label="Close menu">×</button> |
| 78 | + <button |
| 79 | + class="close-button" |
| 80 | + onclick={() => (menuOpen = false)} |
| 81 | + aria-label="Close menu">×</button |
| 82 | + > |
67 | 83 | <ul> |
68 | 84 | {#each links as [name, url]} |
69 | 85 | <li class:active={currentPath === url}> |
|
73 | 89 | rel={url.startsWith("http") |
74 | 90 | ? "noopener noreferrer" |
75 | 91 | : undefined} |
76 | | - onclick={() => menuOpen = false} |
| 92 | + onclick={() => (menuOpen = false)} |
77 | 93 | > |
78 | 94 | {name} |
79 | 95 | </a> |
|
225 | 241 | transition: background 0.2s; |
226 | 242 | } |
227 | 243 | .mobile-menu-button:hover { |
228 | | - background: rgba(0,0,0,0.1); |
| 244 | + background: rgba(0, 0, 0, 0.1); |
229 | 245 | } |
230 | 246 |
|
231 | 247 | .mobile-menu-overlay { |
|
234 | 250 | left: 0; |
235 | 251 | width: 100vw; |
236 | 252 | height: 100vh; |
237 | | - background: rgba(0,0,0,0.5); |
| 253 | + background: rgba(0, 0, 0, 0.5); |
238 | 254 | z-index: 1001; |
239 | 255 | display: flex; |
240 | 256 | justify-content: flex-end; |
|
254 | 270 | } |
255 | 271 |
|
256 | 272 | @keyframes slideIn { |
257 | | - from { transform: translateX(100%); } |
258 | | - to { transform: translateX(0); } |
| 273 | + from { |
| 274 | + transform: translateX(100%); |
| 275 | + } |
| 276 | + to { |
| 277 | + transform: translateX(0); |
| 278 | + } |
259 | 279 | } |
260 | 280 |
|
261 | 281 | .mobile-menu .close-button { |
|
0 commit comments