@likable-hair/svelte 3.0.4 → 3.0.6
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.
- package/dist/components/layouts/CollapsibleSideBarLayout.svelte +16 -0
- package/dist/components/layouts/CollapsibleSideBarLayout.svelte.d.ts +3 -0
- package/dist/components/simple/lists/SelectableMenuList.css +2 -0
- package/dist/components/simple/lists/SelectableMenuList.svelte +8 -0
- package/package.json +1 -1
|
@@ -43,6 +43,9 @@ function handleCollpsabledDividerChange() {
|
|
|
43
43
|
bind:collapsed={drawerCollapsed}
|
|
44
44
|
on:change={handleCollpsabledDividerChange}
|
|
45
45
|
></CollapsibleDivider>
|
|
46
|
+
<div class="sidebar-footer">
|
|
47
|
+
<slot name="sidebar-footer" collapsed={drawerCollapsed}></slot>
|
|
48
|
+
</div>
|
|
46
49
|
</div>
|
|
47
50
|
<div class="header-menu">
|
|
48
51
|
<HeaderMenu
|
|
@@ -57,12 +60,18 @@ function handleCollpsabledDividerChange() {
|
|
|
57
60
|
<div
|
|
58
61
|
slot="drawer"
|
|
59
62
|
style:padding="0px 10px 10px 0px"
|
|
63
|
+
style:height="100%"
|
|
64
|
+
style:display="flex"
|
|
65
|
+
style:flex-direction="column"
|
|
60
66
|
>
|
|
61
67
|
<SelectableMenuList
|
|
62
68
|
items={menuItems}
|
|
63
69
|
collapsed={false}
|
|
64
70
|
selected={selectedMenuElementName}
|
|
65
71
|
></SelectableMenuList>
|
|
72
|
+
<div class="sidebar-footer">
|
|
73
|
+
<slot name="sidebar-footer" collapsed={false}></slot>
|
|
74
|
+
</div>
|
|
66
75
|
</div>
|
|
67
76
|
</HeaderMenu>
|
|
68
77
|
</div>
|
|
@@ -86,6 +95,8 @@ function handleCollpsabledDividerChange() {
|
|
|
86
95
|
var(--collapsible-side-bar-layout-default-sidebar-width)
|
|
87
96
|
);
|
|
88
97
|
transition: width .3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
89
100
|
}
|
|
90
101
|
|
|
91
102
|
.sidebar.collapsed {
|
|
@@ -129,6 +140,7 @@ function handleCollpsabledDividerChange() {
|
|
|
129
140
|
.logo-container {
|
|
130
141
|
padding-left: 16px;
|
|
131
142
|
padding-top: 10px;
|
|
143
|
+
padding-bottom: 10px;
|
|
132
144
|
transition-property: width padding-left;
|
|
133
145
|
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
|
134
146
|
transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
|
|
@@ -153,4 +165,8 @@ function handleCollpsabledDividerChange() {
|
|
|
153
165
|
.header-logo-container img {
|
|
154
166
|
height: 3rem;
|
|
155
167
|
}
|
|
168
|
+
|
|
169
|
+
.sidebar-footer {
|
|
170
|
+
flex-grow: 1;
|
|
171
|
+
}
|
|
156
172
|
</style>
|
|
@@ -4,4 +4,6 @@
|
|
|
4
4
|
--selectable-menu-list-default-icon-gap: 10px;
|
|
5
5
|
--selectable-menu-list-default-spacing: 1.5rem;
|
|
6
6
|
--selectable-menu-list-default-selected-color: rgb(var(--global-color-primary-400));
|
|
7
|
+
--selectable-menu-list-default-margin-block-start: 1rem;
|
|
8
|
+
--selectable-menu-list-default-margin-block-end: 1rem;
|
|
7
9
|
}
|
|
@@ -67,6 +67,14 @@ function handleItemClick(item) {
|
|
|
67
67
|
--selectable-menu-list-spacing,
|
|
68
68
|
var(--selectable-menu-list-default-spacing)
|
|
69
69
|
);
|
|
70
|
+
margin-block-start: var(
|
|
71
|
+
--selectable-menu-list-margin-block-start,
|
|
72
|
+
var(--selectable-menu-list-default-margin-block-start)
|
|
73
|
+
);
|
|
74
|
+
margin-block-end: var(
|
|
75
|
+
--selectable-menu-list-margin-block-end,
|
|
76
|
+
var(--selectable-menu-list-default-margin-block-end)
|
|
77
|
+
);
|
|
70
78
|
}
|
|
71
79
|
|
|
72
80
|
.menu-row {
|