henrik2399/qivip
1
0
Fork 0
Code Issues 24 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

feat(navbar): Implementiere responsive Navbar mit mobilem Menü

Browse Source 
- Füge Hamburger-Menü für mobile Ansichten hinzu
- Positioniere Suchleiste zentral auf dem Desktop
- Implementiere animierte Transitions beim Öffnen/Schließen des Menüs
- Entferne untere Border-Radius der Navbar bei geöffnetem Menü für nahtloses Erscheinungsbild
- Optimiere Layout für verschiedene Bildschirmgrößen
- Behalte Designsprache und Farbschema bei (blau/weiß)
This commit is contained in:
Juhn-Vitus Saß
2025-04-22 19:13:55 +02:00
parent bad257f341
commit 6eed8107ac
1 changed files with 116 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
django/templates/partials/_nav.html
View File

@@ -1,34 +1,121 @@
<nav class="flex justify-between items-center bg-blue-600 h-12 px-4 sm:px-6 rounded-lg mt-1 m-2 shadow-md overflow-x-auto whitespace-nowrap"> <nav id="main-nav" class="relative bg-blue-600 rounded-lg mt-1 m-2 shadow-md transition-all duration-300">
<div class="flex items-center flex-shrink-0 md:w-32"> <!-- Desktop Navigation Bar -->
<h2 class="text-xl font-bold text-white hover:scale-110 transition duration-200 "> <div class="flex justify-between items-center h-12 px-4 sm:px-6 overflow-x-auto whitespace-nowrap">
<a href="{% url 'homepage:home' %}">qivip</a> <!-- Logo / Left section -->
</h2> <div class="flex items-center flex-shrink-0 md:w-32">
<h2 class="text-xl font-bold text-white hover:scale-110 transition duration-200">
<a href="{% url 'homepage:home' %}">qivip</a>
</h2>
</div>
<!-- Desktop Search (centered on screen) - Hidden on mobile -->
<div class="hidden md:flex justify-center items-center absolute left-1/2 transform -translate-x-1/2 min-w-40">
<form method="get" action="{% url 'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md">
<input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base">
<button class="py-1 text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</form>
</div>
<!-- Desktop Navigation Links - Hidden on mobile -->
<div class="hidden md:flex items-center space-x-4 md:w-40">
<ul class="flex space-x-4 qp-nav-list">
{% if show_search %}
<li><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li>
{% else%}
<li><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li>
{% endif %}
{% if user.is_authenticated %}
<li><a href="{% url 'accounts:home' %}">Konto</a></li>
{% else %}
<li><a href="{% url 'accounts:login' %}">Anmelden</a></li>
{% endif %}
</ul>
</div>
<!-- Mobile menu button - Only visible on mobile -->
<div class="flex md:hidden items-center">
<button id="mobile-menu-button" class="text-white focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div> </div>
<div class="flex justify-center items-center min-w-40"> <!-- Mobile Navigation Menu - Hidden by default - FULLWIDTH DROPDOWN -->
<form method="get" action="{% url 'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md"> <div id="mobile-menu" class="hidden absolute w-full z-50 md:hidden opacity-0 transform -translate-y-2 transition-all duration-300">
<input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}" <div class="bg-blue-500 pt-3 pb-4 rounded-b-lg shadow-inner">
class=" text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base"> <!-- Search in mobile menu -->
<button class="py-1 text-blue-600"> <form method="get" action="{% url 'library:overview_quiz' %}" class="px-4 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6 "> <div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /> <input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
</svg> class="w-full text-sm px-2 text-black bg-transparent focus:outline-none">
</button> <button class="text-blue-600">
</form></div> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</div>
</form>
<!-- Mobile Navigation Links -->
<div class="flex items-center space-x-4 md:w-40 "> <div class="space-y-2 px-4">
<ul class="flex space-x-4 qp-nav-list"> <a href="{% url 'library:overview_quiz' %}" class="block py-2 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-200">
{% if show_search %} Bibliothek
<li class="hidden md:flex"><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li> </a>
{% else%} {% if user.is_authenticated %}
<li><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li> <a href="{% url 'accounts:home' %}" class="block py-2 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-200">
{% endif %} Konto
{% if user.is_authenticated %} </a>
<li><a href="{% url 'accounts:home' %}">Konto</a></li> {% else %}
{% else %} <a href="{% url 'accounts:login' %}" class="block py-2 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-200">
<li><a href="{% url 'accounts:login' %}">Anmelden</a></li> Anmelden
{% endif %} </a>
</ul> {% endif %}
</div>
</div>
</div> </div>
</nav> </nav>
<!-- Mobile Menu Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const mainNav = document.getElementById('main-nav');
mobileMenuButton.addEventListener('click', function() {
// Toggle menu visibility
if (mobileMenu.classList.contains('hidden')) {
// Show menu
mobileMenu.classList.remove('hidden');
// Entferne unten abgerundete Ecken der Navbar wenn Menü offen
mainNav.classList.remove('rounded-lg');
mainNav.classList.add('rounded-t-lg');
// Animation einfahren
setTimeout(() => {
mobileMenu.classList.remove('opacity-0', 'transform', '-translate-y-2');
mobileMenu.classList.add('opacity-100');
}, 50);
} else {
// Ausfahren Animation
mobileMenu.classList.add('opacity-0', 'transform', '-translate-y-2');
mobileMenu.classList.remove('opacity-100');
// Nach der Animation verstecken
setTimeout(() => {
mobileMenu.classList.add('hidden');
// Stelle die abgerundeten Ecken wieder her
mainNav.classList.remove('rounded-t-lg');
mainNav.classList.add('rounded-lg');
}, 300);
}
});
});
</script>