|
13 | 13 | import Discord from "./Discord.svelte" |
14 | 14 | import GitHub from "./GitHub.svelte" |
15 | 15 | import YouTube from "./YouTube.svelte" |
| 16 | + import UserCog from "svelte-lucide/UserCog.svelte" |
16 | 17 |
|
17 | 18 | let showMenu = $state(false) |
18 | 19 | let showProfile = $state(false) |
|
62 | 63 |
|
63 | 64 | <nav class="col-span-12 row-span-1 w-full flex-col text-sm xl:text-base"> |
64 | 65 | <div |
65 | | - class="bg-surface-200/30 dark:bg-surface-800/30 flex h-full justify-between font-semibold backdrop-blur-md" |
| 66 | + class="flex h-full justify-between bg-surface-200/30 font-semibold backdrop-blur-md dark:bg-surface-800/30" |
66 | 67 | > |
67 | 68 | <button |
68 | 69 | name="Menu" |
69 | 70 | aria-label="Open the navigation menu" |
70 | | - class="justify-left text-primary-500 my-auto flex h-full p-2 align-middle lg:hidden" |
| 71 | + class="justify-left my-auto flex h-full p-2 align-middle text-primary-500 lg:hidden" |
71 | 72 | onclick={() => { |
72 | 73 | showMenu = !showMenu |
73 | 74 | if (showMenu) showProfile = false |
74 | 75 | }} |
75 | 76 | > |
76 | 77 | {#if showMenu} |
77 | | - <X class="text-surface-900-100 mx-2 my-auto" /> |
| 78 | + <X class="mx-2 my-auto text-surface-900-100" /> |
78 | 79 | {:else} |
79 | | - <Menu class="text-surface-900-100 mx-2 my-auto" /> |
| 80 | + <Menu class="mx-2 my-auto text-surface-900-100" /> |
80 | 81 | {/if} |
81 | 82 | <Logo selected={true} /> |
82 | 83 | </button> |
|
85 | 86 | <li class="h-12"> |
86 | 87 | <a |
87 | 88 | href="/" |
88 | | - class="hover:text-primary-600-400 flex h-full place-content-center place-items-center" |
| 89 | + class="flex h-full place-content-center place-items-center hover:text-primary-600-400" |
89 | 90 | class:text-primary-600-400={"Home" === currentPage} |
90 | 91 | aria-label="Navigate to home page" |
91 | 92 | > |
|
97 | 98 | <li class="h-12"> |
98 | 99 | <a |
99 | 100 | href={getLink(route)} |
100 | | - class="hover:text-primary-600-400 flex h-full place-content-center place-items-center" |
| 101 | + class="flex h-full place-content-center place-items-center hover:text-primary-600-400" |
101 | 102 | class:text-primary-600-400={route === currentPage} |
102 | 103 | aria-label="Navigate to {route.toLowerCase()} page" |
103 | 104 | > |
|
119 | 120 | }} |
120 | 121 | > |
121 | 122 | {#if profile} |
122 | | - <span class="group-hover:text-primary-500 mx-2 my-auto hidden md:block"> |
| 123 | + <span class="mx-2 my-auto hidden group-hover:text-primary-500 md:block"> |
123 | 124 | {profile.username} |
124 | 125 | </span> |
125 | 126 | {/if} |
|
145 | 146 | </div> |
146 | 147 |
|
147 | 148 | <ul |
148 | | - class="bg-surface-200/30 dark:bg-surface-800/30 absolute z-50 w-full backdrop-blur-md lg:hidden {showMenu |
| 149 | + class="absolute z-50 w-full bg-surface-200/30 backdrop-blur-md lg:hidden dark:bg-surface-800/30 {showMenu |
149 | 150 | ? 'flex flex-col' |
150 | 151 | : 'hidden'}" |
151 | 152 | > |
152 | 153 | {#each routes as route, idx (route)} |
153 | 154 | <li class="h-12"> |
154 | 155 | <a |
155 | 156 | href={getLink(route)} |
156 | | - class="hover:text-primary-400 dark:hover:text-primary-100 flex h-full place-content-center place-items-center" |
| 157 | + class="flex h-full place-content-center place-items-center hover:text-primary-400 dark:hover:text-primary-100" |
157 | 158 | class:text-primary-500={route === currentPage} |
158 | 159 | class:dark:text-primary-400={route === currentPage} |
159 | 160 | aria-label="Navigate to {route.toLowerCase()} page" |
|
179 | 180 |
|
180 | 181 | <form |
181 | 182 | method="POST" |
182 | | - class="bg-surface-200/30 dark:bg-surface-800/30 absolute z-50 w-full py-14 backdrop-blur-md {showProfile |
| 183 | + class="absolute z-50 w-full bg-surface-200/30 py-14 backdrop-blur-md dark:bg-surface-800/30 {showProfile |
183 | 184 | ? 'flex flex-col' |
184 | 185 | : 'hidden'}" |
185 | 186 | use:enhance |
|
191 | 192 |
|
192 | 193 | <a |
193 | 194 | href="/user/{profile.id}" |
194 | | - class="btn preset-filled-secondary-500 mx-auto flex" |
| 195 | + class="mx-auto my-2 btn flex preset-filled-secondary-500" |
195 | 196 | aria-label="Open profile page" |
196 | 197 | onclick={() => (showProfile = false)} |
197 | 198 | > |
198 | 199 | <UserRound /> |
199 | 200 | Profile |
200 | 201 | </a> |
| 202 | + |
| 203 | + {#if profile.role == "administrator"} |
| 204 | + <a |
| 205 | + href="/auth" |
| 206 | + class="mx-auto btn flex preset-filled-secondary-500" |
| 207 | + aria-label="Login as a different user" |
| 208 | + onclick={() => (showProfile = false)} |
| 209 | + > |
| 210 | + <UserCog /> |
| 211 | + Login As |
| 212 | + </a> |
| 213 | + {/if} |
201 | 214 | </div> |
202 | 215 | </header> |
203 | 216 |
|
|
211 | 224 | <button |
212 | 225 | name="Logout" |
213 | 226 | aria-label="Logout" |
214 | | - class="btn preset-filled-secondary-500 mx-auto" |
| 227 | + class="mx-auto btn preset-filled-secondary-500" |
215 | 228 | formaction="/auth?/logout" |
216 | 229 | > |
217 | 230 | <LogOut /> |
|
0 commit comments