fix hamburger menu

This commit is contained in:
samaradel 2023-08-20 15:45:37 +03:00
parent dfdcc8a4fc
commit e365f53b35
391 changed files with 44 additions and 5450 deletions

View File

@ -133,11 +133,11 @@ header .freeflow {
position: absolute; position: absolute;
} }
#info-menu button { #info-menu button, #info-mobile-menu button {
background-color: transparent; background-color: transparent;
} }
#info-menu button a { #info-menu button a, #info-mobile-menu button a {
color: #1a1a1a; color: #1a1a1a;
} }
@ -154,12 +154,12 @@ footer .freeflow img {
width: 200px; width: 200px;
margin-bottom: 20px; margin-bottom: 20px;
} }
#info-menu > div.freeflow { #info-menu > div.freeflow , #info-mobile-menu{
padding-top: 0px !important; padding-top: 0px !important;
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
header .freeflow div, #info-menu div { header .freeflow div, #info-menu div, #info-mobile-menu div {
box-shadow: none; box-shadow: none;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700 !important; font-weight: 700 !important;
@ -358,7 +358,7 @@ a:hover{
} }
} }
header #menu button, #info-menu button{ header #menu button, #info-menu button, #info-mobile-menu button{
@apply @apply
lg:text-lg lg:text-lg
px-6 px-6

View File

@ -82,7 +82,7 @@ function hideMenu(menuName) {
function showHamburger() { function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden"; document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right"; document.getElementById('hamburger').className = "fixed mt-28 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden lg: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('hamburger-btn').className = "hidden lg: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"; 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";
} }
@ -129,7 +129,6 @@ window.onload = function () {
} }
document.getElementById("filter-btn").addEventListener('click', toggleFilter); document.getElementById("filter-btn").addEventListener('click', toggleFilter);
document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu);
} }
function openInNewTab(url) { function openInNewTab(url) {

View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" charset="utf-8"> <html lang="en" charset="utf-8">
{% include "partials/head.html" %} {% include "partials/head.html" %}
{% include "partials/header.html" %}
<body> <body>
{% include "partials/header.html" %}
<div id="content" class="py-4 sm:py-12 md:py-16 lg:py-18 overflow-hidden"> <div id="content" class="py-4 sm:py-12 md:py-16 lg:py-18 overflow-hidden">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>

View File

@ -37,7 +37,7 @@
{% for page in section.pages %} {% for page in section.pages %}
{% if page.extra.menu %} {% continue %} {% endif %} {% if page.extra.menu %} {% continue %} {% endif %}
<a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{{page.title}} {{page.title}}test
</a> </a>
<div class="relative"> <div class="relative">
</div> </div>

View File

@ -31,6 +31,7 @@
</div> </div>
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12"> <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-10"> <nav class="flex space-x-10">
{% for header_item in header_items %} {% for header_item in header_items %}
{% if not loop.first %} {% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %} {% set header_arr = header_item | split(pat="</li>") %}
@ -38,21 +39,13 @@
{% if '<a' in header_label %} {% if '<a' in header_label %}
{% set link_label = header_label | striptags %} {% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%} {% set link_path = header_label | split(pat="%22") | safe%}
{% if header_label is containing("http") %} <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{% if header_label is not containing("ourworld.tf") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{{link_label}} {{link_label}}
</a> </a>
{% endif %}
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% endif %}
{% else %} {% else %}
<div class="relative"> <div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %} {% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 hover:text-gray-500 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
<span>{{ header_label }}</span> <span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button> </button>
@ -61,10 +54,12 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<a href="mailto:info@ourworld.tf" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> <a href="mailto:info@ourworld.tf" target="_blank" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Contact Contact
</a> </a>
</nav> </nav>
</div> </div>
</div> </div>
</div> </div>
@ -100,14 +95,11 @@
From: "opacity-100 scale-100" From: "opacity-100 scale-100"
To: "opacity-0 scale-95" To: "opacity-0 scale-95"
--> -->
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden"> <div id="hamburger" class="hidden fixed mt-28 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50"> <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto"> <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
<nav class="flex flex-col justify-around pb-12 pt-2">
<nav class="flex flex-col justify-around pb-12">
{% for header_item in header_items %} {% for header_item in header_items %}
{% if not loop.first %} {% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %} {% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %} {% set header_label = header_arr[0] %}
@ -119,12 +111,12 @@
</a> </a>
{% else %} {% else %}
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %} {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="my-0 px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<span>{{ header_label }}</span> <span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button> </button>
{% set menu_id = header_label ~ "-mobile-menu" | slugify %} {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
<div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden"> <div id="{{menu_id}}" class="z-50 leading-3 pl-9 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
{{ header_arr[1] | safe }} {{ header_arr[1] | safe }}
</div> </div>
@ -135,7 +127,7 @@
{% if "footer/_index.md" in subsections_str %} {% if "footer/_index.md" in subsections_str %}
{% set section = get_section(path="footer/_index.md")%} {% set section = get_section(path="footer/_index.md")%}
{% set logoPath = section.extra.logoPath %} {% set logoPath = section.extra.logoPath %}
<div class="mx-8 mt-8"> <div class="mx-8 my-2">
{# <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1"> {# <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
<img class="w-48 h-auto" src="{{logoPath}}" alt="Company name" /> <img class="w-48 h-auto" src="{{logoPath}}" alt="Company name" />
<p class="text-gray-500 text-base leading-6 "> <p class="text-gray-500 text-base leading-6 ">
@ -143,7 +135,7 @@
</p> </p>
</div> #} </div> #}
{% endif %} {% endif %}
<a href="mailto:info@ourworld.tf" target="_blank" class="text-lg uppercase leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> <a href="mailto:info@ourworld.tf" target="_blank" class="my-0 text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Contact Contact
</a> </a>
</nav> </nav>
@ -152,7 +144,6 @@
</div> </div>
</div> </div>
</div>
</header> </header>

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 490 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 481 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 598 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 652 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 302 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Some files were not shown because too many files have changed in this diff Show More