76 lines
3.4 KiB
Django/Jinja
76 lines
3.4 KiB
Django/Jinja
<nav class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
|
|
<div class="flex items-center">
|
|
{% if logo.show_in_nav %}
|
|
{% if logo.has_dark_variant %}
|
|
<a href="/" class="flex-shrink-0 mr-4">
|
|
<img src="{{ logo.light_src }}" alt="{{ logo.alt }}" class="h-8 w-auto dark:hidden">
|
|
<img src="{{ logo.dark_src }}" alt="{{ logo.alt }}" class="h-8 w-auto hidden dark:block">
|
|
</a>
|
|
{% else %}
|
|
<a href="/" class="flex-shrink-0 mr-4">
|
|
<img src="{{ logo.light_src }}" alt="{{ logo.alt }}" class="h-8 w-auto">
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<div class="hidden lg:block md:ml-6 md:flex md:space-x-8">
|
|
{% for item in menu_items %}
|
|
<a href="{{ item.href }}"
|
|
class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors no-underline{% if item.is_active %} text-gray-900 dark:text-white font-semibold{% endif %}"
|
|
{% if item.is_external %}target="_blank" rel="noopener noreferrer"{% endif %}>
|
|
{{ item.label }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<div class="hidden md:flex md:items-center md:space-x-2">
|
|
<div class="flex items-center space-x-2 nav-ctl-group">
|
|
{{ theme_html | safe }}
|
|
{{ lang_html | safe }}
|
|
{{ login_html | safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:hidden flex items-center">
|
|
<button onclick="document.getElementById('navbar-collapse').classList.toggle('hidden')"
|
|
class="ds-mobile-menu-btn"
|
|
aria-controls="navbar-collapse"
|
|
aria-expanded="false"
|
|
aria-label="Open navigation menu">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="navbar-collapse" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
|
<div class="px-2 pt-2 pb-3 space-y-1">
|
|
{% for item in menu_items %}
|
|
<a href="{{ item.href }}"
|
|
class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors no-underline{% if item.is_active %} text-gray-900 dark:text-white font-semibold{% endif %}"
|
|
{% if item.is_external %}target="_blank" rel="noopener noreferrer"{% endif %}>
|
|
{{ item.label }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="px-3 py-2 border-t border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">{{ mobile_controls_label }}</span>
|
|
<div class="flex items-center space-x-2 nav-ctl-group">
|
|
{{ theme_html | safe }}
|
|
{{ lang_html | safe }}
|
|
{{ login_html | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|