<nav class="menu" tabindex="0">
	<div class="smartphone-menu-trigger"></div>
  <header class="avatar">
		<img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" />
    <h2>John D.</h2>
  </header>
	<ul>
    <li tabindex="0" class="icon-dashboard"><span>Dashboard</span></li>
    <li tabindex="0" class="icon-customers"><span>Customers</span></li>
    <li tabindex="0" class="icon-users"><span>Users</span></li>
    <li tabindex="0" class="icon-settings"><span>Settings</span></li>
  </ul>
</nav>

<main>
  <div class="helper">
    RESIZE THE WINDOW
		<span>Breakpoints on 900px and 400px</span>
  </div>
</main>

@color-1st: #ffea92;
@color-2nd: #5bc995;

@menu-width-desktop: 240px;
@menu-width-tablet: 90px;
@menu-width-smartphone: 230px;

@icon-url-base: "http://www.entypo.com/images/";
@icon-url-dashboard: "@{icon-url-base}/gauge.svg";
@icon-url-customers: "@{icon-url-base}/briefcase.svg";
@icon-url-users: "@{icon-url-base}/users.svg";
@icon-url-settings: "@{icon-url-base}/tools.svg";

body{
	background:@color-1st;
	margin:0;
	font-family:"Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
	color:#fff;
	padding-left:@menu-width-desktop;
}

main{
	position:relative;
	height:100vh;
	
	.helper{
		background:rgba(0,0,0,0.2);
		color:@color-1st;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate3d(-50%,-50%,0);
		padding:1.2em 2em;
		text-align:center;
		border-radius:20px;
		font-size:2em;
		font-weight:bold;
		
		span{
			color:rgba(0,0,0,0.2);
			font-size:0.4em;
			display:block;
		}
	}
}

.menu{
	background:@color-2nd;
	height:100vh;
	width:@menu-width-desktop;
	position:fixed;
	top:0;
	left:0;
	z-index:5;
	outline:none;
	
	.avatar{
		background:rgba(0,0,0,0.1);
		padding:2em 0.5em;
		text-align:center;
		
		img{
			width:100px;
			border-radius:50%;
			overflow:hidden;
			border:4px solid @color-1st;
			box-shadow:0 0 0 4px rgba(255,255,255,0.2);
		}
		
		h2{
			font-weight:normal;
			margin-bottom:0;
		}
	}
	
	ul{
		list-style:none;
		padding:0.5em 0;
		margin:0;
		
		li{
			padding:0.5em 1em 0.5em 3em;
			font-size:0.95em;
			font-weight:regular;
			background-repeat:no-repeat;
			background-position:left 15px center;
			background-size:auto 20px;
			transition:all 0.15s linear;
			cursor:pointer;
			
			&.icon-dashboard{
				background-image:url(@icon-url-dashboard);
			}
			&.icon-customers{
				background-image:url(@icon-url-customers);
			}
			&.icon-users{
				background-image:url(@icon-url-users);
			}
			&.icon-settings{
				background-image:url(@icon-url-settings);
			}
			
			&:hover{
				background-color:rgba(0,0,0,0.1);
			}
			
			&:focus{
				outline:none;
			}
			
		}
	}
}

@media screen and (max-width:900px) and (min-width:400px){
	body{
		padding-left:@menu-width-tablet;
	}
	.menu{
		width:@menu-width-tablet;
		
		.avatar{
			padding:0.5em;
			position:relative;
			img{
				width:@menu-width-tablet - 30px;
			}
			
			h2{
				opacity:0;
				position:absolute;
				top:50%;
				left:@menu-width-tablet + 10px;
				margin:0;
				min-width:200px;
				border-radius:4px;
				background:rgba(0,0,0,0.4);
				transform:translate3d(-20px,-50%,0);
				transition:all 0.15s ease-in-out;
			}
			
			&:hover{
				h2{
					opacity:1;
					transform:translate3d(0px,-50%,0);
				}
			}
		}
		
		ul{
			li{
				height:@menu-width-tablet/1.5;
				background-position:center center;
				background-size:30px auto;
				position:relative;

				span{
					//display:none;
					opacity:0;
					position:absolute;
					background:rgba(0,0,0,0.5);
					padding:0.2em 0.5em;
					border-radius:4px;
					top:50%;
					left:@menu-width-tablet - 10px;
					transform:translate3d(-15px,-50%, 0);
					transition:all 0.15s ease-in-out;
					
					&:before{
						content:'';
						width:0;
						height:0;
						position:absolute;
						top:50%;
						left:-5px;
						border-top:5px solid transparent;
						border-bottom:5px solid transparent;
						border-right:5px solid rgba(0,0,0,0.5);
						transform:translateY(-50%);
					}
				}
				
				&:hover{
					span{
						opacity:1;
						transform:translate3d(0px,-50%, 0);
					}
				}
			}
		}
	}
}

@media screen and (max-width:400px){
	body{
		padding-left:0;
	}
	
	.menu{
		width:@menu-width-smartphone;
		box-shadow:0 0 0 100em rgba(0,0,0,0);
		transform:translate3d(-@menu-width-smartphone,0,0);
		transition:all 0.3s ease-in-out;
		
		.smartphone-menu-trigger{
			width:40px;
			height:40px;
			position:absolute;
			left:100%;
			background:@color-2nd;
			
			&:before, &:after{
				content:'';
				width:50%;
				height:2px;
				background:#fff;
				border-radius:10px;
				position:absolute;
				top:45%;
				left:50%;
				transform:translate3d(-50%, -50%, 0);
			}
			
			&:after{
				top:55%;
				transform:translate3d(-50%, -50%, 0);
			}
		}
		
		ul{
			
			li{
				padding:1em 1em 1em 3em;
				font-size:1.2em;
			}
		}
		
		&:focus{
			transform:translate3d(0,0,0);
			box-shadow:0 0 0 100em rgba(0,0,0,0.6);
			
			.smartphone-menu-trigger{
				pointer-events:none;
			}
		}
	}
}

/* No JS ;)
 *
 * Icons from entypo.com
 * Avatar from uifaces.com
 */