ptut-vhost/webpack/scss/menu.scss

@import 'constants';


@keyframes menu-label{
	0%{ display: none; opacity: 0; left: 0; transform: translateX(-100%) translateY(-50%); }
	1%{ display: block; }
	80%{ opacity: 0; }
	100%{ opacity: 1; left: calc( 100% + 1em ); transform: translateX(0) translateY(-50%); }
}

#side-menu{

	/* (1) Container
	---------------------------------------------------------*/
	display: flex;
	position: fixed;
		top: $header-height;
		left: 0;
		width: calc( #{$menu-width} - 1px );
		height: calc( 100% - #{$header-height} );

	background-color: $menu-bg;
	border-right: 1px solid #e3e7eb;

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

	z-index: 101;

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

		margin: .5em;

		background: $menu-bg center center no-repeat;
		background-size: auto 50%;


		transition: background-position .1s ease-in-out;

		cursor: pointer;

		z-index: 1;

		/* (1) Set icons */
		&[data-icon='home']{     background-image: url('/asset/svg/home.svg@#{$menu-item-inactive}');     }
		&[data-icon='teacher']{  background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');  }
		&[data-icon='ue']{       background-image: url('/asset/svg/ue.svg@#{$menu-item-inactive}');       }
		&[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@#{$menu-item-inactive}'); }
		&[data-icon='fiche']{    background-image: url('/asset/svg/fiche.svg@#{$menu-item-inactive}');    }
		&[data-icon='login']{    background-image: url('/asset/svg/login.svg@#{$menu-item-inactive}');    }
		&[data-icon='logout']{   background-image: url('/asset/svg/logout.svg@#{$menu-item-inactive}');   }


		&[data-icon='home']:hover,     &[data-icon='home'].active{     background-image: url('/asset/svg/home.svg@10d197');     }
		&[data-icon='teacher']:hover,  &[data-icon='teacher'].active{  background-image: url('/asset/svg/teacher.svg@edb910');  }
		&[data-icon='ue']:hover,       &[data-icon='ue'].active{       background-image: url('/asset/svg/ue.svg@1fc9ef');       }
		&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@dab245'); }
		&[data-icon='fiche']:hover,    &[data-icon='fiche'].active{    background-image: url('/asset/svg/fiche.svg@ea4C3a');    }
		&[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');   }

		/* (2) Label */
		&:after{

			content: attr(data-label);

			display: none;
			position: absolute;
				top: 50%;
				left: 0;
				opacity: 0;

			padding: .3em .7em;

			background-color: #333;
			border: 1px solid #222;

			color: #ccc;

			border-radius: 3px / 3px;

			transform: translateX(-100%) translateY(-50%);

			// 1 line only
			white-space: nowrap;
			overflow: hidden;

			z-index: -1;
		}

		/* (3) Display label on item hover */
		&:hover:after{
			display: block;
			left: calc( 100% + 1em );
			opacity: 1;
			transform: translateX(0) translateY(-50%);
			animation: menu-label .2s ease-in-out 0s;
		}

	}

}