|
<script lang="ts"> |
|
import { dev } from "$app/environment"; |
|
import { session } from "$lib/stores/session"; |
|
import { createPopover } from "@melt-ui/svelte"; |
|
|
|
let innerWidth: number; |
|
let innerHeight: number; |
|
|
|
function toggleTheme() { |
|
document.body.classList.toggle("dark"); |
|
} |
|
|
|
const { |
|
elements: { trigger, content }, |
|
} = createPopover(); |
|
</script> |
|
|
|
<svelte:window bind:innerWidth bind:innerHeight /> |
|
|
|
{#if dev} |
|
<div class="abs-x-center fixed bottom-0 z-50"> |
|
<button class="rounded-t-md bg-gray-500 px-3 py-1 text-xs text-white hover:bg-gray-600" {...$trigger} use:trigger> |
|
Debug |
|
</button> |
|
|
|
<div |
|
class="mb-2 w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800" |
|
{...$content} |
|
use:content |
|
> |
|
<h3 class="mb-3 text-lg font-semibold dark:text-white">Debug Menu</h3> |
|
|
|
<div class="space-y-3"> |
|
<div class="text-sm dark:text-gray-300"> |
|
<p>Viewport: {innerWidth}x{innerHeight}</p> |
|
<p>Environment: {import.meta.env.MODE}</p> |
|
</div> |
|
|
|
<div class="flex flex-col gap-2"> |
|
<button |
|
class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" |
|
on:click={toggleTheme} |
|
> |
|
Toggle Theme |
|
</button> |
|
<button |
|
class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" |
|
on:click={() => { |
|
console.log($session); |
|
}} |
|
> |
|
Log session to console |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{/if} |
|
|
|
<style> |
|
|
|
</style> |
|
|
