From b34d85ef4d12a97cf6c9d5e1b09f04dcc8b3dae5 Mon Sep 17 00:00:00 2001
From: Praveenkumar5048 <praveenkumarhireboodur@gmail.com>
Date: Wed, 19 Jun 2024 11:30:00 +0530
Subject: [PATCH] added the animated hamburger/menu icon

---
 public/css/ngo_dashboard.css | 45 ++++++++++++++++++++++++++++-
 views/Admin_Dashboard.ejs    | 54 +++++++++++++++++++++++++++++++++--
 views/NGO-Dashboard.ejs      |  9 ++++--
 views/UserDashBoard.ejs      | 55 ++++++++++++++++++++++++++++++++++--
 4 files changed, 154 insertions(+), 9 deletions(-)

diff --git a/public/css/ngo_dashboard.css b/public/css/ngo_dashboard.css
index 019a4b8..98f62ef 100644
--- 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
index 298b847..d7d9e99 100644
--- 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
index 9ce8e19..7b55093 100644
--- 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
index 035279c..0e2d72b 100644
--- 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>