coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

show space name on hover in primary nav (#129) (#136)

Browse Source 
Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
This commit was merged in pull request #136.
This commit is contained in:
Priyanshu Bharti
2026-04-06 16:08:02 +00:00
committed by hodlbod
parent 80df16f97b
commit fed34a2747
7 changed files with 59 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/SecondaryNavItem.svelte
+20 -17
View File
@@ -21,37 +21,40 @@
</style>
<script lang="ts">
import cx from "classnames"
import {fade} from "@lib/transition"
import {page} from "$app/stores"
const {children, href = "", notification = false, replaceState = false, ...restProps} = $props()
const {
children,
href = "",
title = "",
notification = false,
replaceState = false,
...restProps
} = $props()
const active = $derived($page.url.pathname === href)
const wrapperClass = $derived(
cx(restProps.class, "relative flex flex-shrink-0 items-center gap-3 text-left transition-all", {
"hover:bg-base-100 hover:text-base-content": true,
"text-base-content bg-base-100": active,
"tooltip tooltip-right": title,
}),
)
</script>
{#if href}
<a
{href}
{...restProps}
data-sveltekit-replacestate={replaceState}
class="{restProps.class} relative flex flex-shrink-0 items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
class:text-base-content={active}
class:bg-base-100={active}>
<a {href} {...restProps} data-tip={title} data-sveltekit-replacestate={replaceState} class={wrapperClass}>
{@render children?.()}
{#if notification}
<div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
</div>
<div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
{/if}
</a>
{:else}
<button
{...restProps}
class="{restProps.class} relative flex flex-shrink-0 w-full items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
class:text-base-content={active}
class:bg-base-100={active}>
<button {...restProps} data-tip={title} class={wrapperClass}>
{#if notification}
<div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
</div>
<div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
{/if}
{@render children?.()}
</button>