Adding a button menu, JS needed.

Author: Caio Tarifa

app/assets/stylesheets/formadmin/atoms/_menu-button.scss

@@ -39,7 +39,6 @@
     }
   }
 
-
   @at-root .opened-menu & {
     i {
       background-color: transparent;

app/assets/stylesheets/formadmin/layouts/_header.scss

@@ -1,7 +1,8 @@
 .header {
+  align-items: center;
   background-color: rgba($primary-color, 0.95);
   backdrop-filter: blur(3px);
-  display: table;
+  display: flex;
   color: $white;
   height: 50px;
   position: fixed;
@@ -12,11 +13,9 @@
   z-index: 10;
 
   .site_title {
-    display: table-cell;
     font-weight: bold;
     margin: 0 20px 0 0;
     padding: 0 30px;
-    vertical-align: middle;
   }
 
   #site_title_image {
@@ -25,9 +24,6 @@
   }
 
   .header-item {
-    display: table-cell;
-    vertical-align: middle;
-
     &,
     ul {
       margin: 0;
@@ -145,7 +141,6 @@
 
   #utility_nav {
     color: $silver;
-    display: table-cell;
     margin: 0;
     padding: 0 20px 0 0;
     text-align: right;
@@ -171,31 +166,59 @@
 
   // Medias
   @media #{$largest-phone-screen} {
-    .site_title {
-      padding: 0 15px;
-    }
-
     #tabs,
     #utility_nav {
       display: none;
       left: 0;
       position: absolute;
+      right: 0;
       top: 50px;
-      width: 100%;
+    }
+
+    .site_title {
+      padding: 0 15px;
     }
 
     .menu-button {
       display: block;
-      position: relative;
-      right: -23px;
-      top: 13px;
+      margin-left: auto;
+      margin-right: 15px;
+      margin-top: -5px;
     }
 
-    .opened-menu & {
+    @at-root .opened-menu & {
       #tabs,
       #utility_nav {
         display: block;
       }
     }
+
+    // display: block;
+    // .site_title {
+    //   padding: 0 15px;
+    // }
+    //
+    // #tabs,
+    // #utility_nav {
+    //   display: none;
+    //   left: 0;
+    //   position: absolute;
+    //   top: 50px;
+    //   width: 100%;
+    // }
+    //
+    // .menu-button {
+    //   float: left;
+    //   margin-right: 15px;
+    //   position: relative;
+    //   top: 13px;
+    // }
+    //
+    // .opened-menu & {
+    //   #tabs,
+    //   #utility_nav {
+    //     display: block;
+    //   }
+    // }
   }
 }