@enki-tek/fms-web-components 0.1.2 → 0.1.4

package/components/Accordion/Accordion.svelte

@@ -587,6 +587,30 @@ export let stayOpen = true;
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 :global(.accordion-body) {
   color: #6C757D;
   font-size: 16px;

package/components/Accordion/AccordionItem.svelte

@@ -588,6 +588,30 @@ export let header;
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 :global(.accordion-body) {
   color: #6C757D;
   font-size: 16px;

package/components/Badge/Badge.svelte

@@ -592,4 +592,28 @@ if (badgeConfig.hasOwnProperty(config)) {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Breadcrumb/Breadcrumb.svelte

@@ -602,4 +602,28 @@ let length = newBreadcrumbs.length;
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Button/Button.svelte

@@ -1339,6 +1339,30 @@
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 .ebg-active-secondary {
   background-color: #3AC82E;
   color: #ffffff;

package/components/CardIcon/CardIcon.svelte

@@ -669,4 +669,28 @@ if (titleConfig.includes(titleLocation)) {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/CardIcon/CardiconBody.svelte

@@ -664,4 +664,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/CardIcon/CardiconSubtitle.svelte

@@ -673,4 +673,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/CardIcon/CardiconTitle.svelte

@@ -673,4 +673,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/CheckBox/Checkbox.svelte

@@ -622,4 +622,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Dropdown/Dropdown.svelte

@@ -647,4 +647,28 @@ export let title = "Dropdowns";
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Dropdown/DropdownItem.svelte

@@ -640,4 +640,28 @@ export let disabled = false;
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/EnkiSidbar/EnkiSidebar.svelte

@@ -721,4 +721,28 @@ li.icons:hover {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/EnkiSidbar/NavIcon.svelte

@@ -664,4 +664,28 @@ li.icons:hover {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/EnkiSidbar/NavItem.svelte

@@ -662,4 +662,28 @@ li.icons:hover {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/EnkiSidbar/NavLink.svelte

@@ -671,4 +671,28 @@ li.icons:hover {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Header/Brand.svelte

@@ -77,6 +77,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
+  object-fit: contain;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -649,4 +650,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Header/Header.scss

@@ -58,6 +58,7 @@
 :global(.userProfile img) {
 	width: 45px;
 	height: 45px;
+	object-fit: contain;
 	border-radius: 50%;
 }
 

package/components/Header/Header.svelte

@@ -76,6 +76,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
+  object-fit: contain;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -648,4 +649,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Header/HeaderItem.svelte

@@ -78,6 +78,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
+  object-fit: contain;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -650,4 +651,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Header/UserAvatar.svelte

@@ -76,6 +76,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
+  object-fit: contain;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -648,4 +649,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Layout/Content.svelte

@@ -4,6 +4,6 @@
 <div class="container-fluid" style="margin-top:80px;background-color: #EBECEF;">
 	<div class="row">
 		<slot name="sidebar-menu" />
-		<slot name="page" />
+		<slot />
 	</div>
 </div>

package/components/Layout/Content.svelte.d.ts

@@ -7,7 +7,7 @@ export default class Content extends SvelteComponentTyped<{
     [evt: string]: CustomEvent<any>;
 }, {
     'sidebar-menu': {};
-    page: {};
+    default: {};
 }> {
 }
 export type ContentProps = typeof __propDef.props;
@@ -23,7 +23,7 @@ declare const __propDef: {
     };
     slots: {
         'sidebar-menu': {};
-        page: {};
+        default: {};
     };
 };
 export {};

package/components/Layout/Page.svelte

@@ -2,7 +2,7 @@
 	import { Col, Row } from 'sveltestrap';
 </script>
 
-<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+<main class="main-content">
 	<div
 		class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
 	>

package/components/Layout/SortableGrid.svelte

@@ -5,7 +5,6 @@
 	export let id;
 	onMount(() => {
 		const el = document.getElementById(id);
-		console.log(el);
 		Sortable.create(el, {
 			animation: 150,
 			ghostClass: 'blue-background-class'

package/components/ModalWindow/Modal.svelte

@@ -589,6 +589,30 @@
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 .content {
   color: #495057;
   line-height: normal;

package/components/ModalWindow/ModalBody.svelte

@@ -587,6 +587,30 @@
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 .content {
   color: #495057;
   line-height: normal;

package/components/ModalWindow/ModalFooter.svelte

@@ -585,6 +585,30 @@
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 .content {
   color: #495057;
   line-height: normal;

package/components/ModalWindow/ModalHeader.svelte

@@ -590,6 +590,30 @@
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 .content {
   color: #495057;
   line-height: normal;

package/components/NotFound/NotFound.svelte

@@ -624,4 +624,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Pagination/Pagination.svelte

@@ -721,4 +721,28 @@ function nextPage() {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/RadioButton/RadioButton.svelte

@@ -605,6 +605,30 @@
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 :global(.custom-radio .form-check-label) {
   color: #343A40;
 }

package/components/Sidebar/SideBarMenu.svelte

@@ -5,9 +5,9 @@
 	export let companyName = 'EnkiTek';
 </script>
 
-<div class="sidebar col-md-3 col-lg-2">
+<div class="sidebar">
 	<div
-		class="offcanvas-md offcanvas-end bg-light rounded m-3"
+		class="offcanvas-md offcanvas-end bg-light rounded"
 		tabindex="-1"
 		id="sidebarMenu"
 		aria-labelledby="sidebarMenuLabel"

package/components/Sidebar/Sidebar.svelte

@@ -746,5 +746,29 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>
 

package/components/Switches/Switch.svelte

@@ -595,4 +595,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Tab/Tab.svelte

@@ -615,4 +615,28 @@ export let tabs = [
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/TextField/TextField.svelte

@@ -623,4 +623,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Toast/Toast.svelte

@@ -659,4 +659,28 @@
 }
 :global(.bg-dark) {
   background-color: #05445E !important;
+}
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
 }</style>

package/components/Tooltip/Tooltip.svelte

@@ -603,6 +603,30 @@ const textAligns = {
 :global(.bg-dark) {
   background-color: #05445E !important;
 }
+.sidebar {
+  position: fixed;
+  top: 80px; /* Height of the navbar */
+  bottom: 0;
+  width: 315px;
+  transition: transform 0.3s ease;
+}
+.main-content {
+  margin-left: 315px; /* Width of the sidebar */
+  flex: 1;
+  overflow-y: auto;
+  transition: margin-left 0.3s ease;
+}
+.main-content.collapsed {
+  margin-left: 0;
+}
+@media (max-width: 767px) {
+  .sidebar {
+    display: none !important;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+}
 .label {
   color: #ffffff;
   font-size: 16px;

package/components/common.scss

@@ -790,4 +790,29 @@
 
 :global(.bg-dark) {
     background-color: $bg-dark !important;
-}
+}
+
+.sidebar {
+    position: fixed;
+    top: 80px; /* Height of the navbar */
+    bottom: 0;
+    width: 315px;
+    transition: transform 0.3s ease;
+  }  
+  .main-content {    
+    margin-left: 315px; /* Width of the sidebar */      
+    flex: 1;
+    overflow-y: auto;
+    transition: margin-left 0.3s ease;
+  }
+  .main-content.collapsed {
+    margin-left: 0;
+  }
+  @media (max-width: 767px) {
+    .sidebar {
+      display: none !important;
+    }
+    .main-content {
+      margin-left: 0;
+    }      
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",