From 51f87bb0d950f4887fc9108bbeafa5519820ecf8 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Wed, 21 Apr 2021 09:24:25 +0200
Subject: [PATCH] mobile hamburger icon update with animation<

---
 extensions/odoo_theme/layout.html       |  4 ++-
 extensions/odoo_theme/static/style.scss | 43 +++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html
index 8d8b3fdf1..ec0575e37 100644
--- a/extensions/odoo_theme/layout.html
+++ b/extensions/odoo_theme/layout.html
@@ -67,7 +67,9 @@
     <header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
         {% include "layout_templates/header.html" %}
         <button class="navbar-toggler pe-3 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_main_toctree" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
         </button>
     </header>
 {% endblock %}
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 6216422ca..d9e96f88d 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -82,6 +82,49 @@ header.o_main_header{
             @include font-size($font-size-secondary);
         }
     }
+    .navbar-toggler {
+        border: none;
+        &[aria-expanded="true"] {
+            .icon-bar {
+                &:nth-of-type(1) {
+                    @include o-transform(rotate(45deg));;
+                    @include o-transform-origin(10%, 10%)
+                }
+                &:nth-of-type(2) {
+                    opacity: 0;
+                    filter: alpha(opacity=0);
+                }
+                &:nth-of-type(3) {
+                    @include o-transform(rotate(-45deg));
+                    @include o-transform-origin(10%, 90%)
+                }
+            }
+        }
+        .icon-bar {
+            display: block;
+            width: 22px;
+            height: 2px;
+            background-color: $gray-dark;
+            @include o-transition(all, .2s);
+            &+ .icon-bar {
+                margin-top: 4px;
+            }
+            &:nth-of-type(1) {
+                @include o-transform(rotate(0));
+            }
+            &:nth-of-type(2) {
+                opacity: 1;
+                filter: alpha(opacity=100);
+            }
+            &:nth-of-type(3) {
+                @include o-transform(rotate(0));
+            }
+        }
+        &:focus {
+            box-shadow: none;
+            outline:none;
+        }
+    }
 }
 
 .o_logo img {