@enki-tek/fms-web-components 0.0.3 → 0.0.5

package/components/Sidebar/Sidebar.svelte

@@ -1,144 +1,721 @@
 <script>
 	import { Offcanvas } from 'sveltestrap';
+	import Icon from '../Icon/Icon.svelte';
+
 	export let companyName = 'Vertfarm';
 	export let navItems = [
-		{ name: 'Home', icon: 'home' },
-		{ name: 'About', icon: 'person' },
-		{ name: 'Services', icon: 'settings' },
-		{ name: 'Contact', icon: 'email' },
-		{ name: 'Home', icon: 'home' },
-		{ name: 'About', icon: 'person' },
-		{ name: 'Services', icon: 'settings' },
-		{ name: 'Contact', icon: 'email' }
+		{ name: 'Overview', icon: 'house-fill', route: '/overview' },
+		{ name: 'Container Types', icon: 'aspect-ratio', route: '/container-types' },
+		{ name: 'Containers', icon: 'view-list', route: '/containers' },
+		{ name: 'Batch Operations', icon: 'grid', route: '/batch-operations' },
+		{ name: 'Recipe', icon: 'soundwave', route: '/recipe' },
+		{ name: 'Work Order', icon: 'collection', route: '/work-order' },
+		{ name: 'Protocol', icon: 'textarea', route: '/protocol' },
+		{ name: 'Users', icon: 'people', route: '/users' },
+		{ name: 'Packaging Configuration', icon: 'box-seam', route: '/packaging-configuration' },
+		{ name: 'Delivery', icon: 'truck', route: '/delivery' }
 	];
+
 	let isOpen = false;
+	let activeItem = 'Overview';
 </script>
 
 <div class="container-fluid">
 	<div class="row">
 		<!-- Toggle button for offcanvas -->
 		<div class="col-auto icon-sidebar">
-			<button
-				class="toggleButton"
-				type="button"
-				data-bs-toggle="offcanvas"
-				data-bs-target="#offcanvasScrolling"
-				aria-controls="offcanvasScrolling"
-				on:click={() => (isOpen = true)}
-			>
-				<span class="material-icons">{'keyboard_double_arrow_right'}</span>
-			</button>
 			<!-- Icon Sidebar -->
 			<div class="icon-sidebar-content">
+				<div class="upper-div">
+					<div class="icon-btn">
+						<button class="toggle-button" type="button" on:click={() => (isOpen = true)}>
+							<Icon iconName="chevron-double-right" />
+						</button>
+					</div>
+					<div class="line" />
+				</div>
 				<ul class="nav flex-column">
 					{#each navItems as item, index}
-						<li>
-							<span class="material-icons">{item.icon}</span>
+						<li class:active={activeItem === item.name} on:click={() => (activeItem = item.name)}>
+							<Icon iconName={item.icon} />
 						</li>
 					{/each}
 				</ul>
 			</div>
 		</div>
 		<!-- Offcanvas menu -->
-    <div>
-		<Offcanvas class="offcanvas offcanvas-start" scroll {isOpen} backdrop={false}>
-			<div class="offcanvas-header">
-				<h5 class="offcanvas-title" id="offcanvasScrollingLabel">{companyName}</h5>
-				<button
-					type="button"
-					class="toggleButton"
-					data-bs-dismiss="offcanvas"
-					aria-label="Close"
-					on:click={() => (isOpen = false)}
-				>
-					<span class="material-icons">{'keyboard_double_arrow_left'}</span>
-				</button>
-			</div>
-			<div class="offcanvas-body">
-				<ul class="nav flex-column">
-					{#each navItems as item, index}
-						<li class="nav-item">
-							<span class="material-icons">{item.icon}</span>
-							<span class="item-name">{item.name}</span>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		</Offcanvas>
-    </div>
+		<div class="sidebar-menu">
+			<Offcanvas class="offcanvas offcanvas-start" scroll {isOpen} backdrop={false}>
+				<div class="offcanvas-header">
+					<h5 class="offcanvas-title efs-small" id="offcanvasScrollingLabel">{companyName}</h5>
+					<button
+						type="button"
+						class="toggle-button"
+						data-bs-dismiss="offcanvas"
+						aria-label="Close"
+						on:click={() => (isOpen = false)}
+					>   
+					  <span class="material-icons">
+						<Icon  iconName='chevron-double-left'/>
+					</span>
+					</button>
+				</div>
+				<div class="line-open" />
+				<div class="offcanvas-body">
+					<ul class="nav flex-column">
+						{#each navItems as item, index}
+							<li
+								class="nav-item"
+								class:active={activeItem === item.name}
+								on:click={() => (activeItem = item.name)}
+							>
+								<span><Icon iconName={item.icon} /></span>
+								<span class="item-name efs-normal">{item.name}</span>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			</Offcanvas>
+		</div>
 	</div>
 </div>
+
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @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");
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@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");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
+  color: #ffffff;
+}
+.line-open, .line {
+  background: #ffffff;
+}
+:global(.offcanvas-body) {
+  background: #007FD8;
+}
+.nav .nav-item.active, .icon-sidebar-content ul .active {
+  border-left: 2px solid #ffffff;
+  background: #084298;
+}
+.nav-item, .icon-sidebar-content ul li {
+  display: flex;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
 .row {
-  --bs-gutter-x: -0.5rem;
+  --bs-gutter-x: 0rem;
 }
 .icon-sidebar {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
-  width: 60px;
-  background-color: #fff;
+  width: 88px;
+  background: #007FD8;
 }
-.icon-sidebar .toggleButton {
-  display: flex;
-  align-items: center;
-  padding: 20px;
-  gap: 32px;
+.line {
+  width: 88px;
+  height: 1px;
 }
-.icon-sidebar-content ul {
-  padding: 20px;
-  color: #007FD8;
-  gap: 32px;
+.icon-btn {
+  padding: 20px 27px;
 }
-#offcanvasScrollingLabel {
-  color: #00A855;
-  font-size: 28px;
-  font-weight: 600;
+.icon-sidebar-content ul li {
+  padding: 16px 32px;
 }
-ul {
-  color: #007FD8;
-  gap: 4px;
+:global(.offcanvas-body) {
+  padding: 0rem 0rem;
 }
-.nav-item {
-  display: flex;
-  width: 241px;
-  padding: 15px;
-  align-items: center;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid #007FD8;
+.offcanvas-title {
+  color: #ffffff;
+  font-size: 28px;
 }
 .nav-item .item-name {
-  color: #007FD8;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
   line-height: 22px;
-  font-family: "Roboto";
 }
-.toggleButton {
+.toggle-button {
   background-color: transparent;
-  border: #fff;
+  border: #ffffff;
   cursor: pointer;
 }
 .material-icons {
-  font-size: 24px;
-  color: #007FD8;
+  font-size: 16px;
+  color: #ffffff;
 }
-:global(.offcanvas-start) {
+:global(.offcanvas.offcanvas-start) {
   width: 274px;
   border-right: none;
 }
-:global(.offcanvas.offcanvas-start) {
+.offcanvas-header {
+  padding: 1.5rem 1.5rem;
+}
+.line-open {
   width: 274px;
-  border-right: none;
+  height: 1px;
 }
-:global(.offcanvas-body) {
-  padding: 0.5rem 0.5rem;
+:global(.ebg-none) {
+  background-color: #ffffff !important;
 }
-.offcanvas-header {
-  padding: 0.5rem 0.5rem;
+:global(.ebg-white) {
+  background-color: #ffffff;
+}
+:global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
+  background-color: #3AC82E !important;
+}
+:global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
+  background-color: #00A855;
+}
+:global(.ebg-secondaryLight, .eactive-secondaryLight:active, .ehover-secondaryLight:hover) {
+  background-color: #CBFFC7;
+}
+:global(.ebg-primary) {
+  background-color: #00AEE5;
+}
+:global(.ebg-primaryDark) {
+  background-color: #007FD8;
+}
+:global(.ebg-primaryLight) {
+  background-color: #CEF3FF;
+}
+:global(.ebg-danger) {
+  background-color: #FE4747;
+}
+:global(.ebg-dangerDark) {
+  background-color: #B02A37;
+}
+:global(.ebg-dangerLight) {
+  background-color: #FE4747;
+}
+:global(.ebg-warning) {
+  background-color: #FFBA3A;
+}
+:global(.ebg-warningDark) {
+  background-color: #997404;
+  color: #ffffff !important;
+}
+:global(.ebg-warningLight) {
+  background-color: #FFF3CD;
+}
+:global(.ebg-info) {
+  background-color: #0DCAF0;
+}
+:global(.ebg-infoDark) {
+  background-color: #087990;
+}
+:global(.ebg-infoLight) {
+  background-color: #9EEAF9;
+}
+:global(.ebg-success) {
+  background-color: #00A96B;
+}
+:global(.ebg-successDark) {
+  background-color: #146C43;
+}
+:global(.ebg-successLight) {
+  background-color: #D1E7DD;
+}
+:global(.ebg-gray100) {
+  background-color: #F8F9FA;
+}
+:global(.ebg-gray200) {
+  background-color: #E9ECEF;
+}
+:global(.ebg-gray300) {
+  background-color: #DEE2E6;
+}
+:global(.ebg-gray400) {
+  background-color: #CED4DA;
+}
+:global(.ebg-gray500) {
+  background-color: #adb5bd;
+}
+:global(.ebg-gray600) {
+  background-color: #6C757D;
+}
+:global(.ebg-gray700) {
+  background-color: #495057;
+}
+:global(.ebg-gray800) {
+  background-color: #343A40;
+}
+:global(.ebg-gray900) {
+  background-color: #212529;
+}
+:global(.ebg-green100) {
+  background-color: #D1E7DD;
+}
+:global(.ebg-green200) {
+  background-color: #A3CFBB;
+}
+:global(.ebg-green300) {
+  background-color: #75B798;
+}
+:global(.ebg-green400) {
+  background-color: #479F76;
+}
+:global(.ebg-green500) {
+  background-color: #198754;
+}
+:global(.ebg-green600) {
+  background-color: #146C43;
+}
+:global(.ebg-green700) {
+  background-color: #0F5132;
+}
+:global(.ebg-green800) {
+  background-color: #0A3622;
+}
+:global(.ebg-green900) {
+  background-color: #051B11;
+}
+:global(.ebg-red100) {
+  background-color: #F8D7DA;
+}
+:global(.ebg-red200) {
+  background-color: #F1AEB5;
+}
+:global(.ebg-red300) {
+  background-color: #EA868F;
+}
+:global(.ebg-red400) {
+  background-color: #E35D6A;
+}
+:global(.ebg-red500) {
+  background-color: #DC3545;
+}
+:global(.ebg-red600) {
+  background-color: #B02A37;
+}
+:global(.ebg-red700) {
+  background-color: #842029;
+}
+:global(.ebg-red800) {
+  background-color: #58151C;
+}
+:global(.ebg-red900) {
+  background-color: #2C0B0E;
+}
+:global(.ebg-yellow100) {
+  background-color: #FFF3CD;
+}
+:global(.ebg-yellow200) {
+  background-color: #FFE69C;
+}
+:global(.ebg-yellow300) {
+  background-color: #FFDA6A;
+}
+:global(.ebg-yellow400) {
+  background-color: #FFCD39;
+}
+:global(.ebg-yellow500) {
+  background-color: #FFC107;
+}
+:global(.ebg-yellow600) {
+  background-color: #CC9A06;
+}
+:global(.ebg-yellow700) {
+  background-color: #997404;
+}
+:global(.ebg-yellow800) {
+  background-color: #664D03;
+}
+:global(.ebg-yellow900) {
+  background-color: #332701;
+}
+:global(.ebg-cyan100) {
+  background-color: #CFF4FC;
+}
+:global(.ebg-cyan200) {
+  background-color: #9EEAF9;
+}
+:global(.ebg-cyan300) {
+  background-color: #6EDFF6;
+}
+:global(.ebg-cyan400) {
+  background-color: #3DD5F3;
+}
+:global(.ebg-cyan500) {
+  background-color: #0DCAF0;
+}
+:global(.ebg-cyan600) {
+  background-color: #0AA2C0;
+}
+:global(.ebg-cyan700) {
+  background-color: #087990;
+}
+:global(.ebg-cyan800) {
+  background-color: #055160;
+}
+:global(.ebg-cyan900) {
+  background-color: #032830;
+}
+.etext-white {
+  color: #ffffff;
+}
+:global(.etext-dark) {
+  color: #000000;
+}
+:global(.etext-secondary) {
+  color: #3AC82E;
+}
+:global(.etext-secondaryDark) {
+  color: #00A855;
+}
+:global(.etext-secondaryLight) {
+  color: #CBFFC7;
+}
+:global(.etext-primary) {
+  color: #00AEE5;
+}
+:global(.etext-primaryDark) {
+  color: #007FD8;
+}
+:global(.etext-primaryLight) {
+  color: #CEF3FF;
+}
+:global(.etext-danger) {
+  color: #FE4747;
+}
+:global(.etext-dangerDark) {
+  color: #B02A37;
+}
+:global(.etext-dangerLight) {
+  color: #FE4747;
+}
+:global(.etext-info) {
+  color: #0DCAF0;
+}
+:global(.etext-infoDark) {
+  color: #087990;
+}
+:global(.etext-infoLight) {
+  color: #9EEAF9;
+}
+:global(.etext-success) {
+  color: #00A96B;
+}
+:global(.etext-successDark) {
+  color: #146C43;
+}
+:global(.etext-successLight) {
+  color: #D1E7DD;
+}
+:global(.etext-warning) {
+  color: #FFBA3A;
+}
+:global(.etext-warningDark) {
+  color: #997404;
+}
+:global(.etext-warningLight) {
+  color: #FFF3CD;
+}
+:global(.etext-gray100) {
+  color: #F8F9FA;
+}
+:global(.etext-gray200) {
+  color: #E9ECEF;
+}
+:global(.etext-gray300) {
+  color: #DEE2E6;
+}
+:global(.etext-gray400) {
+  color: #CED4DA;
+}
+:global(.etext-gray500) {
+  color: #adb5bd;
+}
+:global(.etext-gray600) {
+  color: #6C757D;
+}
+:global(.etext-gray700) {
+  color: #495057;
+}
+:global(.etext-gray800) {
+  color: #343A40;
+}
+:global(.etext-gray900) {
+  color: #212529;
+}
+:global(.etext-green100) {
+  color: #D1E7DD;
+}
+:global(.etext-green200) {
+  color: #A3CFBB;
+}
+:global(.etext-green300) {
+  color: #75B798;
+}
+:global(.etext-green400) {
+  color: #479F76;
+}
+:global(.etext-green500) {
+  color: #198754;
+}
+:global(.etext-green600) {
+  color: #146C43;
+}
+:global(.etext-green700) {
+  color: #0F5132;
+}
+:global(.etext-green800) {
+  color: #0A3622;
+}
+:global(.etext-green900) {
+  color: #051B11;
+}
+:global(.etext-red100) {
+  color: #F8D7DA;
+}
+:global(.etext-red200) {
+  color: #F1AEB5;
+}
+:global(.etext-red300) {
+  color: #EA868F;
+}
+:global(.etext-red400) {
+  color: #E35D6A;
+}
+:global(.etext-red500) {
+  color: #DC3545;
+}
+:global(.etext-red600) {
+  color: #B02A37;
+}
+:global(.etext-red700) {
+  color: #842029;
+}
+:global(.etext-red800) {
+  color: #58151C;
+}
+:global(.etext-red900) {
+  color: #2C0B0E;
+}
+:global(.etext-yellow100) {
+  color: #FFF3CD;
+}
+:global(.etext-yellow200) {
+  color: #FFE69C;
+}
+:global(.etext-yellow300) {
+  color: #FFDA6A;
+}
+:global(.etext-yellow400) {
+  color: #FFCD39;
+}
+:global(.etext-yellow500) {
+  color: #FFC107;
+}
+:global(.etext-yellow600) {
+  color: #CC9A06;
+}
+:global(.etext-yellow700) {
+  color: #997404;
+}
+:global(.etext-yellow800) {
+  color: #664D03;
+}
+:global(.etext-yellow900) {
+  color: #332701;
+}
+:global(.etext-cyan100) {
+  color: #CFF4FC;
+}
+:global(.etext-cyan200) {
+  color: #9EEAF9;
+}
+:global(.etext-cyan300) {
+  color: #6EDFF6;
+}
+:global(.etext-cyan400) {
+  color: #3DD5F3;
+}
+:global(.etext-cyan500) {
+  color: #0DCAF0;
+}
+:global(.etext-cyan600) {
+  color: #0AA2C0;
+}
+:global(.etext-cyan700) {
+  color: #087990;
+}
+:global(.etext-cyan800) {
+  color: #055160;
+}
+:global(.etext-cyan900) {
+  color: #032830;
+}
+:global(.eoutline-secondary) {
+  outline: 1px solid #3AC82E;
+}
+:global(.eoutline-secondaryDark) {
+  outline: 1px solid #00A855;
+}
+:global(.eoutline-secondaryLight) {
+  outline: 1px solid #CBFFC7;
+}
+:global(.eoutline-primary) {
+  outline: 1px solid #00AEE5;
+}
+:global(.eoutline-primaryDark) {
+  outline: 1px solid #007FD8;
+}
+:global(.eoutline-primaryLight) {
+  outline: 1px solid #CEF3FF;
+}
+:global(.eoutline-danger) {
+  outline: 1px solid #FE4747;
+}
+:global(.eoutline-dangerDark) {
+  outline: 1px solid #B02A37;
+}
+:global(.eoutline-dangerLight) {
+  outline: 1px solid #FE4747;
+}
+:global(.eoutline-success) {
+  outline: 1px solid #00A96B;
+}
+:global(.eoutline-successDark) {
+  outline: 1px solid #146C43;
+}
+:global(.eoutline-successLight) {
+  outline: 1px solid #D1E7DD;
+}
+:global(.eoutline-info) {
+  outline: 1px solid #0DCAF0;
+}
+:global(.eoutline-infoDark) {
+  outline: 1px solid #087990;
+}
+:global(.eoutline-infoLight) {
+  outline: 1px solid #9EEAF9;
+}
+:global(.eoutline-warning) {
+  outline: 1px solid #FFBA3A;
+}
+:global(.eoutline-warningDark) {
+  outline: 1px solid #997404;
+}
+:global(.eoutline-warningLight) {
+  outline: 1px solid #FFF3CD;
+}
+:global(.eradius) {
+  border-radius: 4px;
+}
+:global(.eradius-low) {
+  border-radius: 8px;
+}
+:global(.eradius-medium) {
+  border-radius: 16px;
+}
+:global(.eradius-full) {
+  border-radius: 50%;
+}
+.eshadow-non {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.eshadow-low {
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+}
+.eshadow-medium {
+  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
+}
+.eshadow-high {
+  box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.1);
+}
+:global(.efs-small) {
+  font-family: Roboto;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+:global(.efs-normal) {
+  font-family: Roboto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+}
+:global(.efs-strong) {
+  font-family: Roboto;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+}
+:global(.efs-h6) {
+  font-family: Roboto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h5) {
+  font-family: Roboto;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h4) {
+  font-family: Roboto;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h3) {
+  font-family: Roboto;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h2) {
+  font-family: Roboto;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+:global(.efs-h1) {
+  font-family: Roboto;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.8px;
+}
+:global(.efs-h4D) {
+  font-family: Merriweather;
+  font-size: 52px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+:global(.efs-h3D) {
+  font-family: Merriweather;
+  font-size: 58px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+:global(.efs-h2D) {
+  font-family: Merriweather;
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -1.28px;
+}
+:global(.efs-h1D) {
+  font-family: Merriweather;
+  font-size: 72px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
 }</style>
+