swipe slider menu right side

HTML

<div class="ssm-overlay ssm-toggle-nav"></div>
        <nav class="nav">
            <img src="img/swipe.png" alt="swipe image" />
            <p>Slide and Swipe Menu demo</p>
        </nav>
        <main>
            <a href="#" class="ssm-toggle-nav" title="open nav"><img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Home_font_awesome.svg/2000px-Home_font_awesome.svg.png" width="50" height="50"> </a>
        </main>

CSS

/*--style css start below--*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

ul * {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

html, 
body {
    height: 100%;
}

body {
    background-color: #f1f1f1;
    font-family: 'Open Sans';
    color: #333;
    margin: 0;
    padding: 50px 15px;
    text-align: center;
}

a {
    color: #0A4A3C;
}

h1 {
    font-weight: normal;
    font-size: 50px;
}

nav.nav {
    color: #fff;
}
/*--style css start above--*/
/**
 * Sliding swipe menu CSS
 */
nav {
    height: 100%;
    width: 280px;
    background-color: #0a4a3c;
    left: 0;
    top: 0;
    z-index: 2;
    position: fixed;
    overflow-y: auto;
    overflow-x: visible;
    transform: translate(-280px,0);
}
.ssm-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.2);
    display: none;
    z-index: 1;
}
/*---swipe slider css start below--*/

/*---swipe slider css start above--*/