<style>
/* nav */
.hamburger-menu_<%- uid %> {
  position: absolute;
}
.silex-editor .hamburger-menu_<%- uid %> nav {
  left: -9999px;
}
.hamburger-menu_<%- uid %> nav ul {
  margin-top: 80px;
}
.hamburger-menu_<%- uid %> nav {
  opacity: 0; /* avoid flicker at start */
  position: absolute;
  background-color: <%- locals['background-color'] %>;
  transition: left 1s ease, height 0s ease 1s;
  left: -300px;
  width: 300px;
  height: 20px
}
.hamburger-menu_<%- uid %>.open nav {
  opacity: 1;
  height: 100vh;
  left: 0;
  transition: left 1s ease, height 0s ease 0s;
}

.hamburger-menu_<%- uid %> .nav-container {
  z-index: 10;
  position: absolute;
}
.hamburger-menu_<%- uid %>.open .nav-container {
}

/* hamburger button */
.hamburger-menu_<%- uid %> .hamburger-btn {
    z-index: 20;
    cursor: pointer;
    position: absolute;
}
.hamburger-menu_<%- uid %> .hamburger-btn span {
    display: block;
    width: 30px;
    height: 5px;
    margin-bottom: 3px;
    position: relative;
    background-color: <%- locals['button-background-color'] %>;
    border: 1px solid <%- locals['button-border-color'] %>;
    border-radius: 3px;
    transition: border-color 0.1s ease-in,
      opacity 0.1s ease-in,
      transform 0.1s ease-in,
      background 0.1s ease-in
}

.hamburger-menu_<%- uid %>.open .hamburger-btn span {
    border-color: rgba(255, 255, 255, 0);
}

.hamburger-menu_<%- uid %> .hamburger-btn span:first-child {
    transform-origin: 4px -2px;
}
.hamburger-menu_<%- uid %>.open .hamburger-btn span:first-child {
    transform: rotate(45deg) translate(7px, -4px);
}

.hamburger-menu_<%- uid %>.open .hamburger-btn span:nth-last-child(2) {
    opacity: 0;
}

.hamburger-menu_<%- uid %> .hamburger-btn span:nth-child(3) {
    transform-origin: -11px 4px;
}
.hamburger-menu_<%- uid %>.open .hamburger-btn span:nth-child(3) {
    transform: rotate(-45deg) translate(0, 12px);
}

</style>
<!-- inspired by https://codepen.io/erikterwan/pen/EVzeRP -->
<div class="hamburger-menu_<%- uid %> closed">
    <div class="hamburger-btn <% if(fixed) { %>fixed<% } %>">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="nav-container">
      <div class="prevent-scale">
        <nav role="navigation" class="">
            <ul>
            <% for(var idx in links) { %>
                <li><a
                    <% for(var attrName in links[idx].properties) { %>
                        <%- attrName %>="<%- links[idx].properties[attrName] %>"
                    <% } %>
                ><%- links[idx].text %></a></li>
            <% } %>
            </ul>
        </nav>
      </div>
  </div>
</div>
<script>
(function() {
  var isOpen = false;
  function close() {
    isOpen = false;
    $('.hamburger-menu_<%- uid %>').removeClass('open');
    $('.hamburger-menu_<%- uid %>').addClass('closed');
  }
  function open() {
    isOpen = true;
    $('.hamburger-menu_<%- uid %>').addClass('open');
    $('.hamburger-menu_<%- uid %>').removeClass('closed');
  }
  function toggle() {
    if(isOpen) close();
    else open();
  }
  var silexElement = $('.hamburger-menu_<%- uid %>').closest('.editable-style');
  function move(data) {
    var offset = silexElement.offset();
    $('.hamburger-menu_<%- uid %> .nav-container').css({
      'transform': 'translate(' + (data.scrollLeft - (offset.left/data.scale)) + 'px, ' + (data.scrollTop - (offset.top/data.scale)) + 'px)'
    });
  }
  $('.hamburger-menu_<%- uid %> .hamburger-btn').click(function() { toggle(); });
  $(document).on('silex.scroll silex.resize', function(e, data) {
    close();
    move(data);
  });
  close();
})();
</script>
