|
|
@ -1,6 +1,7 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { getContext } from 'svelte';
|
|
|
|
import { getContext } from 'svelte';
|
|
|
|
|
|
|
|
import { Icon } from '@sveltejs/site-kit/components';
|
|
|
|
|
|
|
|
import { click_outside, focus_outside } from '@sveltejs/site-kit/actions';
|
|
|
|
const { logout } = getContext('app');
|
|
|
|
const { logout } = getContext('app');
|
|
|
|
|
|
|
|
|
|
|
|
export let user;
|
|
|
|
export let user;
|
|
|
@ -11,9 +12,21 @@
|
|
|
|
$: name = user.github_name || user.github_login;
|
|
|
|
$: name = user.github_name || user.github_login;
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="user" on:mouseenter={() => (showMenu = true)} on:mouseleave={() => (showMenu = false)}>
|
|
|
|
<div
|
|
|
|
<span>{name}</span>
|
|
|
|
class="user"
|
|
|
|
<img alt="{name} avatar" src={user.github_avatar_url} />
|
|
|
|
use:focus_outside={() => (showMenu = false)}
|
|
|
|
|
|
|
|
use:click_outside={() => (showMenu = false)}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
on:click={() => (showMenu = !showMenu)}
|
|
|
|
|
|
|
|
aria-expanded={showMenu}
|
|
|
|
|
|
|
|
class="trigger"
|
|
|
|
|
|
|
|
aria-label={name}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span class="name">{name}</span>
|
|
|
|
|
|
|
|
<img alt="" src={user.github_avatar_url} />
|
|
|
|
|
|
|
|
<Icon name={showMenu ? 'chevron-up' : 'chevron-down'} />
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
{#if showMenu}
|
|
|
|
{#if showMenu}
|
|
|
|
<div class="menu">
|
|
|
|
<div class="menu">
|
|
|
@ -27,43 +40,44 @@
|
|
|
|
.user {
|
|
|
|
.user {
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
padding: 0em 1.2rem 0 1.6rem;
|
|
|
|
padding: 0em 0 0 0.3rem;
|
|
|
|
height: 0.8em;
|
|
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
|
|
z-index: 99;
|
|
|
|
z-index: 99;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user::after {
|
|
|
|
.trigger {
|
|
|
|
/* embiggen hit zone, so log out menu doesn't disappear */
|
|
|
|
display: flex;
|
|
|
|
position: absolute;
|
|
|
|
align-items: center;
|
|
|
|
content: '';
|
|
|
|
gap: 0.75rem;
|
|
|
|
width: 100%;
|
|
|
|
outline-offset: 2px;
|
|
|
|
height: 3.2rem;
|
|
|
|
transform: translateY(0.1rem);
|
|
|
|
left: 0;
|
|
|
|
--opacity: 0.7;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.trigger:hover,
|
|
|
|
|
|
|
|
.trigger:focus-visible,
|
|
|
|
|
|
|
|
.trigger[aria-expanded='true'] {
|
|
|
|
|
|
|
|
--opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
.name {
|
|
|
|
/* position: relative; padding: 0 2em 0 0; */
|
|
|
|
|
|
|
|
line-height: 1;
|
|
|
|
line-height: 1;
|
|
|
|
display: none;
|
|
|
|
display: none;
|
|
|
|
font-family: var(--sk-font);
|
|
|
|
font-family: var(--sk-font);
|
|
|
|
font-size: 1.6rem;
|
|
|
|
font-size: 1.6rem;
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user:hover span {
|
|
|
|
.name,
|
|
|
|
opacity: 1;
|
|
|
|
.trigger :global(.icon) {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
opacity: var(--opacity);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
img {
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: -0.05em;
|
|
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
|
|
width: 2.1rem;
|
|
|
|
width: 2.1rem;
|
|
|
|
height: 2.1rem;
|
|
|
|
height: 2.1rem;
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
|
border-radius: 0.2rem;
|
|
|
|
border-radius: 0.2rem;
|
|
|
|
|
|
|
|
transform: translateY(-0.1rem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.menu {
|
|
|
|
.menu {
|
|
|
@ -95,14 +109,16 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.menu button:hover,
|
|
|
|
.menu button:hover,
|
|
|
|
.menu a:hover {
|
|
|
|
.menu button:focus-visible,
|
|
|
|
|
|
|
|
.menu a:hover,
|
|
|
|
|
|
|
|
.menu a:focus-visible {
|
|
|
|
opacity: 1;
|
|
|
|
opacity: 1;
|
|
|
|
color: inherit;
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (min-width: 600px) {
|
|
|
|
@media (min-width: 600px) {
|
|
|
|
.user {
|
|
|
|
.user {
|
|
|
|
padding: 0em 3.2rem 0 1.6rem;
|
|
|
|
padding: 0em 0 0 1.6rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
img {
|
|
|
@ -110,7 +126,8 @@
|
|
|
|
height: 2.4rem;
|
|
|
|
height: 2.4rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
.name,
|
|
|
|
|
|
|
|
.trigger :global(.icon) {
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|