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>