A focused Docker Compose management web application.
feat: persist tab in url
+11
-1
+11
-1
packages/panel/src/lib/component/Tabs.svelte
+11
-1
packages/panel/src/lib/component/Tabs.svelte
···
15
15
import { Accordion } from "melt/builders";
16
16
import type { Snippet } from "svelte";
17
17
import Fa from "svelte-fa";
18
+
import { page } from "$app/state";
18
19
19
20
let { tabs }: { tabs: { label: string; icon: IconDefinition; content: Snippet<[]> }[] } = $props();
20
21
21
22
const accordion = new Accordion();
22
23
23
24
$effect(() => {
24
-
if (accordion.value === undefined && !isMobile()) {
25
+
const hash = page.url.hash.slice(1);
26
+
if (hash && tabs.some((t) => t.label === hash)) {
27
+
accordion.value = hash;
28
+
} else if (accordion.value === undefined && !isMobile()) {
25
29
accordion.value = tabs[0].label;
30
+
}
31
+
});
32
+
33
+
$effect(() => {
34
+
if (accordion.value) {
35
+
window.location.hash = accordion.value;
26
36
}
27
37
});
28
38
</script>