angular-hamburger-helper

what is angular-hamburger-helper?

angular-hamburger-helper is a directive written in angular that provides a "hamburger" icon commonly used to denote a menu icon. In some application states if the menu is not available you will want this to be replaced with a back arrow.

live demo

click the icon to see the transformation

This is all achieved with the snippet of code:

<a ng-click="arrow = !arrow" ng-init='arrow = false'>
  <ng-hamburger-helper arrow-when="arrow"></ng-hamburger-helper>
</a>

This should look like:

um why?

this transition was inspired by the delightful details section of google's material-design specification.

oh ok

how do i use it?

install the module using bower at the command line:
```
bower install infomofo/angular-hamburger-helper
```

include the css file in your html file:

<link rel="stylesheet" href="bower_components/angular-hamburger-helper/ng-hamburger-helper.css"/>

include the javascript file in your html file:

<script type='text/javascript' src='bower_components/angular-hamburger-helper/ng-hamburger-helper.js'></script>

include the hamburger helper service in your angular module config:
```
var app = angular.module('YourApp',['hamburger-helper']);
```
use the directive in your html file. the directive appears as a 44x44 hamburger icon, when "variable" evaluates to true it will rotate and transform into a backwards arrow.
```
<ng-hamburger-helper></ng-hamburger-helper>
```
use the hamburgerHelper service to toggle the state of the button:

but i want it to be pink or bigger or something

you can style the icon with some css:

.hamburger-helper {     
  /* modifying the height or width will also require modifying the font-size to ensure that the arrow head still lines up */
  height: 44px;
  font-size: 22px;
    width: 44px;
  /* this affects the speed of the rotation */
    transition: transform 0.3s; 
}

.hamburger-helper span {
  /* the height of the hamburger bars and width of the arrow */
    height: 0.3em; 
}

.hamburger-helper span,
.hamburger-helper span:after,
.hamburger-helper span:before {
  /* the color of the hamburger and arrow */
    background-color: #fff;
}

.hamburger-helper span:after,
.hamber-helper span:before {
  /* this affects the speed that the hamburger buns are transformed into the arrow */
  transition: transform 0.3s;
}