Work on mobile layout

This commit is contained in:
Jon Staab
2024-10-09 14:19:27 -07:00
parent 6ef291d755
commit 05b320cd98
16 changed files with 213 additions and 101 deletions
+7 -2
View File
@@ -1,14 +1,18 @@
<script lang="ts">
import {page} from '$app/stores'
import Button from "@lib/components/Button.svelte"
export let title = ""
export let href = ""
$: active = href && $page.route?.id?.startsWith(href)
</script>
{#if href}
<a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
class="avatar cursor-pointer rounded-full p-1 {$$props.class} hover:bg-base-300 transition-colors"
class:bg-base-300={active}
class:tooltip={title}
data-tip={title}>
<slot />
@@ -17,7 +21,8 @@
{:else}
<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
class="avatar cursor-pointer rounded-full p-1 {$$props.class} hover:bg-base-300 transition-colors"
class:bg-base-300={active}
class:tooltip={title}
data-tip={title}>
<slot />