$widthSidebarNav: 210px

#nav-sidebar
	position: fixed
	width: $widthSidebarNav
	height: 100%
	z-index: 500
	background-color: darken($main-color,10%)
	ul.menu
		margin: 0
		padding: 0
		list-style: none
		li.maintab
			position: relative
			> a.title
				display: block
				height: 36px
				position: relative
				padding: 0 7px
				color: mix($main-color, contrast-color($main-color, black, white, 50%), 30%)
				background-color: $main-color
				border-bottom: darken($main-color,6%) solid 1px
				font-family: $font-family-sans-serif
				font-size: 12px
				text-transform: uppercase
				text-decoration: none
				white-space: nowrap
				text-overflow: ellipsis
				@include text-shadow(rgba(black,0.3) 1px 1px 0)
				@include transition-property(background-color)
				@include transition-duration(0.4s)
				@include transition-timing-function(ease-out)
				span
					position: relative
					top: -2px
				i
					position: relative
					display: inline-block
					height: 30px
					width: 30px
					top: 3px
					margin-right: 6px
					color: mix($main-color, contrast-color($main-color, black, white, 50%), 60%)
					font-size: 28px
					line-height: 30px
					text-align: center
					@include transition-property(color)
					@include transition-duration(0.4s)
					@include transition-timing-function(ease-out)
					@include border-radius(30px)
			&.hover
				> a.title
					background-color: darken($main-color,10%)
					color: contrast-color($main-color, black, white, 50%)
					border-bottom: darken($main-color,15%) solid 1px
					@include box-shadow($brand-primary -4px 0 0 0 inset)
					i
						color: white
				ul.submenu
					position: absolute
					display: block
					width: 200px
					z-index: 600
					left: $widthSidebarNav
					top: -1px
			&.active
				a.title
					color: white
					background-color: lighten($main-color,15%)
					border: none
					i
						color: contrast-color($main-color, black, white, 50%)
				ul.submenu
					display: block
					padding: 8px 11px 8px 8px
					background-color: white
					border-right: 1px solid darken($bg-content-color,10%)
					a
						background-color: white
						color: $brand-primary
						border-bottom: solid 1px darken(white,10%)
						&:hover
							color: $brand-primary
							border-bottom: solid 1px mix(white, $brand-primary, 85%)
							background-color: mix(white, $brand-primary, 85%)
							text-decoration: none
							@include box-shadow(white 0 -1px)
					li:last-child a
						border-bottom: solid 1px white
					li.active a
						color: contrast-color($brand-primary, white, #333, 10%)
						background-color: $brand-primary
						border-bottom: solid 1px white
			ul.submenu
				display: none
				list-style: none
				padding: 6px
				background-color: darken($main-color,10%)
				li
					a
						color: mix($main-color, contrast-color($main-color, black, white, 50%), 30%)
						display: block
						padding: 4px 5px 4px 10px
						font-size: 12px
						background-color: $main-color
						border-bottom: solid 1px darken($main-color,10%)
						&:hover
							color: contrast-color($main-color, black, white, 50%)
							text-decoration: none
							background-color: darken($main-color,10%)
							@include box-shadow($brand-primary -4px 0 0 0 inset)
					&:last-child a
						border-bottom: none
	@media (max-width: $screen-phone)
		display: none

.page-sidebar
	#content
		margin-left: $widthSidebarNav

.page-sidebar-closed
	#nav-sidebar
		overflow: visible 
		width: 50px
		@include transition-property(width)
		@include transition-duration(0.4s)
		@include transition-timing-function(ease-out)
		a.title
			text-align: center
			> span
				display: none
		ul.submenu
			display: none!important
			padding-top: 37px
			position: relative
			top: 0
		> ul > li:hover
			width: 250px!important
			position: relative
			a.title
				text-align: left
				padding-left: 8px
				> span
					display: inline-block
			ul.submenu
				position: absolute!important
				display: block!important
				left: 50px!important
				top: 35px!important
				width: 200px!important
				padding: 8px!important
				background-color: darken($main-color,10%)!important
	#content
		margin-left: 55px
		@media (max-width: $screen-phone)
			margin-left: 0
		h2.page-title
			padding: 26px 0 0 120px!important
		ul.page-breadcrumb
			left: 120px!important
	.submenu_expand
		display: none

#nav-topbar
	position: fixed
	height: 28px
	top: 37px
	width: 100%
	padding: 0 40px 0 0
	z-index: 600
	background-color: white
	@include box-shadow(rgba(black,.2) 0 1px)
	ul.menu
		margin: 0
		padding: 0
		display: block
		list-style: none
		li.maintab, li.subtab
			height: 28px
			padding: 0
			margin: 0
			list-style: none
			position: relative
			float: left
			> a
				display: block
				line-height: 30px
				color: lighten($main-color,20%)
				padding: 0 6px
				margin: 0
				font-size: 12px
				i
					margin: 0
					width: 15px
					color: lighten($main-color,10%)
					background-color: transparent
					font-size: 14px
			&.active, &:hover
				background-color: $brand-primary
				> a
					text-decoration: none
					color: contrast-color($main-color, white, #333, 10%)
					i
						color: white

		li.expanded > ul.submenu
			display: block
		ul.submenu
			background-color: white
			display: none
			position: absolute
			margin: 0
			padding: 0
			left: 0
			top: 28px
			width: 200px!important
			@include box-shadow(rgba(black,0.3) 0 2px 4px)
			> li
				width: 200px
				padding: 0
				list-style: none
				> a
					display: block
					padding: 4px 5px 4px 10px
					font-size: 12px
					border-bottom: solid 1px #eee
					&:hover
						color: white
						background-color: $brand-primary
						text-decoration: none
				&.active a
					color: contrast-color($brand-primary, white, #333, 10%)
					background-color: $brand-primary
					border-bottom: solid 1px darken($brand-primary,10%)
	#ellipsistab
		display: block
		width: 40px
		height: 28px
		padding: 0
		margin: 0
		position: absolute
		right: 0
		> a
			text-align: center
			font-size: 15px
			line-height: 30px
			color: $main-color
			cursor: pointer
		ul#ellipsis_submenu
			right: 0
			left: inherit
			a.title
				padding: 0 8px
				text-align: left
			li.subtab.expanded > ul
				left: -200px
				top: 0
	.menu-collapse
		display: none

#nav-mobile
	position: fixed
	top: 0
	left: 0
	overflow: hidden
	width: 100%
	height: 38px
	z-index: 1100
	&.expanded
		height: 100%
	li > a > i
		display: inline-block
		height: 30px
		width: 30px
		font-size: 20px
		line-height: 30px
		color: white
		text-align: center
		background: black
		@include border-radius(40px)
	ul.menu
		top: 37px
		position: absolute
		display: none
		width: 480px
		height: 100%
		background-color: rgba(black,0.8)
		margin: 0 0 100px 0
		padding: 0
		border-top: 1px black solid
		list-style: none
		@include transition(all 0.35s ease-out)
		@include animate(fadeInLeft, 0.3s)
		li
			background: $main-color
			position: relative
			a
				display: block
				height: 40px
				position: relative
				padding: 2px 0 2px 10px
				border-bottom: 1px solid darken($main-color,10%)
				font-size: 12px
				line-height: 40px
				color: mix($main-color, contrast-color($main-color, white, #333, 10%), 30%)
				background-color: $main-color
				text-transform: uppercase
				text-decoration: none
				@include transition-property(background-color)
				@include transition-duration(0.4s)
				@include transition-timing-function(ease-out)
				i
					color: lighten($main-color,25%)
					background-color: darken($main-color,25%)
					@include transition-property(color)
					@include transition-duration(0.4s)
					@include transition-timing-function(ease-out)
				&:hover
					background-color: lighten($main-color,10%)
					color: white
					i
						color: white
	ul.submenu
		display: none
	#nav-mobile-submenu
		a:not(#nav-mobile-submenu-back)
			font-size: 1.2em
			padding-left: 50px
			text-transform: none
	a#nav-mobile-submenu-back
		background-color: darken($main-color,5%)
		font-size: 1.5em
	ul.menu.menu-close
		@include animate(fadeOutLeft, 0.2s)
	.menu-collapse
		color: white
		position: absolute
		width: 50px
		height: 37px
		line-height: 1.3em
		top: 0
		right: 0

.menu-collapse
	cursor: pointer
	height: 54px
	width: 100%
	font-size: 2em
	text-align: center
	line-height: 55px
	display: block
	color: darken($main-color,15%)

.mobile-nav
	#content
		h2.page-title
			padding-left: 10px!important
		ul.page-breadcrumb
			left: 10px!important

.page-topbar
	#main
		padding-top: 64px
	#content
		margin-left: 0
		.page-head
			top: 65px
		.page-title
			padding-left: 75px
		.page-breadcrumb
			left: 75px
