From ee206e124129507888ab7591ba11ee011d487aa8 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sat, 24 May 2025 21:04:08 +0300
Subject: [PATCH] update dropdown

---
 css/index.css                          |  4 +++
 static/js/custom.js                    | 42 +++++++++++++-------------
 templates/partials/header.html         | 13 ++++++--
 templates/shortcodes/feature_card.html |  6 +++-
 4 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/css/index.css b/css/index.css
index 12c977d..effad59 100644
--- a/css/index.css
+++ b/css/index.css
@@ -74,6 +74,10 @@ body.dark-mode .icon {
   fill: #ffffff !important;
 }
 
+body.dark-mode .card {
+  background-color: rgba(82, 82, 82, 50%) !important;
+}
+
 body.dark-mode .dropdown a{
   @apply
   px-0
diff --git a/static/js/custom.js b/static/js/custom.js
index d379409..a133157 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -124,29 +124,29 @@ function hideHamburger() {
   }
 }
 
-// function toggleFilter() {
-//   var filterMenu = document.getElementById("filter-menu");
-//   if (filterMenu.className.includes("hidden")) {
-//     filterMenu.className = filterMenu.className.replace("hidden", " ");
-//   } else {
-//     filterMenu.className = filterMenu.className + " hidden";
-//   }
-// }
-// window.onload = function () {
-//   let elements = document.getElementsByTagName("button");
-//   let buttons = [...elements];
+function toggleFilter() {
+  var filterMenu = document.getElementById("filter-menu");
+  if (filterMenu.className.includes("hidden")) {
+    filterMenu.className = filterMenu.className.replace("hidden", " ");
+  } else {
+    filterMenu.className = filterMenu.className + " hidden";
+  }
+}
+window.onload = function () {
+  let elements = document.getElementsByTagName("button");
+  let buttons = [...elements];
 
-//   buttons.forEach((button) => {
-//     button.addEventListener("click", function () {
-//       handleClick(button);
-//     });
-//   });
+  buttons.forEach((button) => {
+    button.addEventListener("click", function () {
+      handleClick(button);
+    });
+  });
 
-//   document.getElementById("filter-btn").addEventListener("click", toggleFilter);
-//   document
-//     .getElementById("mobile-learn-btn")
-//     .addEventListener("click", toggleMenu);
-// };
+  document.getElementById("filter-btn").addEventListener("click", toggleFilter);
+  document
+    .getElementById("mobile-learn-btn")
+    .addEventListener("click", toggleMenu);
+};
 
 function openInNewTab(url) {
   window.open(url, "_blank").focus();
diff --git a/templates/partials/header.html b/templates/partials/header.html
index d717ef9..b05a535 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -2,7 +2,7 @@
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
 <header id="header-container">
-    <div class="z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
+    <div class="nav_header z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
         <div class="relative z-50">
         <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             {# <div>
@@ -168,7 +168,7 @@
         -->
     <div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
         <div>
-            <div style="background-color: rgb(255, 255, 255);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
+            <div class="nav_header shadow-xs h-screen divide-y-2 divide-gray-50">
                 <div class="pb-6 sm:px-12 md:px-16 mt-0 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
 
                     <nav class="flex flex-col justify-around pb-12">
@@ -340,4 +340,13 @@
   display: none;
 }
 
+
+body .nav_header {
+  background-color: rgba(255, 255, 255) !important;
+}
+
+body.dark-mode .nav_header {
+  background-color: #121212 !important;
+}
+
 </style>
\ No newline at end of file
diff --git a/templates/shortcodes/feature_card.html b/templates/shortcodes/feature_card.html
index a912ea0..7a8b30e 100644
--- a/templates/shortcodes/feature_card.html
+++ b/templates/shortcodes/feature_card.html
@@ -6,7 +6,7 @@
 {% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
 
 
-<div class="relative shadow rounded-lg p-4 transition-all duration-300">
+<div class="card relative shadow rounded-lg p-4 transition-all duration-300">
   {% if icon %}
   <div class="flex items-center justify-center h-12 w-12 rounded-md mb-4">
     <img src="{{ icon | safe }}" class="">
@@ -31,4 +31,8 @@
   p{
     font-weight: 200;
   }
+
+  body.dark-mode .card {
+    background-color: rgba(82, 82, 82, 50%) !important;
+  }
 </style>