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 @@
-