<!-- #### Sidebar script before </header> in single.php -->
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<!-- #### Sidebar script ends -->
<!-- #### Sidebar script before </div> in header-bar.php-->
<a on='tap:sidebar.toggle' class="menu-icon"><amp-img src="http://www.yourdomain.com/wp-content/uploads/2016/11/nav-icon.png" width="44" height="34" class="img-responsive" alt=""></amp-img></a>
<!-- #### Sidebar script ends -->
<!-- #### Sidebar script goes in <body> in header-bar.php -->
<amp-sidebar id='sidebar' layout="nodisplay" side="right">
<amp-img class='amp-close-image' src="http://www.yourdomain.com/wp-content/uploads/2016/11/close-black.png" width="20" height="20" alt="close sidebar" on="tap:sidebar.close" role="button" tabindex="0"></amp-img>
<ul class="top-menu">
<li><a href="http://www.yourdomain.com/">Home</a></li>
<li><a href="http://www.yourdomain.com/category/how-to-guides/">How to Guides</a></li>
<li><a href="http://www.yourdomain.com/category/i-love-my-city-2/">I Love My City</a></li>
<li><a href="http://www.yourdomain.com/category/seo/">SEO</a></li>
<li><a href="http://www.yourdomain.com/category/travel-guide/">Travel Guides</a></li>
<li><a href="http://www.yourdomain.com/category/musings/">Musings</a></li>
<li><a href="http://www.yourdomain.com/category/about/">About</a></li>
</ul>
<button class="-amp-screen-reader" tabindex="-1">Close the sidebar</button></amp-sidebar>
<!-- #### Sidebar script ends -->
/*Code to be inserted at the bottom of style.php file/*
/* AMP Sidebar */
ul.top-menu{font-size:16px;padding:20px 0 0 15px;}ul.top-menu li{font-size:16px;color:#333;text-decoration:none;font-size:18px;padding:8px 0 8px 0px;margin:0px; list-style:none;border-bottom:#CCC solid 1px;}ul.top-menu li a{color:#333;text-decoration:none;}ul.top-menu li a:hover{text-decoration:underline;}.amp-close-image{top:15px;left:225px;cursor:pointer;}amp-sidebar{width:250px;padding-right:10px;}
.menu-icon{float:right;cursor:pointer;}
/*Code ends/*
