diff --git a/static/css/dropdown.css b/static/css/dropdown.css
new file mode 100644
index 0000000..88022b9
--- /dev/null
+++ b/static/css/dropdown.css
@@ -0,0 +1,43 @@
+/* Dropdown menu styles */
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f9f9f9;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+ border-radius: 0.375rem;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content a:hover {
+ background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+/* Dark mode styles */
+html.dark .dropdown-content {
+ background-color: #374151;
+}
+
+html.dark .dropdown-content a {
+ color: #f9fafb;
+}
+
+html.dark .dropdown-content a:hover {
+ background-color: #4b5563;
+}
diff --git a/static/js/main.js b/static/js/main.js
index 4dd409d..730d624 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -22,6 +22,47 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
}
+
+ // Desktop dropdown menu
+ const whyMenuButton = document.getElementById('why-menu-button');
+ const desktopWhyMenu = document.getElementById('desktop-why-menu');
+
+ if (whyMenuButton && desktopWhyMenu) {
+ // Toggle on click
+ whyMenuButton.addEventListener('click', function() {
+ desktopWhyMenu.classList.toggle('hidden');
+ });
+
+ // Close when clicking outside
+ document.addEventListener('click', function(event) {
+ if (!whyMenuButton.contains(event.target) && !desktopWhyMenu.contains(event.target)) {
+ desktopWhyMenu.classList.add('hidden');
+ }
+ });
+
+ // Show on hover
+ whyMenuButton.addEventListener('mouseenter', function() {
+ desktopWhyMenu.classList.remove('hidden');
+ });
+
+ // Container for both button and menu for hover functionality
+ const dropdownContainer = whyMenuButton.parentElement;
+
+ // Hide on mouse leave from container
+ dropdownContainer.addEventListener('mouseleave', function() {
+ desktopWhyMenu.classList.add('hidden');
+ });
+ }
+
+ // Mobile dropdown menu
+ const mobileWhyMenuButton = document.querySelector('[x-data="{ open: false }"] button');
+ const mobileWhyMenu = document.getElementById('mobile-why-menu');
+
+ if (mobileWhyMenuButton && mobileWhyMenu) {
+ mobileWhyMenuButton.addEventListener('click', function() {
+ mobileWhyMenu.classList.toggle('hidden');
+ });
+ }
// Theme toggle functionality
const themeToggleBtn = document.getElementById('theme-toggle');
diff --git a/templates/base.html b/templates/base.html
index 0de6d86..9fc7cfd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,6 +5,7 @@
{% block title %}Zola with Tailwind CSS{% endblock %}
+