v1.8.1 - Animação no hamburguer do menu flutuante.

rcarlos-ig · Apr 14, 2022 · 41c547a · 41c547a
1 parent 7c2b780
commit 41c547a
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "igai",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

diff --git a/public/css/styles.min.css b/public/css/styles.min.css
diff --git a/tailwind.css b/tailwind.css
@@ -576,6 +576,38 @@ img {
 .hamburger {
   width: 32px;
   height: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.hamburger-line {
+  width: 32px;
+  height: 3px;
+  background-color: rgb(var(--light));
+  border-radius: 4px;
+  transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
+}
+
+.hamburger-line:nth-child(1) {
+  transform: translateY(-7px);
+}
+
+.hamburger-line:nth-child(3) {
+  transform: translateY(7px);
+}
+
+#menu-open:checked + .menu-open-button .hamburger-line:nth-child(1) {
+  transform: translateY(3px) rotate(45deg);
+}
+
+#menu-open:checked + .menu-open-button .hamburger-line:nth-child(2) {
+  opacity: 0;
+}
+
+#menu-open:checked + .menu-open-button .hamburger-line:nth-child(3) {
+  transform: translateY(-3px) rotate(-45deg);
 }
 
 .menu-item-1 {

diff --git a/views/partials/logoutButtonAdmin.ejs b/views/partials/logoutButtonAdmin.ejs
@@ -2,22 +2,9 @@
   <input type="checkbox" name="menu-open" id="menu-open" class="opacity-0">
   <label class="menu-open-button" for="menu-open">
     <span class="hamburger">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="feather feather-menu"
-      >
-        <line x1="3" y1="12" x2="21" y2="12"></line>
-        <line x1="3" y1="6" x2="21" y2="6"></line>
-        <line x1="3" y1="18" x2="21" y2="18"></line>
-      </svg>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
     </span>
   </label>
   <button class="menu-item menu-item-1" onclick="window.location='/audit'">

diff --git a/views/partials/logoutButtonBasic.ejs b/views/partials/logoutButtonBasic.ejs
@@ -2,22 +2,9 @@
   <input type="checkbox" name="menu-open" id="menu-open" class="opacity-0">
   <label class="menu-open-button" for="menu-open">
     <span class="hamburger">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="feather feather-menu"
-      >
-        <line x1="3" y1="12" x2="21" y2="12"></line>
-        <line x1="3" y1="6" x2="21" y2="6"></line>
-        <line x1="3" y1="18" x2="21" y2="18"></line>
-      </svg>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
     </span>
   </label>
   <button class="menu-item menu-item-3" onclick="window.location='/audit'">