@stubber/ui 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,13 +5,21 @@
|
|
|
5
5
|
This component is *not* exported to the npm package.
|
|
6
6
|
-->
|
|
7
7
|
<script>
|
|
8
|
+
import { setContext } from "svelte";
|
|
8
9
|
import SideNavItem from "./SideNavItem.svelte";
|
|
9
10
|
import SideNavTitle from "./SideNavTitle.svelte";
|
|
11
|
+
|
|
12
|
+
setContext("side_nav_context", {
|
|
13
|
+
bg_color: "bg-red-500",
|
|
14
|
+
selected_bg_color: "bg-yellow-500",
|
|
15
|
+
hover_bg_color: "hover:bg-orange-500 hover:bg-opacity-[0.5]",
|
|
16
|
+
active_bg_color: "active:bg-surface-100",
|
|
17
|
+
});
|
|
10
18
|
</script>
|
|
11
19
|
|
|
12
|
-
<div class="p-4 bg-
|
|
20
|
+
<div class="p-4 bg-white border-r border-suface-100 h-full w-[250px]">
|
|
13
21
|
<SideNavTitle title="General" />
|
|
14
|
-
<SideNavItem label="Recent" href="/" icon="far fa-home" />
|
|
22
|
+
<SideNavItem label="Recent" href="/" icon="far fa-home" is_selected={true} />
|
|
15
23
|
<SideNavItem label="Archive" href="/" icon="far fa-archive" />
|
|
16
24
|
<SideNavItem label="By Stub" href="/" icon="far fa-tilde" />
|
|
17
25
|
|
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { Label } from "
|
|
3
|
-
import { Button } from "
|
|
2
|
+
import { Label } from "../label/index.ts";
|
|
3
|
+
import { Button } from "../button/index.ts";
|
|
4
|
+
import { getContext } from "svelte";
|
|
5
|
+
|
|
4
6
|
export let label;
|
|
5
7
|
export let href;
|
|
6
8
|
export let icon;
|
|
7
9
|
export let indent_children = true;
|
|
8
10
|
export let is_selected = false;
|
|
9
11
|
|
|
12
|
+
let bg_color = "bg-transparent";
|
|
13
|
+
let selected_bg_color = "bg-surface-100";
|
|
14
|
+
let hover_bg_color = "hover:bg-surface-100 hover:bg-opacity-[0.5]";
|
|
15
|
+
let active_bg_color = "active:bg-surface-100";
|
|
16
|
+
|
|
17
|
+
// you can set the color for all nav items once using the context
|
|
18
|
+
const side_nav_context = getContext("side_nav_context");
|
|
19
|
+
if (side_nav_context) {
|
|
20
|
+
bg_color = side_nav_context.bg_color || bg_color;
|
|
21
|
+
selected_bg_color = side_nav_context.selected_bg_color || selected_bg_color;
|
|
22
|
+
hover_bg_color = side_nav_context.hover_bg_color || hover_bg_color;
|
|
23
|
+
active_bg_color = side_nav_context.active_bg_color || active_bg_color;
|
|
24
|
+
}
|
|
25
|
+
|
|
10
26
|
//states
|
|
11
27
|
let is_expanded = false;
|
|
12
28
|
|
|
@@ -21,8 +37,8 @@
|
|
|
21
37
|
on:click={handle_click}
|
|
22
38
|
variant="ghost"
|
|
23
39
|
class="group h-10 my-1 w-full flex items-center {is_selected
|
|
24
|
-
?
|
|
25
|
-
:
|
|
40
|
+
? selected_bg_color
|
|
41
|
+
: bg_color} {hover_bg_color} {active_bg_color}"
|
|
26
42
|
>
|
|
27
43
|
{#if $$slots.default}
|
|
28
44
|
<div class="h-10 w-2.5 flex items-center justify-center">
|