Lightning - Toggle Search and Focus input

sample.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
  <div id="search" class="search" aura:id="search">
    <form id="search-form" role="search">
      <label for="search-query">Search:</label>
      <input type="text" id="search-query" aura:id="search-query" name="s" value="" />
      <button id="search-submit" type="submit">Search</button>
    </form>
  </div>
  <button class="mobile-button" tabindex="-1" id="search-button" aura:id="search-button" onclick="{!c.searchMenuToggle}">Search</button>
</aura:component>

sampleController.js

({
    searchMenuToggle : function(component, event, helper) {
        var toggleMenu = component.find("search");
        var toggleMenuButton = component.find("search-button");
        var toggleSearchFocus = component.find("search-query");
        $A.util.toggleClass(toggleMenu, "open");
        $A.util.toggleClass(toggleMenuButton, "open");
        component.set("v.isOpen",true);
        helper.focus(component);
    },
    searchMenuHide : function(component, event, helper) {
        var isToogle = component.get("v.isOpen");
        if(!isToogle){
            var toggleMenu = component.find("search");
            $A.util.removeClass(toggleMenu, "open");
            $A.util.removeClass(toggleMenuButton, "open");
        } else{
           component.set("v.isOpen",false);
        }
    },
})

sampleHelper.js

({
  focus : function(component) {
    var input = component.find("search-query").getElement().focus();
  }
})