.main-box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	flex-wrap: wrap;

	$navHeight: 56px;

	.nav-box {
		width: 100%;
		height: $navHeight;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20px;
		border-bottom: 1px solid rgba(5, 5, 5, 0.06);

		.logo-box {
			display: flex;
			align-items: center;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.88);
			font-size: 16px;
			flex-shrink: 0;

			img {
				width: 28px;
				height: 28px;
				margin-right: 10px;
			}
		}

		.user-info-box {
			display: flex;
			align-items: center;
			color: rgba(0, 0, 0, 0.45);
			font-size: 14px;
			padding: 10px;
			cursor: pointer;
			&:hover {
				background-color: rgba(0, 0, 0, 0.03);
			}
		}
	}

	.sidebar {
		width: 256px;
		height: calc(100% - $navHeight);
		box-sizing: border-box;
		padding: 10px;
		flex-shrink: 0;
		border-right: 1px solid rgba(5, 5, 5, 0.06);
		position: relative;
		transition: width 0.3s;

		.fold-button {
			position: absolute;
			right: 0;
			top: 15px;
			transform: translateX(50%);
			transition: all 0.3s;
		}

		.is-fold {
			transform: translateX(50%) rotate(180deg);
		}

		.menu-box {
			width: 100%;
			height: 100%;
			overflow-y: auto;
		}
	}

	.rg-box {
		flex: 1;
		height: calc(100% - $navHeight);
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.content-box {
			flex: 1;
			height: 100%;
			box-sizing: border-box;
			overflow: auto;
			padding: 20px;
		}
	}
}
