Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu closes when clicking somwhere else

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-22 13:12:45 +02:00
parent 516ce43025
commit fbf33445d9
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/UserHeader.svelte
View File

@ -1,10 +1,19 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte";
export let username; export let username;
function show_options(){ function toggle_options(){
const el = document.querySelector("#options") const el = document.querySelector("#options")
el.hidden = !el.hidden el.hidden = !el.hidden
} }
let src="https://new.bocken.org/static/user/thumb/" + username + ".webp" let src="https://new.bocken.org/static/user/thumb/" + username + ".webp"
onMount( () => {
document.addEventListener("click", (e) => {
const el = document.querySelector("#button")
if(!el.contains(e.target)){
document.querySelector("#options").hidden = true
}
})
})
</script> </script>
<style> <style>
/* (A) SPEECH BOX */ /* (A) SPEECH BOX */
@ -117,7 +126,7 @@ h2{
</style> </style>
{#if username} {#if username}
<button on:click={show_options} style="background-image: url({src})"> <button on:click={toggle_options} style="background-image: url({src})" id=button>
<div id=options class="speech top" hidden> <div id=options class="speech top" hidden>
<h2>{username}</h2> <h2>{username}</h2>
<ul> <ul>