aril 1.2.24 → 1.2.25

package/theme/styles/layout/_expanded_sidebar.scss

@@ -1,511 +1,511 @@
-.new-layout-sidebar {
-	display: flex;
-	position: fixed;
-	top: 55px; // Adjust based on topbar height
-	left: 0;
-	height: 100%;
-	z-index: 1000;
-	transition: transform 0.3s ease;
-
-  .sidebar-toggle-container {
-    position: absolute;
-    top: 20px;
-    right: -12px;
-    transform: translateY(-50%);
-    z-index: 1100;
-		.sidebar-circle-toggle-btn {
-			width: 24px;
-			height: 24px;
-			border-radius: 50%;
-			border: none;
-			background: #495465;
-			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			cursor: pointer;
-			transition: background 0.2s;
-			
-			i {
-				font-size: 1.2rem;
-				color: white;
-			}
-			
-			&:hover {
-				background: #3e4755;
-			}
-		}
-		@media screen and (max-width: 991px) {
-			display: none; 
-		}
-  }
-
-	// Main sidebar (first level)
-	.main-sidebar {
-		width: 64px;
-		height: 100%;
-		background-color: #1e293b;
-		border-right: 1px solid #0f172a;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		box-shadow: none;
-		z-index: 2;
-
-		.main-sidebar-content {
-			padding: 8px 0;
-			width: 100%;
-			flex: 1;
-			overflow-y: auto;
-
-			&::-webkit-scrollbar {
-				width: 4px;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background-color: #1e293b;
-				border-radius: 4px;
-			}
-
-			&::-webkit-scrollbar-track {
-				background-color: transparent;
-			}
-
-			.main-menu {
-				list-style: none;
-				padding: 0;
-				margin: 0;
-				width: 100%;
-
-				li {
-					width: 100%;
-					cursor: pointer;
-					position: relative;
-					overflow: hidden;
-
-					.main-menu-item {
-						display: flex;
-						flex-direction: column;
-						align-items: center;
-						padding: 12px 0;
-						color: #cbd5e1;
-						transition: all 0.25s ease;
-
-						.menu-icon {
-							font-size: 22px;
-							margin-bottom: 3px;
-							transition: color 0.2s ease;
-						}
-
-						.menu-label {
-							font-size: 11px;
-							font-weight: 500;
-							text-align: center;
-							line-height: 1.2;
-							transition: color 0.2s ease;
-							max-width: 55px;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-					}
-
-					&:hover {
-						.main-menu-item {
-							color: #e8e7e7;
-
-							.menu-icon {
-								transform: scale(1.15);
-							}
-						}
-
-						&::after {
-							content: '';
-							position: absolute;
-							left: 0;
-							top: 0;
-							width: 3px;
-							height: 100%;
-							background-color: #6e6e6e;
-							opacity: 0.7;
-						}
-					}
-
-					&.active {
-						background-color: #495465 !important;
-						position: relative;
-
-						&::before {
-							content: '';
-							position: absolute;
-							left: 0;
-							top: 0;
-							width: 3px;
-							height: 100%;
-							background-color: #0f172a;
-						}
-
-						.main-menu-item {
-							color: #fff!important;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	// Secondary sidebar (second level)
-	.secondary-sidebar {
-		width: 0;
-		height: 100%;
-		background-color: #1e293b;
-		position: relative;
-		transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 2px 0 5px #0000000d;
-		z-index: 1;
-		overflow: hidden;
-
-		// Content container wrapper to maintain layout
-		.secondary-content-wrapper {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 220px;
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-			opacity: 0;
-			visibility: hidden;
-			pointer-events: none;
-			transition: opacity 0.2s ease;
-		}
-
-		&.expanded {
-			width: 220px;
-
-			.secondary-content-wrapper {
-				opacity: 1;
-				visibility: visible;
-				pointer-events: auto;
-			}
-		}
-
-		.secondary-sidebar-content {
-			padding: 5px;
-			flex: 1;
-			overflow-y: auto;
-			padding-bottom:5rem;
-
-			&::-webkit-scrollbar {
-				width: 4px;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background-color: #1e293b;
-				border-radius: 4px;
-			}
-
-			&::-webkit-scrollbar-track {
-				background-color: transparent;
-			}
-
-			.secondary-menu {
-				list-style: none;
-				padding: 0;
-				margin: 0;
-
-				.secondary-menu-item {
-					margin-bottom: 4px;
-
-					.secondary-menu-link {
-						display: flex;
-						align-items: center;
-						padding: 10px 12px;
-						border-radius: 4px;
-						color: #cbd5e1;
-						text-decoration: none;
-						transition: all 0.25s ease;
-						white-space: nowrap;
-						position: relative;
-						overflow: hidden;
-
-						&::before {
-							content: '';
-							position: absolute;
-							width: 0;
-							height: 100%;
-							top: 0;
-							left: 0;
-							background-color: var(--primary-color);
-							opacity: 0.08;
-							transition: width 0.25s ease-in-out;
-						}
-
-						.submenu-icon {
-							font-size: 16px;
-							margin-right: 8px;
-							color: #cbd5e1;
-							flex-shrink: 0;
-							position: relative;
-							transition:
-								transform 0.25s ease,
-								color 0.25s ease;
-						}
-
-						.submenu-label {
-							flex: 1;
-							font-size: 13px;
-							font-weight: 500;
-							color: #cbd5e1;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-							position: relative;
-							transition: color 0.25s ease;
-							max-width: 160px;
-						}
-					}
-
-					&:hover .secondary-menu-link {
-						color: #e8e7e7 ;
-
-						&::before {
-							width: 100%;
-						}
-
-						.submenu-icon {
-							transform: translateX(2px);
-						}
-
-						.submenu-icon,
-						.submenu-label {
-							color: #e8e7e7 ;
-						}
-					}
-
-					&.active > .secondary-menu-link {
-						background-color: #495465;
-						color: #e8e7e7 !important;
-						font-weight: 500 !important;
-						box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
-
-						&::before {
-							display: none;
-						}
-
-						.submenu-icon,
-						.submenu-label {
-							color: #e8e7e7  !important;
-						}
-					}
-
-					&.action-loading > .secondary-menu-link {
-						opacity: 0.7;
-						pointer-events: none;
-					}
-
-					.secondary-menu-link.is-action {
-						cursor: pointer;
-					}
-
-					// Tertiary menu styles
-					.tertiary-menu {
-						list-style: none;
-						padding: 0;
-						margin: 4px 0 8px 10px;
-						max-height: 1000px;
-						overflow: hidden;
-						transition: max-height 0.3s ease;
-
-						&.always-open {
-							display: block !important;
-						}
-
-						.tertiary-menu-item {
-							margin-bottom: 3px;
-
-							&:before {
-								display: none;
-							}
-
-							.tertiary-menu-link {
-								display: flex;
-								align-items: center;
-								justify-content: space-between;
-								padding: 8px 12px;
-								border-radius: 6px;
-								color: #cbd5e1;
-								text-decoration: none;
-								font-size: 13px;
-								transition: all 0.25s ease;
-								white-space: nowrap;
-								overflow: hidden;
-								text-overflow: ellipsis;
-								position: relative;
-
-								&::before {
-									content: '';
-									position: absolute;
-									width: 0;
-									height: 100%;
-									top: 0;
-									left: 0;
-									background-color: #cbd5e1;
-									opacity: 0.08;
-									transition: width 0.25s ease-in-out;
-									border-radius: 6px;
-								}
-
-								.tertiary-label {
-									font-size: 12px;
-									max-width: 160px;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									white-space: nowrap;
-									color: #cbd5e1;
-								}
-							}
-
-							&:hover .tertiary-menu-link {
-								color: #e8e7e7 ;
-
-								&::before {
-									width: 100%;
-								}
-
-								.tertiary-label {
-									color: #e8e7e7 ;
-								}
-							}
-
-							&.active .tertiary-menu-link {
-								color: #e8e7e7 !important;
-								background-color: #495465 !important;
-								font-weight: 500 !important;
-								box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
-
-								&::before {
-									display: none;
-								}
-
-								.tertiary-label {
-									color: #e8e7e7  !important;
-								}
-							}
-						&.action-loading .tertiary-menu-link {
-							opacity: 0.7;
-							pointer-events: none;
-						}
-
-						.tertiary-menu-link.is-action {
-							cursor: pointer;
-						}						}
-					}
-				}
-			}
-		}
-	}
-}
-
-// Nested menu styles (deeper than tertiary)
-.nested-menu {
-	margin: 4px 0 6px 10px;
-	padding: 0 0 0 10px;
-	list-style: none;
-	overflow: hidden;
-	max-height: 1000px;
-
-	&.always-open {
-		display: block !important;
-	}
-}
-
-.nested-menu-item {
-	position: relative;
-	margin: 3px 0;
-
-	&:before {
-		display: none;
-	}
-
-	.nested-menu-link {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 6px 12px;
-		color:#cbd5e1;
-		text-decoration: none;
-		font-size: 13px;
-		border-radius: 4px;
-		transition: all 0.2s;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		.nested-label {
-			font-size: 11px;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			max-width: 170px;
-		}
-	}
-
-	&:hover .nested-menu-link {
-		background-color: rgba(26, 54, 93, 0.04);
-		color: #cbd5e1;
-
-		.nested-label {
-			color: #cbd5e1;
-		}
-	}
-
-	&.active {
-		> .nested-menu-link {
-			color: #e8e7e7 !important;
-			background-color: #495465 !important;
-			font-weight: 500 !important;
-			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
-
-			.nested-label {
-				color: #e8e7e7 !important;
-			}
-		}
-	}
-
-	&.action-loading .nested-menu-link {
-		opacity: 0.7;
-		pointer-events: none;
-	}
-
-	.nested-menu-link.is-action {
-		cursor: pointer;
-	}
-}
-
-// Mobile responsive styles
-@media screen and (max-width: 991px) {
-	.new-layout-sidebar {
-		transform: translateX(-100%); // Hide by default on mobile
-		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) !important;
-
-		.secondary-sidebar.expanded {
-			width: 240px; // Keep width on mobile
-		}
-	}
-
-	// Overlay and mobile active state
-	.layout-mask {
-		display: none;
-	}
-
-	.layout-mobile-active {
-		.new-layout-sidebar {
-			transform: translateX(0) !important; // Show when active
-		}
-
-		.layout-mask {
-			display: block;
-		}
-	}
-}
+.new-layout-sidebar {
+	display: flex;
+	position: fixed;
+	top: 55px; // Adjust based on topbar height
+	left: 0;
+	height: 100%;
+	z-index: 1000;
+	transition: transform 0.3s ease;
+
+  .sidebar-toggle-container {
+    position: absolute;
+    top: 20px;
+    right: -12px;
+    transform: translateY(-50%);
+    z-index: 1100;
+		.sidebar-circle-toggle-btn {
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			border: none;
+			background: #495465;
+			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			transition: background 0.2s;
+			
+			i {
+				font-size: 1.2rem;
+				color: white;
+			}
+			
+			&:hover {
+				background: #3e4755;
+			}
+		}
+		@media screen and (max-width: 991px) {
+			display: none; 
+		}
+  }
+
+	// Main sidebar (first level)
+	.main-sidebar {
+		width: 64px;
+		height: 100%;
+		background-color: #1e293b;
+		border-right: 1px solid #0f172a;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		box-shadow: none;
+		z-index: 2;
+
+		.main-sidebar-content {
+			padding: 8px 0;
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+
+			&::-webkit-scrollbar {
+				width: 4px;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background-color: #1e293b;
+				border-radius: 4px;
+			}
+
+			&::-webkit-scrollbar-track {
+				background-color: transparent;
+			}
+
+			.main-menu {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+				width: 100%;
+
+				li {
+					width: 100%;
+					cursor: pointer;
+					position: relative;
+					overflow: hidden;
+
+					.main-menu-item {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						padding: 12px 0;
+						color: #cbd5e1;
+						transition: all 0.25s ease;
+
+						.menu-icon {
+							font-size: 22px;
+							margin-bottom: 3px;
+							transition: color 0.2s ease;
+						}
+
+						.menu-label {
+							font-size: 11px;
+							font-weight: 500;
+							text-align: center;
+							line-height: 1.2;
+							transition: color 0.2s ease;
+							max-width: 55px;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+
+					&:hover {
+						.main-menu-item {
+							color: #e8e7e7;
+
+							.menu-icon {
+								transform: scale(1.15);
+							}
+						}
+
+						&::after {
+							content: '';
+							position: absolute;
+							left: 0;
+							top: 0;
+							width: 3px;
+							height: 100%;
+							background-color: #6e6e6e;
+							opacity: 0.7;
+						}
+					}
+
+					&.active {
+						background-color: #495465 !important;
+						position: relative;
+
+						&::before {
+							content: '';
+							position: absolute;
+							left: 0;
+							top: 0;
+							width: 3px;
+							height: 100%;
+							background-color: #0f172a;
+						}
+
+						.main-menu-item {
+							color: #fff!important;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	// Secondary sidebar (second level)
+	.secondary-sidebar {
+		width: 0;
+		height: 100%;
+		background-color: #1e293b;
+		position: relative;
+		transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 2px 0 5px #0000000d;
+		z-index: 1;
+		overflow: hidden;
+
+		// Content container wrapper to maintain layout
+		.secondary-content-wrapper {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 220px;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			opacity: 0;
+			visibility: hidden;
+			pointer-events: none;
+			transition: opacity 0.2s ease;
+		}
+
+		&.expanded {
+			width: 220px;
+
+			.secondary-content-wrapper {
+				opacity: 1;
+				visibility: visible;
+				pointer-events: auto;
+			}
+		}
+
+		.secondary-sidebar-content {
+			padding: 5px;
+			flex: 1;
+			overflow-y: auto;
+			padding-bottom:5rem;
+
+			&::-webkit-scrollbar {
+				width: 4px;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background-color: #1e293b;
+				border-radius: 4px;
+			}
+
+			&::-webkit-scrollbar-track {
+				background-color: transparent;
+			}
+
+			.secondary-menu {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+
+				.secondary-menu-item {
+					margin-bottom: 4px;
+
+					.secondary-menu-link {
+						display: flex;
+						align-items: center;
+						padding: 10px 12px;
+						border-radius: 4px;
+						color: #cbd5e1;
+						text-decoration: none;
+						transition: all 0.25s ease;
+						white-space: nowrap;
+						position: relative;
+						overflow: hidden;
+
+						&::before {
+							content: '';
+							position: absolute;
+							width: 0;
+							height: 100%;
+							top: 0;
+							left: 0;
+							background-color: var(--primary-color);
+							opacity: 0.08;
+							transition: width 0.25s ease-in-out;
+						}
+
+						.submenu-icon {
+							font-size: 16px;
+							margin-right: 8px;
+							color: #cbd5e1;
+							flex-shrink: 0;
+							position: relative;
+							transition:
+								transform 0.25s ease,
+								color 0.25s ease;
+						}
+
+						.submenu-label {
+							flex: 1;
+							font-size: 13px;
+							font-weight: 500;
+							color: #cbd5e1;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+							position: relative;
+							transition: color 0.25s ease;
+							max-width: 160px;
+						}
+					}
+
+					&:hover .secondary-menu-link {
+						color: #e8e7e7 ;
+
+						&::before {
+							width: 100%;
+						}
+
+						.submenu-icon {
+							transform: translateX(2px);
+						}
+
+						.submenu-icon,
+						.submenu-label {
+							color: #e8e7e7 ;
+						}
+					}
+
+					&.active > .secondary-menu-link {
+						background-color: #495465;
+						color: #e8e7e7 !important;
+						font-weight: 500 !important;
+						box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+
+						&::before {
+							display: none;
+						}
+
+						.submenu-icon,
+						.submenu-label {
+							color: #e8e7e7  !important;
+						}
+					}
+
+					&.action-loading > .secondary-menu-link {
+						opacity: 0.7;
+						pointer-events: none;
+					}
+
+					.secondary-menu-link.is-action {
+						cursor: pointer;
+					}
+
+					// Tertiary menu styles
+					.tertiary-menu {
+						list-style: none;
+						padding: 0;
+						margin: 4px 0 8px 10px;
+						max-height: 1000px;
+						overflow: hidden;
+						transition: max-height 0.3s ease;
+
+						&.always-open {
+							display: block !important;
+						}
+
+						.tertiary-menu-item {
+							margin-bottom: 3px;
+
+							&:before {
+								display: none;
+							}
+
+							.tertiary-menu-link {
+								display: flex;
+								align-items: center;
+								justify-content: space-between;
+								padding: 8px 12px;
+								border-radius: 6px;
+								color: #cbd5e1;
+								text-decoration: none;
+								font-size: 13px;
+								transition: all 0.25s ease;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								position: relative;
+
+								&::before {
+									content: '';
+									position: absolute;
+									width: 0;
+									height: 100%;
+									top: 0;
+									left: 0;
+									background-color: #cbd5e1;
+									opacity: 0.08;
+									transition: width 0.25s ease-in-out;
+									border-radius: 6px;
+								}
+
+								.tertiary-label {
+									font-size: 12px;
+									max-width: 160px;
+									overflow: hidden;
+									text-overflow: ellipsis;
+									white-space: nowrap;
+									color: #cbd5e1;
+								}
+							}
+
+							&:hover .tertiary-menu-link {
+								color: #e8e7e7 ;
+
+								&::before {
+									width: 100%;
+								}
+
+								.tertiary-label {
+									color: #e8e7e7 ;
+								}
+							}
+
+							&.active .tertiary-menu-link {
+								color: #e8e7e7 !important;
+								background-color: #495465 !important;
+								font-weight: 500 !important;
+								box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+
+								&::before {
+									display: none;
+								}
+
+								.tertiary-label {
+									color: #e8e7e7  !important;
+								}
+							}
+						&.action-loading .tertiary-menu-link {
+							opacity: 0.7;
+							pointer-events: none;
+						}
+
+						.tertiary-menu-link.is-action {
+							cursor: pointer;
+						}						}
+					}
+				}
+			}
+		}
+	}
+}
+
+// Nested menu styles (deeper than tertiary)
+.nested-menu {
+	margin: 4px 0 6px 10px;
+	padding: 0 0 0 10px;
+	list-style: none;
+	overflow: hidden;
+	max-height: 1000px;
+
+	&.always-open {
+		display: block !important;
+	}
+}
+
+.nested-menu-item {
+	position: relative;
+	margin: 3px 0;
+
+	&:before {
+		display: none;
+	}
+
+	.nested-menu-link {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 6px 12px;
+		color:#cbd5e1;
+		text-decoration: none;
+		font-size: 13px;
+		border-radius: 4px;
+		transition: all 0.2s;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		.nested-label {
+			font-size: 11px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 170px;
+		}
+	}
+
+	&:hover .nested-menu-link {
+		background-color: rgba(26, 54, 93, 0.04);
+		color: #cbd5e1;
+
+		.nested-label {
+			color: #cbd5e1;
+		}
+	}
+
+	&.active {
+		> .nested-menu-link {
+			color: #e8e7e7 !important;
+			background-color: #495465 !important;
+			font-weight: 500 !important;
+			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+
+			.nested-label {
+				color: #e8e7e7 !important;
+			}
+		}
+	}
+
+	&.action-loading .nested-menu-link {
+		opacity: 0.7;
+		pointer-events: none;
+	}
+
+	.nested-menu-link.is-action {
+		cursor: pointer;
+	}
+}
+
+// Mobile responsive styles
+@media screen and (max-width: 991px) {
+	.new-layout-sidebar {
+		transform: translateX(-100%); // Hide by default on mobile
+		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) !important;
+
+		.secondary-sidebar.expanded {
+			width: 240px; // Keep width on mobile
+		}
+	}
+
+	// Overlay and mobile active state
+	.layout-mask {
+		display: none;
+	}
+
+	.layout-mobile-active {
+		.new-layout-sidebar {
+			transform: translateX(0) !important; // Show when active
+		}
+
+		.layout-mask {
+			display: block;
+		}
+	}
+}