43 lines
2.4 KiB
HTML
43 lines
2.4 KiB
HTML
{% load i18n wagtailcore_tags %}
|
|
<header class="bg-blue-900 text-white shadow-md">
|
|
<div class="container mx-auto flex items-center justify-between py-4 px-6">
|
|
{% wagtail_site as current_site %}
|
|
<a class="text-xl font-bold" href="/">{{ current_site.site_name }}</a>
|
|
|
|
<!-- search bar for large screens -->
|
|
<form action="{% url 'search' %}" method="get" class="hidden md:flex items-center bg-blue-950 rounded-md absolute left-1/2 transform -translate-x-1/2">
|
|
<input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 focus:outline-none">
|
|
<button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
|
|
</form>
|
|
|
|
<nav class="flex items-center gap-4">
|
|
{% if user.is_authenticated %}
|
|
<a href="{% url 'account_logout' %}" class="hover:underline">{% trans "Logout" %}</a>
|
|
{% else %}
|
|
<a href="{% url 'account_login' %}" class="hover:underline">{% trans "Login" %}</a>
|
|
<a href="{% url 'account_signup' %}" class="hover:underline">{% trans "Sign Up" %}</a>
|
|
{% endif %}
|
|
<div class="inline-block relative group">
|
|
<form action="{% url 'set_language' %}" method="post">
|
|
{% csrf_token %}
|
|
<button type="button" class="hover:underline focus:outline-none">{% get_current_language as LANGUAGE_CODE %}{{ LANGUAGE_CODE|upper }}</button>
|
|
<div class="absolute right-0 w-32 bg-white text-black rounded-md shadow-lg hidden group-hover:block">
|
|
{% get_available_languages as LANGUAGES %}
|
|
{% for lang_code, lang_name in LANGUAGES %}
|
|
<button name="language" value="{{ lang_code }}" class="block w-full text-left rounded-md px-4 py-2 hover:bg-gray-200">{{ lang_name }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- search bar for small screens -->
|
|
<div class="container mx-auto px-6 pb-4 md:hidden">
|
|
<form action="{% url 'search' %}" method="get" class="flex items-center bg-blue-950 rounded-md w-full">
|
|
<input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 w-full focus:outline-none">
|
|
<button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
|
|
</form>
|
|
</div>
|
|
</header>
|