.nav-sub{
	opacity: 0;
	height: 0;
	overflow: hidden;
	margin-left: -20px;
	.transition(all .2s ease-in-out 0s);

  .active &,
  .app-aside-folded li:hover &,
  .app-aside-folded li:focus &,
  .app-aside-folded li:active &{
  	opacity: 1;
		margin-left: 0;
		height: auto !important;
		overflow: auto;
  }
}

.nav-sub-header {
	display: none !important;
	a{
		padding: floor((@app-aside-folded-nav-height - @line-height-computed)/2) 20px;
	}
}

.navi {
	ul.nav {
		li {
			display: block;
			position: relative;
			li {
				a {
					padding-left: @app-aside-nav-height + 15px;
				}
			}
			a {
				font-weight: normal;
				text-transform: none;
				display: block;
				padding: floor((@app-aside-nav-height - @line-height-computed)/2) 20px;
				position: relative;
				.transition(background-color .2s ease-in-out 0s);
				.badge,
				.label {
					font-size: 11px;
					padding: 2px 5px;
					margin-top: 2px;
				}
				> i {
					margin: floor(-(@app-aside-nav-height - @line-height-computed)/2) -10px;
					line-height: @app-aside-nav-height;
					width: @app-aside-nav-height;
					float: left;
					margin-right: 5px;
					text-align: center;
					position: relative;
					overflow: hidden;
					&:before {
						position: relative;
						z-index: 2;
					}
				}
			}
		}
	}
}

@media (min-width: 768px) {
	.app-aside-folded{
		.nav-sub-header{
			display: block !important;
			a{
				padding: floor((@app-aside-folded-nav-height - @line-height-computed)/2) 20px !important;
			}
		}
		.navi{
			> ul {
				> li {
					> a {
						position: relative;
						padding: 0;
						text-align: center;
						height: @app-aside-folded-nav-height;
						border: none;
						span {
							display: none;
							&.pull-right{
								display: none !important;
							}
						}
						i{
							width: auto;
							float: none;
							display: block;
							font-size: 16px;
							margin: 0;
							line-height: @app-aside-folded-nav-height;
							border: none !important;
							b{
								left: 0 !important;
							}
						}
						.badge,
						.label{
							position: absolute;
							right: 12px;
							top: 8px;
							z-index: 3;
						}
					}
				}
				ul{
					height: 0 !important;
					position: absolute;
					left: 100%;
					top: 0 !important;
					z-index: 1050;
					width: @app-aside-width;
					.box-shadow(0 2px 6px rgba(0,0,0,0.1));
				}
			}
			li {
				li{
					a{
						padding-left: 20px !important;
					}
				}
			}
		}
	}

	.app-aside-folded.app-aside-fixed .app-aside{
		> ul.nav {
			&:before{
				content:"";
				width: @app-aside-folded-width;
				height: @app-aside-folded-nav-height;
				position: absolute;
				left: -@app-aside-folded-width;
				top: 0;
			}
			z-index: 1010;
			opacity: 1;
			height: auto;
			overflow: visible;
			overflow-y: auto;
			display: block;
			width: @app-aside-width + @app-aside-folded-width;
			left: @app-aside-folded-width + 20;
			position: fixed;
			-webkit-overflow-scrolling: touch;
			a{
				padding-left:  20px !important;
				padding-right: 20px !important;
			}
		}
	}
}