comty/packages/app/src/layouts/components/sidebar/index.less

@import "@styles/vars.less";

.app_sidebar_tauri {
	width: 100%;
	height: 10px;
}

.app_sidebar_wrapper {
	position: sticky;

	left: 0;
	top: 0;

	z-index: 1000;

	display: flex;
	flex-direction: column;

	align-items: center;

	gap: 10px;

	width: fit-content;

	height: 100vh;
	height: 100dvh;

	padding: 10px;
}

.app_sidebar {
	position: relative;

	z-index: 1000;

	display: flex;
	flex-direction: column;

	overflow: hidden;

	width: @sidebar_width;
	min-width: @sidebar_width;

	height: 100%;

	padding: 10px 0;

	transition: width 150ms ease-in-out;

	background-color: var(--sidebar-background-color);

	border-radius: @sidebar_borderRadius;
	box-shadow: @card-shadow;

	//border-radius: 0 @sidebar_borderRadius @sidebar_borderRadius 0;
	border: 1px solid var(--sidebar-background-color);

	&.expanded {
		width: @sidebar_width_expanded;

		.app_sidebar_menu_wrapper {
			.ant-menu {
				#sidebar_item_content {
					opacity: 1;
					width: 100%;
				}

				.ant-menu-item:not(.user_avatar) {
					.ant-menu-title-content {
						opacity: 1;
						width: 100%;
					}
				}
			}
		}
	}

	&.hidden {
		width: 0;
		min-width: 0;
		padding: 0;
	}

	&.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.app_sidebar_header {
		display: flex;
		flex-direction: column;

		height: 17%;

		padding: 10px 0;

		.app_sidebar_header_logo {
			display: flex;
			flex-direction: column;

			gap: 10px;

			align-items: center;
			justify-content: center;

			.ant-tag {
				margin: 0;
			}

			img {
				user-select: none;
				--webkit-user-select: none;

				width: fit-content;
				max-height: 46px;

				transition: all 150ms ease-in-out;

				&:hover {
					cursor: pointer;
					scale: 1.1;
					filter: drop-shadow(0 0 5px var(--shadow-color));
				}
			}
		}
	}

	.app_sidebar_menu_wrapper {
		height: 65%;
		width: 100%;

		overflow: overlay;
		overflow-x: hidden;

		display: flex;
		flex-direction: column;

		align-items: center;

		transition: all 150ms ease-in-out;

		padding: 5px;

		&.bottom {
			position: absolute;

			bottom: 0;
			left: 0;

			height: fit-content;

			padding-bottom: 30px;
		}

		.ant-menu {
			display: flex;
			flex-direction: column;

			justify-content: center;
			align-items: center;

			width: 100%;

			transition: all 150ms ease-in-out;

			#sidebar_item_content {
				opacity: 0;
				width: 0;
			}

			.ant-menu-item {
				display: inline-flex;

				align-items: center;
				justify-content: center;

				width: 100%;

				padding: 0 0 0 calc(@sidebar_width / 2);
				margin: 5px 0;

				transition: all 150ms ease-in-out;

				.ant-menu-item-icon {
					font-size: 1rem;

					margin: 0 !important;
				}

				.ant-menu-title-content {
					text-overflow: clip;
					opacity: 0;
					width: 0;
				}

				&.user_avatar {
					.ant-menu-title-content {
						width: 100%;

						display: inline-flex;

						align-items: flex-start;
						justify-content: center;

						opacity: 1;

						.ant-dropdown-trigger {
							width: 100%;

							img {
								width: fit-content;
								border-radius: 10px;
							}
						}
					}

					padding: 0 !important;
				}
			}

			.ant-menu-item-selected {
				background-color: var(--background-color-primary) !important;
			}
		}
	}
}