ptut-vhost/webpack/scss/menu.scss

$menu-bg: #303030;
$menu-width: 3em;
$menu-outer-width: #{$menu-width + 1em};

#side-menu{

	/* (1) Container
	---------------------------------------------------------*/
	display: flex;
	position: absolute;
		top: 0;
		left: 0;
		width: $menu-outer-width;
		height: 100%;

	background-color: $menu-bg;

	// flex properties
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	/* (2) Items
	---------------------------------------------------------*/
	.item{
		display: block;
		width: $menu-width;
		height: $menu-width;

		border-radius: 3px / 3px;

		box-shadow: inset 0 0 0 transparent;

		background: center center no-repeat;
		background-size: 50%;

		border: 1px solid lighten($menu-bg, 5%);

		transition: all .2s ease-in-out;

		cursor: pointer;

		/* (1) Set icons */
		&[data-icon='home']{   background-image: url('/asset/svg/home.svg@7992a3');   }
		&[data-icon='manage']{ background-image: url('/asset/svg/manage.svg@7992a3'); }
		&[data-icon='fiche']{  background-image: url('/asset/svg/fiche.svg@7992a3');  }
		&[data-icon='login']{  background-image: url('/asset/svg/login.svg@7992a3');  }
		&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@7992a3'); }

		/* (2) On hover */
		&:hover, &.active{
			border: 1px solid lighten($menu-bg, 20%);
			// box-shadow: inset 0 0 5px darken($menu-bg, 6%);
			box-shadow: 0 0 8px darken($menu-bg, 7%);
		}

		color: #4a71dd;

		&[data-icon='home']:hover,   &[data-icon='home'].active{   background-image: url('/asset/svg/home.svg@10d197');   }
		&[data-icon='manage']:hover, &[data-icon='manage'].active{ background-image: url('/asset/svg/manage.svg@da5645'); }
		&[data-icon='fiche']:hover,  &[data-icon='fiche'].active{  background-image: url('/asset/svg/fiche.svg@4a71dd');  }
		&[data-icon='login']:hover,  &[data-icon='login'].active{  background-image: url('/asset/svg/login.svg@dab245');  }
		&[data-icon='logout']:hover, &[data-icon='logout'].active{ background-image: url('/asset/svg/logout.svg@dab245'); }

		/* (3) Label */
		span{

			// display: none;
			display: block;
			position: absolute;
				margin-top: #{$menu-width / 5};
				left: calc( -100% + .5em );
				opacity: 0;

			padding: .3em .7em;

			background-color: $menu-bg;

			color: #fff;

			border-radius: 3px / 3px;

			transition: all .2s ease-in-out;

			z-index: -1;
		}

		/* (4) Display label on item hover */
		&:hover span{
			left: calc( 100% + .5em );
			opacity: 1;
		}

	}

}