@likable-hair/svelte 3.3.25 → 3.3.26
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.
|
@@ -3,9 +3,8 @@ import "./CollapsibleSideBarLayout.css";
|
|
|
3
3
|
import MediaQuery from "../simple/common/MediaQuery.svelte";
|
|
4
4
|
import Icon from "../simple/media/Icon.svelte";
|
|
5
5
|
import { createEventDispatcher } from "svelte";
|
|
6
|
-
import ColorInvertedSelector, {
|
|
7
|
-
} from "../simple/lists/ColorInvertedSelector.svelte";
|
|
8
6
|
import { writable } from "svelte/store";
|
|
7
|
+
import mediaQuery from "../../stores/mediaQuery";
|
|
9
8
|
export let drawerOpened = false;
|
|
10
9
|
export let sidebarExpanded = false;
|
|
11
10
|
let clazz = {};
|
|
@@ -25,6 +24,10 @@ function toggleSidebar() {
|
|
|
25
24
|
sidebarExpanded = !sidebarExpanded;
|
|
26
25
|
dispatch("sidebar-toggle", { expanded: sidebarExpanded });
|
|
27
26
|
}
|
|
27
|
+
$:
|
|
28
|
+
if ($mediaQuery.m || $mediaQuery.s || $mediaQuery.xs) {
|
|
29
|
+
sidebarExpanded = false;
|
|
30
|
+
}
|
|
28
31
|
</script>
|
|
29
32
|
|
|
30
33
|
<MediaQuery let:mAndDown>
|
|
@@ -45,15 +48,26 @@ function toggleSidebar() {
|
|
|
45
48
|
on:click={toggleMenu}
|
|
46
49
|
/>
|
|
47
50
|
</div>
|
|
48
|
-
{:else
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
{:else}
|
|
52
|
+
{#if !sidebarExpanded}
|
|
53
|
+
<div style:margin-right="2rem">
|
|
54
|
+
<Icon
|
|
55
|
+
name="mdi-menu-close"
|
|
56
|
+
click
|
|
57
|
+
--icon-default-size="1.5rem"
|
|
58
|
+
on:click={toggleSidebar}
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
{:else}
|
|
62
|
+
<div style:margin-right="2rem">
|
|
63
|
+
<Icon
|
|
64
|
+
name="mdi-menu-open"
|
|
65
|
+
click
|
|
66
|
+
--icon-default-size="1.5rem"
|
|
67
|
+
on:click={toggleSidebar}
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
{/if}
|
|
57
71
|
{/if}
|
|
58
72
|
<slot name="inner-menu" hamburgerVisible={mAndDown}>
|
|
59
73
|
<div class="menu">Menu</div>
|
|
@@ -83,18 +97,6 @@ function toggleSidebar() {
|
|
|
83
97
|
<div class="logo">Logo</div>
|
|
84
98
|
</slot>
|
|
85
99
|
</div>
|
|
86
|
-
<div class="pin-container">
|
|
87
|
-
{#if sidebarExpanded}
|
|
88
|
-
<div class="sidebar-close-button">
|
|
89
|
-
<Icon
|
|
90
|
-
name="mdi-menu-open"
|
|
91
|
-
click
|
|
92
|
-
--icon-default-size="1.5rem"
|
|
93
|
-
on:click={toggleSidebar}
|
|
94
|
-
/>
|
|
95
|
-
</div>
|
|
96
|
-
{/if}
|
|
97
|
-
</div>
|
|
98
100
|
</div>
|
|
99
101
|
<slot name="menu" hamburgerVisible={mAndDown} {sidebarExpanded}>
|
|
100
102
|
<div class="menu-container" class:expanded={sidebarExpanded}>
|
|
@@ -172,7 +174,6 @@ function toggleSidebar() {
|
|
|
172
174
|
display: flex;
|
|
173
175
|
justify-content: flex-start;
|
|
174
176
|
align-items: center;
|
|
175
|
-
width: 70%;
|
|
176
177
|
margin-bottom: 1rem;
|
|
177
178
|
}
|
|
178
179
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
import "../../css/main.css";
|
|
3
3
|
import "./CollapsibleSideBarLayout.css";
|
|
4
|
-
import { type Option } from "../simple/lists/ColorInvertedSelector.svelte";
|
|
5
4
|
declare const __propDef: {
|
|
6
5
|
props: {
|
|
7
6
|
drawerOpened?: boolean | undefined;
|
|
@@ -17,9 +16,6 @@ declare const __propDef: {
|
|
|
17
16
|
"drawer-change": CustomEvent<{
|
|
18
17
|
opened: boolean;
|
|
19
18
|
}>;
|
|
20
|
-
"menu-select": CustomEvent<{
|
|
21
|
-
option: Option;
|
|
22
|
-
}>;
|
|
23
19
|
"pinned-change": CustomEvent<{
|
|
24
20
|
pinned: boolean;
|
|
25
21
|
}>;
|