Fix glitch: Hamburger toggle missing a bar (#159)

Minor fix animation glitch.
RocketChat · May 26, 2022 · 6dd0812 · 6dd0812
1 parent d5b01dd
commit 6dd0812
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 21 deletions.
diff --git a/app/components/menubar.js b/app/components/menubar.js
@@ -49,14 +49,9 @@ export default function Menubar(props) {
           >
             <span
               className={`${styles.toggler_icon} ${
-                collapsed ? styles.top_bar_collapsed : styles.top_bar
+                collapsed ? styles.toggler_bar_collapsed : styles.toggler_bar
               }`}
-            ></span>
-            <span
-              className={`${styles.toggler_icon} ${
-                collapsed ? styles.bottom_bar_collapsed : styles.bottom_bar
-              }`}
-            ></span>
+            />
           </button>
         </Navbar.Toggle>
         <Navbar.Collapse id='basic-navbar-nav'>

diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css
@@ -69,34 +69,51 @@
   width: 100%;
   background: rgb(107, 107, 107);
   border-radius: 1px;
-  opacity: 1;
   left: 0;
-  transform: rotate(0deg);
-  transition: 0.25s ease-in-out;
+  top: 18px;
 }
 
-/* when navigation is clicked */
-.top_bar {
-  margin-top: 0px;
-  transform: rotate(-135deg);
+.toggler_icon::before, .toggler_icon::after{
+  content: '';
+  position: absolute;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  background-color: rgb(107, 107, 107);
+  transition: top 0.25s;
+}
+
+.toggler_icon::after {
+  top: 10px;
+}
+
+.toggler_icon::before{
+  top: -10px;
 }
 
-.bottom_bar {
+/* when navigation is clicked */
+.toggler_bar {
   margin-top: 0px;
-  transform: rotate(-45deg);
+  background-color: transparent;
 }
 
 /* state when the navbar is collapsed or collapsed==true */
-.top_bar_collapsed {
+.toggler_bar_collapsed {
   margin-top: -10px;
-  transform: rotate(0deg);
 }
 
-.bottom_bar_collapsed {
-  margin-top: 10px;
-  transform: rotate(0deg);
+.toggler_bar::after{
+  transform: rotate(-45deg);
+  top: 0;
 }
 
+.toggler_bar::before{
+  transform: rotate(45deg);
+  top: 0
+}
+
+
 .threedots:after {
   content: "\2807";
   font-size: 30px;