menu closes when clicking somwhere else
This commit is contained in:
parent
516ce43025
commit
fbf33445d9
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user