product-inventory-management.git

			@@ -1,14 +1,14 @@
			#app {

			.main-container {
			min-height: 100%;
			transition: margin-left .28s;
			transition: margin-left 0.28s;
			margin-left: $base-sidebar-width;
			position: relative;
			background: transparent;
			}

			.sidebarHide {
			margin-left: 0!important;
			margin-left: 0 !important;
			}

			.sidebar-container {
			@@ -22,12 +22,14 @@
			left: 0;
			z-index: 1001;
			overflow: hidden;
			-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
			padding: 12px 0 16px 16px;
			background: transparent;
			box-shadow: none;

			// reset element-ui css
			.horizontal-collapse-transition {
			transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
			transition: 0s width ease-in-out, 0s padding-left ease-in-out,
			0s padding-right ease-in-out;
			}

			.scrollbar-wrapper {
			@@ -44,7 +46,8 @@

			&.has-logo {
			.el-scrollbar {
			height: calc(100% - 50px);
			height: calc(100% - 72px);
			margin-top: 10px;
			}
			}

			@@ -62,13 +65,19 @@
			margin-right: 16px;
			}

			.el-menu {
			border: none;
			height: 100%;
			width: 100% !important;
			}
			.el-menu {
			border: none;
			height: 100%;
			width: 100% !important;
			padding: 10px 8px 18px;
			border-radius: 22px;
			background: var(--menu-surface);
			backdrop-filter: blur(18px);
			box-shadow: var(--shadow-sm);
			}

			.el-menu-item, .menu-title {
			.el-menu-item,
			.menu-title {
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			white-space: nowrap !important;
			@@ -78,93 +87,157 @@
			display: inline-block !important;
			}

			// menu hover
			.sub-menu-title-noDropdown,
			.el-sub-menu__title {
			&:hover {
			background-color: rgba(0, 0, 0, 0.06) !important;
			}
			// menu hover
			.submenu-title-noDropdown,
			.el-sub-menu__title {
			&:hover {
			background-color: var(--menu-hover) !important;
			border-radius: 14px;
			}
			}
			& .theme-light .is-active > .el-sub-menu__title {
			color: var(--current-color) !important;
			}

			& .theme-dark .is-active > .el-sub-menu__title {
			color: $base-menu-color-active !important;
			}
			& .nest-menu .el-sub-menu > .el-sub-menu__title,
			& .el-sub-menu .el-menu-item {
			min-width: 0 !important;
			margin: 0 12px 6px;
			width: calc(100% - 24px);
			padding-left: 8px !important;
			padding-right: 8px !important;
			box-sizing: border-box;

			&:hover {
			background-color: var(--menu-hover) !important;
			}
			&.is-active {
			background-color: var(--menu-active-bg) !important;
			border-radius: 14px;
			}
			}

			& .nest-menu .el-sub-menu>.el-sub-menu__title,
			& .el-sub-menu .el-menu-item {
			min-width: $base-sidebar-width !important;
			& .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,
			& .theme-light .el-sub-menu .el-menu-item {
			//background-color: transparent;

			&:hover {
			background-color: var(--menu-hover) !important;
			border-radius: 14px;
			}
			}
			}

			&:hover {
			background-color: rgba(0, 0, 0, 0.06) !important;
			}
			}
			.hideSidebar {
			.sidebar-container {
			width: 68px !important;
			padding-left: 0;
			padding-right: 0;
			}

			.main-container {
			margin-left: 84px;
			}

			& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
			& .theme-dark .el-sub-menu .el-menu-item {
			background-color: $base-sub-menu-background;

			&:hover {
			background-color: $base-sub-menu-hover !important;
			}
			}
			}

			.hideSidebar {
			.sidebar-container {
			width: 54px !important;
			}

			.main-container {
			margin-left: 54px;
			}

			.sub-menu-title-noDropdown {
			padding: 0 !important;
			position: relative;

			.el-tooltip {
			padding: 0 !important;

			.svg-icon {
			margin-left: 20px;
			}
			}
			}

			.el-sub-menu {
			overflow: hidden;

			&>.el-sub-menu__title {
			padding: 0 !important;

			.svg-icon {
			margin-left: 20px;
			}

			}
			}

			.el-menu--collapse {
			.el-sub-menu {
			&>.el-sub-menu__title {
			&>span {
			.submenu-title-noDropdown {
			padding: 0 !important;
			position: relative;
			display: flex !important;
			align-items: center;
			justify-content: center;

			.svg-icon {
			margin-right: 0;
			}

			.el-tooltip {
			padding: 0 !important;
			display: inline-flex !important;
			align-items: center;
			justify-content: center;
			width: 100%;

			.svg-icon {
			margin-left: 0;
			}
			}

			.el-menu-tooltip__trigger {
			width: 100%;
			display: inline-flex !important;
			align-items: center;
			justify-content: center;

			.svg-icon {
			width: 18px;
			height: 18px;
			margin-right: 0;
			flex-shrink: 0;
			}
			}
			}
			.el-sub-menu {
			overflow: hidden;

			& > .el-sub-menu__title {
			padding: 0 !important;
			display: flex !important;
			align-items: center;
			justify-content: center;

			.svg-icon {
			margin-left: 0;
			margin-right: 0;
			}
			}
			}

			.el-menu--collapse {
			width: 100% !important;
			padding: 10px 6px 18px;

			> .el-menu-item,
			.el-sub-menu {
			& > .el-sub-menu__title,
			&.el-menu-item {
			margin: 0 0 6px;
			width: 100%;
			padding-left: 0 !important;
			padding-right: 0 !important;
			box-sizing: border-box;
			display: flex !important;
			align-items: center;
			justify-content: center;

			.svg-icon {
			width: 18px;
			height: 18px;
			margin-right: 0;
			flex-shrink: 0;
			}

			&:hover {
			border-radius: 14px;
			}

			& > span {
			height: 0;
			width: 0;
			overflow: hidden;
			visibility: hidden;
			display: inline-block;
			}
			& > i {
			height: 0;
			width: 0;
			overflow: hidden;
			visibility: hidden;
			display: inline-block;
			}
			&>i {
			height: 0;
			width: 0;
			overflow: hidden;
			visibility: hidden;
			display: inline-block;
			}
			}
			}
			}
			}
			}
			}
			}
			}
			}

			.el-menu--collapse .el-menu .el-sub-menu {
			min-width: $base-sidebar-width !important;
			@@ -177,7 +250,7 @@
			}

			.sidebar-container {
			transition: transform .28s;
			transition: transform 0.28s;
			width: $base-sidebar-width !important;
			}

			@@ -191,7 +264,6 @@
			}

			.withoutAnimation {

			.main-container,
			.sidebar-container {
			transition: none;
			@@ -201,27 +273,42 @@

			// when menu collapsed
			.el-menu--vertical {
			&>.el-menu {
			& > .el-menu {
			.svg-icon {
			margin-right: 16px;
			}
			}

			.nest-menu .el-sub-menu>.el-sub-menu__title,
			.el-menu-item {
			&:hover {
			// you can use $sub-menuHover
			background-color: rgba(0, 0, 0, 0.06) !important;
			}
			}
			.nest-menu .el-sub-menu > .el-sub-menu__title,
			.el-menu-item {
			min-width: 0 !important;
			margin: 0 12px 6px;
			width: calc(100% - 24px);
			padding-left: 8px !important;
			padding-right: 8px !important;
			box-sizing: border-box;

			&:hover {
			// you can use $sub-menuHover
			background-color: var(--menu-hover) !important;
			}
			&.is-active {
			background-color: var(--menu-active-bg) !important;
			border-radius: 14px;
			}
			}

			// the scroll bar appears when the sub-menu is too long
			>.el-menu--popup {
			> .el-menu--popup {
			max-height: 100vh;
			overflow-y: auto;
			padding: 8px;
			border-radius: 18px;
			border: 1px solid var(--surface-border);
			box-shadow: var(--shadow-md);

			&::-webkit-scrollbar-track-piece {
			background: #d3dce6;
			background: #dfe7e1;
			}

			&::-webkit-scrollbar {
			@@ -229,7 +316,7 @@
			}

			&::-webkit-scrollbar-thumb {
			background: #99a9bf;
			background: #9aa79e;
			border-radius: 20px;
			}
			}