aril 1.2.24 → 1.2.25

package/theme/layout/app/static-sidebar/static-sidebar.component.scss

@@ -1,421 +1,421 @@
-/* Search container */
-.search-container {
-	padding: 12px 8px;
-	margin: 0;
-}
-
-.search-wrapper {
-	position: relative;
-	width: 100%;
-}
-
-.search-icon {
-	position: absolute;
-	left: 12px;
-	top: 50%;
-	transform: translateY(-50%);
-	color: #64748b;
-	font-size: 14px;
-	z-index: 10;
-	pointer-events: none;
-	transition: color 0.2s ease;
-}
-
-.search-static-sidebar {
-	background: #1e293b !important; 
-	border: 1px solid rgba(148, 163, 184, 0.1) !important; 
-	height: 36px !important;
-	font-size: 13px !important;
-	font-weight: 400;
-	color: #cbd5e1 !important;
-	padding: 0 12px 0 36px !important;
-	border-radius: 4px !important;
-	width: 100% !important;
-	box-sizing: border-box !important;
-	transition: all 0.25s ease !important;
-	
-	&::placeholder {
-		font-size: 12px !important;
-	}
-	
-	&:hover {
-		background: rgba(15, 23, 42, 0.7) !important;
-		border-color: rgba(148, 163, 184, 0.15) !important;
-	}
-	
-	&:focus {
-		outline: none !important;
-		border:1px solid rgba(15, 23, 42, 0.8) !important;
-		background: rgba(15, 23, 42, 0.8) !important;
-	}
-}
-
-.search-wrapper:focus-within .search-icon {
-	color: #cbd5e1;
-}
-
-.static-sidebar {
-	width: 260px;
-	height: 100vh;
-	background: #1e293b;
-	border-right: 1px solid #0f172a;
-	display: flex;
-	flex-direction: column;
-	position: fixed;
-	left: 0;
-	top: 55px; // Adjust based on topbar height
-	z-index: 999;
-	overflow-y: auto;
-	overflow-x: hidden;
-	transition: width 0.3s ease;
-	box-shadow: 2px 0 5px #0000000d;
-
-	&.collapsed {
-		width: 64px;
-		box-shadow: none;
-	}
-
-	.static-sidebar-content {
-		flex: 1;
-		background: transparent;
-		overflow: hidden 
-	}
-
-	.tree-container {
-		padding: 5px 0;
-		overflow-x: hidden;
-	}
-
-	.tree-node {
-		margin-bottom: 4px;
-		position: relative;
-		
-		.node-item {
-			display: flex;
-			align-items: center;
-			padding: 10px 12px;
-			border-radius: 4px;
-			margin: 0 5px;
-			cursor: pointer;
-			transition: all 0.25s ease;
-			text-decoration: none;
-			color: #cbd5e1 !important;
-			overflow: visible;
-			position: relative;
-			white-space: nowrap;
-			
-			&::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;
-			}
-			
-			&:hover {
-				color: #e8e7e7 !important;
-				
-				&::before {
-					width: 100%;
-				}
-				
-				.node-label {
-					color: #e8e7e7 !important;
-				}
-				
-				.node-icon {
-					color: #e8e7e7 !important;
-					transform: translateX(2px);
-				}
-			}
-			
-			&.is-page {
-				&:hover {
-					color: #e8e7e7 !important;
-					
-					&::before {
-						width: 100%;
-					}
-				}
-			}
-
-			&.active {
-				background-color: #495465 !important;
-				color: #e8e7e7 !important;
-				font-weight: 500 !important;
-				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
-				
-				&::before {
-					display: none;
-				}
-
-				.node-label,
-				.node-icon,
-				.toggle-btn i {
-					color: #e8e7e7 !important;
-				}
-				
-				&:hover {
-					background-color: var(--primary-color);
-				}
-			}
-
-			&.is-action {
-				cursor: pointer;
-
-				&.action-loading {
-					opacity: 0.7;
-					pointer-events: none;
-				}
-			}
-		}
-
-		.node-content {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			width: 100%;
-			min-width: 0;
-			position: relative;
-			z-index: 2;
-			padding-left: 24px;
-		}
-		
-		.toggle-btn {
-			position: absolute;
-			left: 0;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 20px;
-			height: 16px;
-			border: none;
-			border-radius: 3px;
-			color: #cbd5e1;
-			cursor: pointer;
-			transition: all 0.25s ease;
-			flex-shrink: 0;
-			z-index: 3;
-			
-			&:hover {
-				transform: scale(1.1);
-			}
-			
-			i {
-				font-size: 0.7rem;
-				transition: transform 0.2s ease;
-			}
-		}
-		
-		.node-icon {
-			color: #cbd5e1;
-			font-size: 16px;
-			flex-shrink: 0;
-			transition: transform 0.25s ease, color 0.25s ease;
-			position: relative;
-		}
-		
-		.node-label {
-			flex: 1;
-			font-size: 13px;
-			font-weight: 500;
-			color: #cbd5e1;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			transition: color 0.25s ease;
-			position: relative;
-		}
-	}
-
-	// Collapsed mode styles - similar to expandable sidebar main menu
-	.collapsed-container {
-		padding: 8px 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: 100%;
-	}
-
-	.collapsed-item {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: 12px 0;
-		cursor: pointer;
-		transition: all 0.25s ease;
-		text-decoration: none;
-		position: relative;
-		overflow: hidden;
-		margin-bottom: 4px;
-		color: #cbd5e1;
-
-		&:hover {
-			color: #e8e7e7;
-			
-			.collapsed-icon {
-				transform: scale(1.15);
-				color: #e8e7e7;
-			}
-			
-			&::after {
-				content: '';
-				position: absolute;
-				left: 0;
-				top: 0;
-				width: 3px;
-				height: 100%;
-				background-color: #0f172a;
-				opacity: 0.7;
-			}
-		}
-
-		&.active {
-			background-color: #495465 !important;
-			
-			&::before {
-				content: '';
-				position: absolute;
-				left: 0;
-				top: 0;
-				width: 3px;
-				height: 100%;
-				background-color: #0f172a;
-			}
-			
-			.collapsed-icon {
-				color: #fff !important;
-			}
-		}
-
-		.collapsed-icon {
-			font-size: 22px;
-			color: #cbd5e1;
-			transition: all 0.2s ease;
-		}
-	}
-
-	// Tree lines for hierarchical structure
-	.children-container {
-		position: relative;
-		
-		&::before {
-			content: '';
-			position: absolute;
-			left: 25px;
-			top: 0;
-			bottom: 0;
-			width: 1px;
-			background-color: rgba(71, 85, 105, 0.3);
-			z-index: 1;
-		}
-	}
-
-	// Level-based styling
-	.tree-node {
-		position: relative;
-		
-		&.level-0 {
-			.node-item {
-				margin-right: 20px;
-				width: 240px;
-				max-width: 240px;
-			}
-			.node-label {
-				font-size: 13px;
-				font-weight: 500;
-				color: #cbd5e1;
-			}
-			.node-icon {
-				font-size: 16px;
-			}
-		}
-		
-		&.level-1 {
-			.node-item {
-				margin-left: 36px;
-				margin-right: 20px;
-				padding: 8px 12px;
-				width: 204px;
-				max-width: 204px;
-			}
-			.node-label {
-				font-size: 12px;
-				font-weight: 400;
-			}
-			.node-icon {
-				font-size: 15px;
-			}
-		}
-		
-		&.level-2 {
-			.node-item {
-				margin-left: 52px;
-				margin-right: 20px;
-				width: 188px;
-				max-width: 188px;
-			}
-			.node-label {
-				font-size: 11px;
-				font-weight: 400;
-				color: #cbd5e1;
-			}
-			.node-icon {
-				font-size: 14px;
-			}
-			
-			&.active .node-item {
-				background-color: #495465 !important;
-				.node-label {
-					color: #e8e7e7 !important;
-				}
-			}
-		}
-		
-		&.level-3 {
-			.node-item {
-				margin-left: 68px;
-				margin-right: 20px;
-				padding: 6px 12px;
-				width: 172px;
-				max-width: 172px;
-			}
-			.node-label {
-				font-size: 11px;
-				font-weight: 400;
-				color: #cbd5e1;
-			}
-			.node-icon {
-				font-size: 13px;
-			}
-		}
-	}
-}
-
-/* custom scrollbar - matching expandable sidebar */
-:host ::ng-deep {
-	.p-scrollpanel {
-		.p-scrollpanel-wrapper {
-			border: none;
-		}
-		
-		.p-scrollpanel-content {
-			padding-right: 5px;
-		}
-	}
-	
-	.p-scrollpanel-bar-y {
-		background: #1e293b;
-		width: 4px;
-		border-radius: 4px;
-	}
-	
-	.p-scrollpanel-bar-y:hover {
-		background: #1e293b;
-	}
+/* Search container */
+.search-container {
+	padding: 12px 8px;
+	margin: 0;
+}
+
+.search-wrapper {
+	position: relative;
+	width: 100%;
+}
+
+.search-icon {
+	position: absolute;
+	left: 12px;
+	top: 50%;
+	transform: translateY(-50%);
+	color: #64748b;
+	font-size: 14px;
+	z-index: 10;
+	pointer-events: none;
+	transition: color 0.2s ease;
+}
+
+.search-static-sidebar {
+	background: #1e293b !important; 
+	border: 1px solid rgba(148, 163, 184, 0.1) !important; 
+	height: 36px !important;
+	font-size: 13px !important;
+	font-weight: 400;
+	color: #cbd5e1 !important;
+	padding: 0 12px 0 36px !important;
+	border-radius: 4px !important;
+	width: 100% !important;
+	box-sizing: border-box !important;
+	transition: all 0.25s ease !important;
+	
+	&::placeholder {
+		font-size: 12px !important;
+	}
+	
+	&:hover {
+		background: rgba(15, 23, 42, 0.7) !important;
+		border-color: rgba(148, 163, 184, 0.15) !important;
+	}
+	
+	&:focus {
+		outline: none !important;
+		border:1px solid rgba(15, 23, 42, 0.8) !important;
+		background: rgba(15, 23, 42, 0.8) !important;
+	}
+}
+
+.search-wrapper:focus-within .search-icon {
+	color: #cbd5e1;
+}
+
+.static-sidebar {
+	width: 260px;
+	height: 100vh;
+	background: #1e293b;
+	border-right: 1px solid #0f172a;
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+	left: 0;
+	top: 55px; // Adjust based on topbar height
+	z-index: 999;
+	overflow-y: auto;
+	overflow-x: hidden;
+	transition: width 0.3s ease;
+	box-shadow: 2px 0 5px #0000000d;
+
+	&.collapsed {
+		width: 64px;
+		box-shadow: none;
+	}
+
+	.static-sidebar-content {
+		flex: 1;
+		background: transparent;
+		overflow: hidden 
+	}
+
+	.tree-container {
+		padding: 5px 0;
+		overflow-x: hidden;
+	}
+
+	.tree-node {
+		margin-bottom: 4px;
+		position: relative;
+		
+		.node-item {
+			display: flex;
+			align-items: center;
+			padding: 10px 12px;
+			border-radius: 4px;
+			margin: 0 5px;
+			cursor: pointer;
+			transition: all 0.25s ease;
+			text-decoration: none;
+			color: #cbd5e1 !important;
+			overflow: visible;
+			position: relative;
+			white-space: nowrap;
+			
+			&::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;
+			}
+			
+			&:hover {
+				color: #e8e7e7 !important;
+				
+				&::before {
+					width: 100%;
+				}
+				
+				.node-label {
+					color: #e8e7e7 !important;
+				}
+				
+				.node-icon {
+					color: #e8e7e7 !important;
+					transform: translateX(2px);
+				}
+			}
+			
+			&.is-page {
+				&:hover {
+					color: #e8e7e7 !important;
+					
+					&::before {
+						width: 100%;
+					}
+				}
+			}
+
+			&.active {
+				background-color: #495465 !important;
+				color: #e8e7e7 !important;
+				font-weight: 500 !important;
+				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+				
+				&::before {
+					display: none;
+				}
+
+				.node-label,
+				.node-icon,
+				.toggle-btn i {
+					color: #e8e7e7 !important;
+				}
+				
+				&:hover {
+					background-color: var(--primary-color);
+				}
+			}
+
+			&.is-action {
+				cursor: pointer;
+
+				&.action-loading {
+					opacity: 0.7;
+					pointer-events: none;
+				}
+			}
+		}
+
+		.node-content {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			width: 100%;
+			min-width: 0;
+			position: relative;
+			z-index: 2;
+			padding-left: 24px;
+		}
+		
+		.toggle-btn {
+			position: absolute;
+			left: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 20px;
+			height: 16px;
+			border: none;
+			border-radius: 3px;
+			color: #cbd5e1;
+			cursor: pointer;
+			transition: all 0.25s ease;
+			flex-shrink: 0;
+			z-index: 3;
+			
+			&:hover {
+				transform: scale(1.1);
+			}
+			
+			i {
+				font-size: 0.7rem;
+				transition: transform 0.2s ease;
+			}
+		}
+		
+		.node-icon {
+			color: #cbd5e1;
+			font-size: 16px;
+			flex-shrink: 0;
+			transition: transform 0.25s ease, color 0.25s ease;
+			position: relative;
+		}
+		
+		.node-label {
+			flex: 1;
+			font-size: 13px;
+			font-weight: 500;
+			color: #cbd5e1;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			transition: color 0.25s ease;
+			position: relative;
+		}
+	}
+
+	// Collapsed mode styles - similar to expandable sidebar main menu
+	.collapsed-container {
+		padding: 8px 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+	}
+
+	.collapsed-item {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 12px 0;
+		cursor: pointer;
+		transition: all 0.25s ease;
+		text-decoration: none;
+		position: relative;
+		overflow: hidden;
+		margin-bottom: 4px;
+		color: #cbd5e1;
+
+		&:hover {
+			color: #e8e7e7;
+			
+			.collapsed-icon {
+				transform: scale(1.15);
+				color: #e8e7e7;
+			}
+			
+			&::after {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 3px;
+				height: 100%;
+				background-color: #0f172a;
+				opacity: 0.7;
+			}
+		}
+
+		&.active {
+			background-color: #495465 !important;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 3px;
+				height: 100%;
+				background-color: #0f172a;
+			}
+			
+			.collapsed-icon {
+				color: #fff !important;
+			}
+		}
+
+		.collapsed-icon {
+			font-size: 22px;
+			color: #cbd5e1;
+			transition: all 0.2s ease;
+		}
+	}
+
+	// Tree lines for hierarchical structure
+	.children-container {
+		position: relative;
+		
+		&::before {
+			content: '';
+			position: absolute;
+			left: 25px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: rgba(71, 85, 105, 0.3);
+			z-index: 1;
+		}
+	}
+
+	// Level-based styling
+	.tree-node {
+		position: relative;
+		
+		&.level-0 {
+			.node-item {
+				margin-right: 20px;
+				width: 240px;
+				max-width: 240px;
+			}
+			.node-label {
+				font-size: 13px;
+				font-weight: 500;
+				color: #cbd5e1;
+			}
+			.node-icon {
+				font-size: 16px;
+			}
+		}
+		
+		&.level-1 {
+			.node-item {
+				margin-left: 36px;
+				margin-right: 20px;
+				padding: 8px 12px;
+				width: 204px;
+				max-width: 204px;
+			}
+			.node-label {
+				font-size: 12px;
+				font-weight: 400;
+			}
+			.node-icon {
+				font-size: 15px;
+			}
+		}
+		
+		&.level-2 {
+			.node-item {
+				margin-left: 52px;
+				margin-right: 20px;
+				width: 188px;
+				max-width: 188px;
+			}
+			.node-label {
+				font-size: 11px;
+				font-weight: 400;
+				color: #cbd5e1;
+			}
+			.node-icon {
+				font-size: 14px;
+			}
+			
+			&.active .node-item {
+				background-color: #495465 !important;
+				.node-label {
+					color: #e8e7e7 !important;
+				}
+			}
+		}
+		
+		&.level-3 {
+			.node-item {
+				margin-left: 68px;
+				margin-right: 20px;
+				padding: 6px 12px;
+				width: 172px;
+				max-width: 172px;
+			}
+			.node-label {
+				font-size: 11px;
+				font-weight: 400;
+				color: #cbd5e1;
+			}
+			.node-icon {
+				font-size: 13px;
+			}
+		}
+	}
+}
+
+/* custom scrollbar - matching expandable sidebar */
+:host ::ng-deep {
+	.p-scrollpanel {
+		.p-scrollpanel-wrapper {
+			border: none;
+		}
+		
+		.p-scrollpanel-content {
+			padding-right: 5px;
+		}
+	}
+	
+	.p-scrollpanel-bar-y {
+		background: #1e293b;
+		width: 4px;
+		border-radius: 4px;
+	}
+	
+	.p-scrollpanel-bar-y:hover {
+		background: #1e293b;
+	}
 }