File: public/flat-admin/sass/structure/sidebar.scss

.sidebar-right{
	#left{
		left:auto;
		right:0;

		.subnav{
			.dropdown-submenu{
				&>a{
					&:after{
						display: block;
						float: left;
						width: 0;
						height: 0;
						margin-top: 5px;
						margin-left:-9px;
						border-color: rgba(0, 0, 0, 0);
						border-right-color: #aaa;
						border-style: solid;
						border-width: 5px 5px 5px 0;
						content: " ";
					}
				}
			}
			.subnav-menu{
				&>li.dropdown{
					&>a{
						&:after{
							position: absolute;
							left:5px;
							top:10px;
							width: 5px;
							border-color: rgba(0, 0, 0, 0);
							border-right-color: #999;
							border-style: solid;
							border-width: 5px 5px 5px 0;
							content: " ";
						}
					}

					&.open{
						.dropdown-menu{
							left:auto;
							right:100%;
						}

						&>.dropdown-menu{
							border-right:0;
							border-left:2px solid #aaa;
						}
					}
				}
			}
		}
	}
	#main{
		margin-left:0;
		margin-right:200px;
	}
}

#left{
	width:200px;
	position: absolute;
	left:0;
	bottom:0;
	background: #eee;
	height:100%;
	overflow-x:visible;

	&.mobile-show{
		position: fixed;
		z-index:1000;
	}

	&.full{
		bottom:auto;
		height:auto;
	}

	&.sidebar-fixed{
		position: fixed;
		top:40px;
		overflow-x:hidden;

		.ui-resizable-handle{
			right:0;
		}
	}

	.subnav{
		margin-top: 15px;

		&:hover{
			.subnav-title{
				.toggle-subnav{
					i{
						display: block;
					}
				}
			}
		}

		.subnav-content{
			@include pie-clearfix;
			padding:10px 20px;

			&.less{
				padding:10px 13px;
			}
		}

		.subnav-title{
			@include pie-clearfix;
			text-overflow:ellipsis;
			white-space:nowrap;

			span{
				margin-left:20px;
				font-size:18px;
				text-overflow:ellipsis;
				white-space:nowrap;
			}

			.toggle-subnav{
				color:#444;
				padding:1px 6px;
				text-decoration: none;
				display:block;
				position: relative;
				text-overflow:ellipsis;
				white-space:nowrap;
				overflow:hidden;

				i{
					position: absolute;
					font-size:14px;
					left:10px;
					top:4px;
					display: none;
				}

				&:hover{
					color:#222;
				}
			}

		}

		.subnav-menu{
			list-style-type: none;
			margin: 5px 0;
			padding: 0;

			&>li{
				text-overflow:ellipsis;
				white-space:nowrap;

				&.dropdown{
					&>a{
						position: relative;

						&:after{
							position: absolute;
							right:5px;
							top:10px;
							width: 5px;
							border-color: rgba(0, 0, 0, 0);
							border-left-color: #999;
							border-style: solid;
							border-width: 5px 0 5px 5px;
							content: " ";
						}
					}

					&.open{
						&>a{
							background: #ccc;
							color:#333;
						}

						.dropdown-menu{
							left:100%;
							top:0;
							border-color:#aaa;
							border-left:0;
							margin: 0;

							.dropdown-submenu{
								.dropdown-menu{
									border-left:2px solid #999;
								}

								&:hover,&:focus{
									&>a{
										background: #ccc;
										color:#333;

										&:after{
											border-left-color: #999;
										}
									}
								}
							}
						}
					}
				}

				&>a{
					color:#555;
					display:block;
					padding:5px 0 5px 27px;
					text-decoration: none;
					white-space:nowrap;
					text-overflow:ellipsis;
					overflow:hidden;

					&:hover{
						background:#ddd;
						color:#222;
					}
				}
				&.active{
					&>a{
						background: #ccc;
						color:#222;
						font-weight:bold;
					}
				}
			}
		}
	}
}