diff options
| author | Fuwn <[email protected]> | 2024-01-05 19:41:11 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-05 19:41:11 -0800 |
| commit | 12cf6f1531c00d84bf1deb2e08815d38492bd58c (patch) | |
| tree | 69d87e311e9b41c9107989b96f38556d0787e9e0 /src/routes | |
| parent | feat(css): better shadow (diff) | |
| download | due.moe-12cf6f1531c00d84bf1deb2e08815d38492bd58c.tar.xz due.moe-12cf6f1531c00d84bf1deb2e08815d38492bd58c.zip | |
feat(css): navigation avatar
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+layout.svelte | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a15e14ee..e148a076 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,7 +10,7 @@ export let data; - let currentUserIdentity = { name: '...', id: -1 }; + let currentUserIdentity = { name: '...', id: -1, avatar: '' }; onMount(async () => { if (browser && localStorage.getItem('redirect')) { @@ -43,7 +43,7 @@ <a href="/tools" class="header-item">Tools</a> <a href="/settings" class="header-item">Settings</a> - <span style="opacity: 50%;">|</span> + <span style="opacity: 50%;" class="header-item">|</span> {#if data.user} <a href={`/user/${currentUserIdentity.name}`} class="header-item">Profile</a> @@ -63,11 +63,12 @@ Log in with AniList </a> {:else} - <a href="/api/authentication/log-out" class="header-item" - >Log out<button class="smaller-button button-badge badge-info" - >{currentUserIdentity.name}</button - ></a - > + <a href="/api/authentication/log-out" class="header-item">Log out </a> + {#if data.user} + <a href={`/user/${currentUserIdentity.name}`} class="header-item"> + <img class="fancy-image" id="avatar" src={currentUserIdentity.avatar} alt="Avatar" /> + </a> + {/if} {/if} </div> </div> @@ -134,7 +135,7 @@ } .header-item { - margin: 0 0.625rem; + margin: 0 0.5rem; } .header-item:hover { @@ -144,4 +145,10 @@ .header-item:active { outline: none; } + + #avatar { + width: 2em; + display: inline-block; + vertical-align: middle; + } </style> |