import { spring } from 'svelte/motion';

// Using a spring to make it smoother, but not necessary

let animation = spring(0, {

stiffness: 0.08,

damping: 0.5

});

function toggleDropdown() {

if ($animation == 1) {

animation.set(0);

} else {

animation.set(1);

}

}

</script>

<div class="dropdown-container" style="--animation: {$animation}">

<!-- Actual button and menu elements, no Goo effect. Menu has no background. -->

<button class="button" on:click={toggleDropdown}>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>

</button>

<div class="menu">

<div class="menu-content">

Curabitur suscipit lectus lorem, convallis convallis est blandit quis.

</div>

</div>

<!-- Just shapes with the goo effect applied. Menu here serves as the background for the true menu. -->

<div class="goo-container">

<div class="button" />

<div class="menu" />

</div>