From f7422a96071d9e2f8905aa418790f731cccd45a7 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 8 Jun 2017 16:30:33 +0300
Subject: [PATCH] fix(aio): animate hamburger in/out

Fixes #17215
---
 aio/src/app/app.component.html           |  2 +-
 aio/src/styles/1-layouts/_top-menu.scss  |  4 +---
 aio/src/styles/2-modules/_hamburger.scss | 15 ++++++++++-----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 4df413b49d..e929dfac86 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -5,7 +5,7 @@
 </div>
 
 <md-toolbar color="primary" class="app-toolbar">
-  <button class="hamburger" md-button
+  <button class="hamburger" [class.starting]="isStarting" md-button
     (click)="sidenav.toggle()" title="Docs menu">
     <md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
   </button>
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index d40c20d730..1151dd0db5 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -86,10 +86,8 @@ aio-shell.page-resources md-toolbar.mat-toolbar {
   }
 
   @media (min-width: 992px) {
-    padding-left: 24px;
-
     button.hamburger {
-      display: none;
+      margin: 0 24px 0 -88px;
     }
   }
 }
diff --git a/aio/src/styles/2-modules/_hamburger.scss b/aio/src/styles/2-modules/_hamburger.scss
index a628062f7b..780cd26558 100644
--- a/aio/src/styles/2-modules/_hamburger.scss
+++ b/aio/src/styles/2-modules/_hamburger.scss
@@ -8,14 +8,19 @@
 }
 
 .hamburger.mat-button {
-    transition: color 0.2s;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  &:not(.starting) {
+    transition-duration: .4s;
+    transition-property: color, margin;
+    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
+  }
 }
 
 .hamburger.mat-button:hover {
-    color: $offwhite;
+  color: $offwhite;
 }
 
 .hamburger .mat-icon {