@enki-tek/fms-web-components 0.1.55 → 0.1.56
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/components/Accordion/Accordion.svelte +0 -1
- package/components/Accordion/AccordionItem.svelte +0 -1
- package/components/Badge/Badge.svelte +0 -1
- package/components/Breadcrumb/Breadcrumb.svelte +0 -1
- package/components/Button/Button.svelte +0 -1
- package/components/CardIcon/CardIcon.svelte +0 -1
- package/components/CardIcon/CardiconBody.svelte +0 -1
- package/components/CardIcon/CardiconSubtitle.svelte +0 -1
- package/components/CardIcon/CardiconTitle.svelte +0 -1
- package/components/CheckBox/Checkbox.svelte +0 -1
- package/components/Dropdown/Dropdown.svelte +0 -1
- package/components/Dropdown/DropdownItem.svelte +0 -1
- package/components/EnkiSidbar/EnkiSidebar.svelte +0 -1
- package/components/EnkiSidbar/NavIcon.svelte +0 -1
- package/components/EnkiSidbar/NavItem.svelte +0 -1
- package/components/EnkiSidbar/NavLink.svelte +0 -1
- package/components/Header/Brand.svelte +0 -1
- package/components/Header/Header.svelte +0 -1
- package/components/Header/HeaderItem.svelte +0 -1
- package/components/Header/UserAvatar.svelte +0 -1
- package/components/ModalWindow/Modal.svelte +0 -1
- package/components/ModalWindow/ModalBody.svelte +0 -1
- package/components/ModalWindow/ModalFooter.svelte +0 -1
- package/components/ModalWindow/ModalHeader.svelte +0 -1
- package/components/NotFound/NotFound.svelte +0 -1
- package/components/Pagination/Pagination.svelte +0 -1
- package/components/RadioButton/RadioButton.svelte +0 -1
- package/components/Sidebar/MenuGroup.svelte +10 -0
- package/components/Sidebar/MenuItem.svelte +10 -0
- package/components/Sidebar/SideBarMenu.svelte +60 -2
- package/components/Sidebar/Sidebar.scss +11 -0
- package/components/Sidebar/Sidebar.svelte +10 -1
- package/components/Switches/Switch.svelte +0 -1
- package/components/Tab/Tab.svelte +0 -1
- package/components/TextField/TextField.svelte +0 -1
- package/components/Toast/Toast.svelte +0 -1
- package/components/Tooltip/Tooltip.svelte +0 -1
- package/components/WidgetCard/WidgetCard.svelte +11 -4
- package/components/common.scss +1 -1
- package/package.json +1 -1
|
@@ -109,4 +109,14 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
|
|
|
109
109
|
#sidebarMenu {
|
|
110
110
|
height: calc(100vh - 146px);
|
|
111
111
|
overflow: auto;
|
|
112
|
+
}
|
|
113
|
+
#icon {
|
|
114
|
+
margin-left: 270px;
|
|
115
|
+
z-index: 1000;
|
|
116
|
+
position: fixed;
|
|
117
|
+
top: 90px;
|
|
118
|
+
}
|
|
119
|
+
#margin-alignment {
|
|
120
|
+
height: calc(100vh - 146px);
|
|
121
|
+
width: 315px;
|
|
112
122
|
}</style>
|
|
@@ -122,5 +122,15 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
|
|
|
122
122
|
#sidebarMenu {
|
|
123
123
|
height: calc(100vh - 146px);
|
|
124
124
|
overflow: auto;
|
|
125
|
+
}
|
|
126
|
+
#icon {
|
|
127
|
+
margin-left: 270px;
|
|
128
|
+
z-index: 1000;
|
|
129
|
+
position: fixed;
|
|
130
|
+
top: 90px;
|
|
131
|
+
}
|
|
132
|
+
#margin-alignment {
|
|
133
|
+
height: calc(100vh - 146px);
|
|
134
|
+
width: 315px;
|
|
125
135
|
}</style>
|
|
126
136
|
|
|
@@ -1,11 +1,51 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { onDestroy, onMount } from 'svelte';
|
|
2
3
|
import MenuGroup from './MenuGroup.svelte';
|
|
3
4
|
import MenuItem from './MenuItem.svelte';
|
|
4
5
|
|
|
5
6
|
export let companyName = 'EnkiTek';
|
|
7
|
+
let sidebarFlag = true;
|
|
8
|
+
let hideSidebar = false;
|
|
9
|
+
let iconName = 'bi-chevron-double-left';
|
|
10
|
+
function styleChange() {
|
|
11
|
+
sidebarFlag = !sidebarFlag;
|
|
12
|
+
|
|
13
|
+
const sidebar = document?.getElementById('sidebar');
|
|
14
|
+
const icon = document?.getElementById('icon');
|
|
15
|
+
const margin = document?.getElementById('margin-alignment');
|
|
16
|
+
if (sidebar && icon && margin && !sidebarFlag) {
|
|
17
|
+
sidebar.style.display = 'none';
|
|
18
|
+
icon.style.marginLeft = '0px';
|
|
19
|
+
margin.style.width = '35px';
|
|
20
|
+
iconName = 'bi-chevron-double-right';
|
|
21
|
+
} else if (sidebar && icon && margin) {
|
|
22
|
+
sidebar.style.display = 'block';
|
|
23
|
+
icon.style.marginLeft = '270px';
|
|
24
|
+
margin.style.width = '315px';
|
|
25
|
+
iconName = 'bi-chevron-double-left';
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
function checkScreenSize() {
|
|
29
|
+
if (window.innerWidth < 768) {
|
|
30
|
+
hideSidebar = true;
|
|
31
|
+
} else {
|
|
32
|
+
hideSidebar = false;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
onMount(() => {
|
|
36
|
+
if (typeof window !== 'undefined') {
|
|
37
|
+
window.addEventListener('resize', checkScreenSize);
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
onDestroy(() => {
|
|
42
|
+
if (typeof window !== 'undefined') {
|
|
43
|
+
window.removeEventListener('resize', checkScreenSize);
|
|
44
|
+
}
|
|
45
|
+
});
|
|
6
46
|
</script>
|
|
7
47
|
|
|
8
|
-
<div class="sidebar pe-0">
|
|
48
|
+
<div class="sidebar pe-0" id="sidebar">
|
|
9
49
|
<div
|
|
10
50
|
class="offcanvas-md offcanvas-end bg-white rounded-3"
|
|
11
51
|
tabindex="-1"
|
|
@@ -24,11 +64,19 @@
|
|
|
24
64
|
aria-label="Close"
|
|
25
65
|
/>
|
|
26
66
|
</div>
|
|
27
|
-
<div class="offcanvas-body d-md-flex flex-column p-0 pt-3
|
|
67
|
+
<div class="offcanvas-body d-md-flex flex-column p-0 pt-3 m-3">
|
|
28
68
|
<slot />
|
|
29
69
|
</div>
|
|
30
70
|
</div>
|
|
31
71
|
</div>
|
|
72
|
+
{#if !hideSidebar}
|
|
73
|
+
<div id="icon">
|
|
74
|
+
<button class="btn btn-secondary btn-sm" on:click={styleChange}>
|
|
75
|
+
<i class={iconName} />
|
|
76
|
+
</button>
|
|
77
|
+
</div>
|
|
78
|
+
<div id="margin-alignment" />
|
|
79
|
+
{/if}
|
|
32
80
|
|
|
33
81
|
<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
34
82
|
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
|
|
@@ -133,6 +181,16 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
|
|
|
133
181
|
height: calc(100vh - 146px);
|
|
134
182
|
overflow: auto;
|
|
135
183
|
}
|
|
184
|
+
#icon {
|
|
185
|
+
margin-left: 270px;
|
|
186
|
+
z-index: 1000;
|
|
187
|
+
position: fixed;
|
|
188
|
+
top: 90px;
|
|
189
|
+
}
|
|
190
|
+
#margin-alignment {
|
|
191
|
+
height: calc(100vh - 146px);
|
|
192
|
+
width: 315px;
|
|
193
|
+
}
|
|
136
194
|
@media (min-width: 768px) {
|
|
137
195
|
.sidebar .offcanvas-lg {
|
|
138
196
|
position: -webkit-sticky;
|
|
@@ -153,4 +153,15 @@ ul {
|
|
|
153
153
|
#sidebarMenu {
|
|
154
154
|
height: calc(100vh - 146px);
|
|
155
155
|
overflow: auto;
|
|
156
|
+
}
|
|
157
|
+
#icon {
|
|
158
|
+
margin-left: 270px;
|
|
159
|
+
z-index: 1000 ;
|
|
160
|
+
position: fixed ;
|
|
161
|
+
top: 90px ;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
#margin-alignment {
|
|
165
|
+
height: calc(100vh - 146px);
|
|
166
|
+
width: 315px
|
|
156
167
|
}
|
|
@@ -186,6 +186,16 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
|
|
|
186
186
|
height: calc(100vh - 146px);
|
|
187
187
|
overflow: auto;
|
|
188
188
|
}
|
|
189
|
+
#icon {
|
|
190
|
+
margin-left: 270px;
|
|
191
|
+
z-index: 1000;
|
|
192
|
+
position: fixed;
|
|
193
|
+
top: 90px;
|
|
194
|
+
}
|
|
195
|
+
#margin-alignment {
|
|
196
|
+
height: calc(100vh - 146px);
|
|
197
|
+
width: 315px;
|
|
198
|
+
}
|
|
189
199
|
:global(.ebg-none) {
|
|
190
200
|
background-color: #ffffff !important;
|
|
191
201
|
}
|
|
@@ -760,7 +770,6 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
|
|
|
760
770
|
transition: transform 0.3s ease;
|
|
761
771
|
}
|
|
762
772
|
.main-content {
|
|
763
|
-
margin-left: 315px;
|
|
764
773
|
/* Width of the sidebar */
|
|
765
774
|
flex: 1;
|
|
766
775
|
overflow-y: auto;
|
|
@@ -31,7 +31,11 @@
|
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
const isMobile = () => {
|
|
34
|
-
|
|
34
|
+
if (typeof window !== 'undefined') {
|
|
35
|
+
return window.innerWidth >= minMaximizebleWidth; // Example threshold for mobile (you can adjust this value)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return false;
|
|
35
39
|
};
|
|
36
40
|
|
|
37
41
|
const handleResize = () => {
|
|
@@ -40,12 +44,15 @@
|
|
|
40
44
|
|
|
41
45
|
onMount(() => {
|
|
42
46
|
isMobileDevice = isMobile();
|
|
43
|
-
|
|
44
|
-
|
|
47
|
+
if (typeof window !== 'undefined') {
|
|
48
|
+
window.addEventListener('resize', handleResize);
|
|
49
|
+
}
|
|
45
50
|
});
|
|
46
51
|
|
|
47
52
|
onDestroy(() => {
|
|
48
|
-
window
|
|
53
|
+
if (typeof window !== 'undefined') {
|
|
54
|
+
window.removeEventListener('resize', handleResize);
|
|
55
|
+
}
|
|
49
56
|
});
|
|
50
57
|
</script>
|
|
51
58
|
|
package/components/common.scss
CHANGED