index.html

<a id="content-menu" class="tiny button secondary radius" href="#remote-content-menu">Show Menu</a>

<div id="remote-content-menu" style="display: none; left: 0px;">
  <ul>
    <li style="padding-left: 10px;"><i onclick="em()" id="hide-left-menu-icon" class="icon-arrow_left icon2x"></i></li>
    <li><a href="#">Sample link 1</a></li>
    <li>
        <a href="#">Sample link 2</a>
        <ul>
            <li><a href="#">Child link 1</a></li>
            <li><a href="#">Child link 2</a></li>
        </ul>
    </li>
    <li><a href="#">Sample link 3</a></li>
  </ul>
<form>
    <input type="text" placeholder="Search...">
</form>
<h2>Sample heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p></div>


<script>
function em(){
  $.sidr();
}

$(document).ready(function() {
    $("#hide-left-menu-icon").on('click',function(){
      // TODO this is not work.
      console.log('s');
      em();
    });

    $('#content-menu').sidr({
      name: 'sidr-remote-content',
      source: '#remote-content-menu',
      renaming: false
    });

});
</script>