Good off-canvas

dom.php

<div class="smart-off-canvas smart-off-canvas-right">

		<div class="smart-off-canvas-trigger">
			<img src="triggericon.png" alt="<?php _e('Open the menu', 'off-canvas'); ?>">
		</div>

		<div class="smart-off-canvas-inner">
			<?php  
			wp_nav_menu( array('theme_location' => 'primary' );
			?>
		</div>

	</div>

javascript.js

$('.smart-off-canvas-trigger').on( 'click', function() {
	$('.smart-off-canvas').toggleClass('smart-off-canvas-opened');
});

styles.scss

.smart-off-canvas {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 240px;
	padding: 24px 15px;
	z-index: 9999;
	background: #fff;
	-webkit-transition-property: right left;
	-moz-transition-property: right left;
	transition-property: right left;
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s;
	&.smart-off-canvas-right {
		right: -240px;
		&.smart-off-canvas-opened {
			right: 0;
		}
		.smart-off-canvas-trigger {
			margin-left: -40px;
			left: 0;
		}
	}
	&.smart-off-canvas-left {
		left: -240px;
		&.smart-off-canvas-opened {
			left: 0;
		}
		.smart-off-canvas-trigger {
			margin-right: -40px;
			right: 0;
		}
	}
	.smart-off-canvas-trigger {
		img {
			max-width: 25px;
			width: 100%;
		}
		width: 40px;
		background: #fff;
		padding: 10px;
		text-align: center;
		cursor: pointer;
		position: absolute;
	} 
	.smart-off-canvas-inner {
		overflow: hidden;
		.smart-off-canvas-site-title {
			font-size: 18px;
			font-weight: bold;
			margin: 0;
			padding: 0;
			color: #fff;
		}
		.smart-off-canvas-container {
			.smart-off-canvas-site-menu {
				list-style-type: none;
				margin: 0;
				li {
					margin: 0;
					a {
						color: #fff;
						text-decoration: underline;
						&:hover {
							text-decoration: none;
						}
					}
					ul {
						margin-left: 15px;
					}
				}
			}
		}
	}
	&.smart-off-canvas-disabled {
		display: none;
	}
}