ehab/www_zola_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dropdown

Browse Source
This commit is contained in:
Ehab Hassan 2025-03-23 23:14:08 +02:00
parent 40c77b20c7
commit b4c5ce2c25
5 changed files with 126 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
static/css/dropdown.css Normal file
View File

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

41
static/js/main.js
View File

@ -23,6 +23,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');
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');

1
templates/base.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
<link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
<link rel="stylesheet" href="{{ get_url(path='css/dropdown.css') }}">
<style>
/* Light mode (default) */
body {

10
templates/index.html
View File

@ -13,9 +13,9 @@
<div>
<div class="px-4 py-5 sm:p-6">
<div class="">
{% if section and section.content %}
{% if section is defined and section.content is defined %}
{{ section.content | safe }}
{% elif page and page.content %}
{% elif page is defined and page.content is defined %}
{{ page.content | safe }}
{% else %}
<p>This is a starter template for your Zola site with Tailwind CSS.</p>
@ -26,8 +26,8 @@
</div>
</div>
{% if section and section.pages %}
<!-- <div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{% if section is defined and section.pages is defined %}
<div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{% for page in section.pages %}
<a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-300">
<div class="px-4 py-5 sm:p-6">
@ -41,6 +41,6 @@
</div>
</a>
{% endfor %}
</div> -->
</div>
{% endif %}
{% endblock %}

38
templates/partials/navigation.html
View File

@ -8,7 +8,24 @@
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Why Us</a>
<a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Why</a>
<!-- Dropdown menu -->
<!-- <div class="dropdown">
<button class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium inline-flex items-center" id="why-menu-button">
Why Us
<svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="dropdown-content">
<a href="{{ get_url(path='why') }}">Overview</a>
<a href="#">Our Approach</a>
<a href="#">Testimonials</a>
<a href="#">Case Studies</a>
</div>
</div> -->
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
</div>
</div>
@ -54,7 +71,24 @@
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Why Us</a>
<a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Why</a>
<!-- Mobile dropdown menu -->
<!-- <div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
Why Us
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="mobile-why-menu" class="hidden pl-4 py-2 space-y-1">
<a href="{{ get_url(path='why') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Our Approach</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Case Studies</a>
</div>
</div> -->
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
<button id="mobile-theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">