added navbar toggle animation

app/assets/stylesheets/scss/navbar.scss

@@ -7,3 +7,61 @@
   padding: 3px 6px 3px;
   background-color: $navbar-inverse-bg;
 }
+
+.navbar--inbox-animation {
+  animation: animationFrames ease-in-out 1.5s;
+  animation-iteration-count: infinite;
+  -webkit-animation: animationFrames ease-in-out 1.5s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation: animationFrames ease-in-out 1.5s;
+  -moz-animation-iteration-count: infinite;
+  -o-animation: animationFrames ease-in-out 1.5s;
+  -o-animation-iteration-count: infinite;
+  -ms-animation: animationFrames ease-in-out 1.5s;
+  -ms-animation-iteration-count: infinite;
+}
+
+@keyframes animationFrames{
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-moz-keyframes animationFrames{
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-webkit-keyframes animationFrames {
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-o-keyframes animationFrames {
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}
+
+@-ms-keyframes animationFrames {
+  0% {
+    background-color: #fff;
+  }
+  100% {
+    background-color: $navbar-inverse-toggle-border-color;
+  }
+}

app/views/layouts/_header.html.haml

@@ -3,6 +3,11 @@
     .navbar-header
       %button.navbar-toggle{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
         %span.sr-only Toggle navigation
+        - if inbox_count > 0
+          %span.icon-bar.navbar--inbox-animation
+          %span.icon-bar.navbar--inbox-animation
+          %span.icon-bar.navbar--inbox-animation
+        - else
           %span.icon-bar
           %span.icon-bar
           %span.icon-bar