ourworld_web/www_ourworld_tf_archive
Archived
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile navbar fix progress

Browse Source
This commit is contained in:
timurgordon
2022-02-26 18:09:58 +03:00
parent 8a543b2d5f
commit c75f09391d
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
templates/partials/header.html
View File

@@ -50,7 +50,7 @@
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "absolute mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
}
@@ -173,12 +173,12 @@
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div id="hamburger" class="hidden absolute mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
<div>
<div class="shadow-xs bg-white divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">
<nav class="flex justify-around">
<nav class="flex flex-col justify-around">
{% for header_item in header_items %}
{% if not loop.first %}
@@ -203,6 +203,19 @@
-->
</button>
</div>
{% set header_menu = header_arr[1] %}
<nav>
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
<div id="{{menu_id}}" class="z-50 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur hidden ease-in opacity-0 -translate-y-1">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe }}
</div>
</div>
</div>
</nav>
{% endif %}
{% endif %}