new header mobile implemented
This commit is contained in:
timurgordon
@@ -12,24 +12,27 @@
|
||||
|
||||
function toggleMenu(button) {
|
||||
if (displayedMenu === button.id.split("-")[0]) {
|
||||
button.className = button.className.replace("text-blue-500", " text-gray-900");
|
||||
button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
|
||||
hideMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
|
||||
displayedMenu = "";
|
||||
}
|
||||
else {
|
||||
showMenu(button.id.split("-")[0]);
|
||||
button.className = button.className.replace("text-gray-900", " text-blue-500");
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
|
||||
button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
|
||||
displayedMenu = button.id.split("-")[0]
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(button) {
|
||||
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
|
||||
if (button.id.indexOf("menu") !== -1 ) { toggleMenu(button) }
|
||||
if (button.id.indexOf("menu") !== -1 ) {
|
||||
toggleMenu(button)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHamburger() {
|
||||
console.log("toggling hamburger", hamburgerShown)
|
||||
if (hamburgerShown) {
|
||||
hideHamburger();
|
||||
hamburgerShown = false;
|
||||
@@ -57,7 +60,7 @@
|
||||
|
||||
function showHamburger() {
|
||||
document.getElementById('header-container').className = "overflow-hidden";
|
||||
document.getElementById('hamburger').className = "fixed mt-12 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 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";
|
||||
}
|
||||
@@ -79,10 +82,6 @@
|
||||
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
|
||||
}
|
||||
|
||||
function showMobileNav() {
|
||||
document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{%- set section = get_section(path="header/_index.md") %}
|
||||
@@ -129,11 +128,7 @@
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="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>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -156,7 +151,7 @@
|
||||
<nav>
|
||||
<div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<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-6 py-4 sm:px-8 sm:py-6 lg:px-12 lg:py-8 xl:py-12">
|
||||
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
|
||||
{{header_menu | safe }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,10 +173,10 @@
|
||||
From: "opacity-100 scale-100"
|
||||
To: "opacity-0 scale-95"
|
||||
-->
|
||||
<div id="hamburger" class="hidden fixed mt-12 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<div>
|
||||
<div class="shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-8 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="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">
|
||||
|
||||
<nav class="flex flex-col justify-around pb-12">
|
||||
{% for header_item in header_items %}
|
||||
@@ -192,31 +187,34 @@
|
||||
{% if '<a' in header_label %}
|
||||
{% set link_label = header_label | striptags %}
|
||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||
<a href="{{link_path[1]}}" class="text-3xl leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 my-8 transition ease-in-out duration-150 mt-0">
|
||||
<a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" id="{{button_id}}" class="flex flex-col items-start text-left text-gray-500 group inline-flex space-x-2 text-3xl my-8 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="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">
|
||||
<span>{{ header_label }}</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<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>
|
||||
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
|
||||
<div id="{{menu_id}}" class="z-50 leading-3 mt-6 pl-12 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-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
{{ header_arr[1] | safe }}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{% endif %}
|
||||
{% if header_arr[1] %}
|
||||
|
||||
{% endif %}
|
||||
<hr/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% set section = get_section(path="footer/_index.md")%}
|
||||
{%- set logoPath = section.extra.logoPath %}
|
||||
<div class="mx-8 mt-8">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-32 h-auto" src="{{logoPath}}" alt="Company name" />
|
||||
<p class="text-gray-500 text-base leading-6 ">
|
||||
{{section.description}}
|
||||
</p>
|
||||
{% include "partials/socialLinks.html" %}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user