Merge pull request #187 from Praveenkumar5048/main

Added the animated hamburger/menu icon
Sahil1786 · Jun 19, 2024 · ffcaec6 · ffcaec6
2 parents 050325a + b34d85e
commit ffcaec6
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 9 deletions.
diff --git a/public/css/ngo_dashboard.css b/public/css/ngo_dashboard.css
@@ -98,8 +98,51 @@ body.dark {
 }
 
 .menu-icon {
-  cursor: pointer;
   z-index: 2;
+  padding: 6px;
+  border-radius: 6px;
+  border:1px solid #F07070;
+}
+
+#checkbox {
+  display: none;
+}
+
+.bars-toggle {
+  position: relative;
+  width: 25px;
+  height: 25px;
+  display: flex;
+  cursor: pointer;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0;
+  gap: 6px;
+}
+
+.bars {
+  width: 25px;
+  height: 3.5px;
+  background-color: black;
+  border-radius: 5px;
+  transition: transform 0.6s, opacity 0.3s, background-color 0.3s;
+}
+
+body.dark .bars {
+  background-color: white;
+}
+
+#checkbox:checked + .bars-toggle #bar1 {
+  transform: rotate(45deg) translate(6.8px, 6.8px);
+}
+
+#checkbox:checked + .bars-toggle #bar2 {
+  opacity: 0;
+}
+
+#checkbox:checked + .bars-toggle #bar3 {
+  transform: rotate(-45deg) translate(6.8px, -6.8px);
 }
 
 .dash {

diff --git a/views/Admin_Dashboard.ejs b/views/Admin_Dashboard.ejs
@@ -109,8 +109,51 @@
         }
 
         .menu-icon {
-            cursor: pointer;
             z-index: 2;
+            padding: 6px;
+            border-radius: 6px;
+            border:1px solid #F07070;
+        }
+        
+        #checkbox {
+            display: none;
+        }
+
+        .bars-toggle {
+            position: relative;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            cursor: pointer;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 0;
+            gap: 6px;
+        }
+
+        .bars {
+            width: 25px;
+            height: 3.5px;
+            background-color: black;
+            border-radius: 5px;
+            transition: transform 0.6s, opacity 0.3s, background-color 0.3s;
+        }
+
+        body.dark .bars {
+            background-color: white;
+        }
+
+        #checkbox:checked + .bars-toggle #bar1 {
+            transform: rotate(45deg) translate(6.8px, 6.8px);
+        }
+
+        #checkbox:checked + .bars-toggle #bar2 {
+            opacity: 0;
+        }
+
+        #checkbox:checked + .bars-toggle #bar3 {
+            transform: rotate(-45deg) translate(6.8px, -6.8px);
         }
 
         .dash {
@@ -483,8 +526,13 @@
 
     <section class="dashboard">
         <div class="top">
-            <div class="menu-icon" onclick="toggleMenu()">
-                <i class="uil uil-bars"></i>
+            <div class="menu-icon">
+                <input id="checkbox" type="checkbox"  onclick="toggleMenu()">
+                <label class="bars-toggle" for="checkbox">
+                    <div id="bar1" class="bars"></div>
+                    <div id="bar2" class="bars"></div>
+                    <div id="bar3" class="bars"></div>
+                </label>
             </div>
             <div class="dash">DashBoard</div>
             <div class="Left-name">Welcome, <%= email %>!</div>

diff --git a/views/NGO-Dashboard.ejs b/views/NGO-Dashboard.ejs
@@ -159,8 +159,13 @@
 
     <section class="dashboard">
         <div class="top">
-            <div class="menu-icon" onclick="toggleMenu()">
-                <i class="uil uil-bars"></i>
+            <div class="menu-icon">
+                <input id="checkbox" type="checkbox"  onclick="toggleMenu()">
+                <label class="bars-toggle" for="checkbox">
+                    <div id="bar1" class="bars"></div>
+                    <div id="bar2" class="bars"></div>
+                    <div id="bar3" class="bars"></div>
+                </label>
             </div>
             <div class="dash">DashBoard</div>
             <div class="Left-name">Welcome, <%= fullName %>!</div>

diff --git a/views/UserDashBoard.ejs b/views/UserDashBoard.ejs
@@ -109,13 +109,57 @@
         }
 
         .menu-icon {
-            cursor: pointer;
             z-index: 2;
+            padding: 6px;
+            border-radius: 6px;
+            border:1px solid #F07070;
+        }
+        
+        #checkbox {
+            display: none;
+        }
+
+        .bars-toggle {
+            position: relative;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            cursor: pointer;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 0;
+            gap: 6px;
+        }
+
+        .bars {
+            width: 25px;
+            height: 3.5px;
+            background-color: black;
+            border-radius: 5px;
+            transition: transform 0.6s, opacity 0.3s, background-color 0.3s;
+        }
+
+        body.dark .bars {
+            background-color: white;
+        }
+
+        #checkbox:checked + .bars-toggle #bar1 {
+            transform: rotate(45deg) translate(6.8px, 6.8px);
+        }
+
+        #checkbox:checked + .bars-toggle #bar2 {
+            opacity: 0;
+        }
+
+        #checkbox:checked + .bars-toggle #bar3 {
+            transform: rotate(-45deg) translate(6.8px, -6.8px);
         }
 
         .dash {
             position: absolute;
             left: 35px;
+            margin-left: 25px;
         }
 
         body.dark .top {
@@ -609,8 +653,13 @@
 
     <section class="dashboard">
         <div class="top">
-            <div class="menu-icon" onclick="toggleMenu()">
-                <i class="uil uil-bars"></i>
+            <div class="menu-icon">
+                <input id="checkbox" type="checkbox"  onclick="toggleMenu()">
+                <label class="bars-toggle" for="checkbox">
+                    <div id="bar1" class="bars"></div>
+                    <div id="bar2" class="bars"></div>
+                    <div id="bar3" class="bars"></div>
+                </label>
             </div>
             <div class="dash">DashBoard</div>
             <div class="Left-name">Welcome, <%= fullName %>!</div>