From 7ec4b085e53aca29c15a3f411d1806329fe13ea3 Mon Sep 17 00:00:00 2001
From: timurgordon <timurgordon@gmail.com>
Date: Wed, 23 Feb 2022 07:16:14 +0300
Subject: [PATCH] mobile header functional

---
 content/header/_index.md       |   3 +
 css/index.css                  |  15 +--
 templates/blog/blog.html       |   4 +-
 templates/partials/header.html | 236 ++++++++++++++-------------------
 4 files changed, 114 insertions(+), 144 deletions(-)

diff --git a/content/header/_index.md b/content/header/_index.md
index a69786d..ce625db 100644
--- a/content/header/_index.md
+++ b/content/header/_index.md
@@ -78,4 +78,7 @@ Projects in OurWorld
 
 Be a part of the new internet
 
+- [Careers]("/careers")
+- [Blog]("/blog")
+
 {% end %}
diff --git a/css/index.css b/css/index.css
index b47080a..cf7783e 100644
--- a/css/index.css
+++ b/css/index.css
@@ -44,13 +44,14 @@ img[src*="#large"] {
   h2 {
     @apply text-2xl lg:text-4xl font-light;
   }
-
+  h4 {
+    @apply text-lg lg:text-xl font-light;
+  }
   h5 {
     @apply text-base lg:text-base font-light leading-8 my-2;
   }
-
-  h5 {
-    @apply text-base lg:text-base leading-8 my-2;
+  nav p {
+    @apply hidden sm:block md:block lg:block xl:block 2xl:block;
   }
 }
 
@@ -59,11 +60,7 @@ h3 {
   font-style: normal;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.5);
-}
-
-h4 {
-  font-size: 1.3em;
-  font-weight: 400;
+  margin: 10px 0px;
 }
 
 p {
diff --git a/templates/blog/blog.html b/templates/blog/blog.html
index e480fee..63162a6 100644
--- a/templates/blog/blog.html
+++ b/templates/blog/blog.html
@@ -25,4 +25,6 @@ and a side nav for category and featured post navigation
         {% include "partials/blogPosts.html" %}
         {% include "partials/blogSidebar.html" %}
     </div>
- </main> {% endblock content %}
+ </main> 
+ 
+ {% endblock content %}
diff --git a/templates/partials/header.html b/templates/partials/header.html
index dbcc8b6..0065919 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -4,6 +4,7 @@
 --><!-- This example requires Tailwind CSS v1.4.0+ -->
 <script type="text/javascript">
     var inDisplay = "";
+    var hamburgerShown = false;
 
     function toggleMenu() {
         if (inDisplay === "learn") { 
@@ -16,16 +17,49 @@
         }
     }
 
+    function toggleHamburger() {
+        if (hamburgerShown) { 
+            hideHamburger();
+            hamburgerShown = false;
+        }
+        else { 
+            showHamburger();
+            hamburgerShown = true;
+        }
+    }
+
     function showMenu() {
-        document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
+        document.getElementById('learn').className = "mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
     }
 
     function hideMenu() {
         document.getElementById('learn').className = "hidden absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-in duration-150 opacity-0 -translate-y-1";
     }
 
+    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-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";
+    }
+
+    function hideHamburger() {
+        document.getElementById('header-container').className = "";
+        document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden";
+        document.getElementById('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 = "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";
+        hideMenu();
+    }
+
     window.onload = function(){
         document.getElementById("learn-btn").addEventListener( 'click', toggleMenu);
+        document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
+        document.getElementById("hamburger-btn").addEventListener( 'click', toggleHamburger);
+        document.getElementById("close-hamburger-btn").addEventListener( 'click', toggleHamburger);
+    }
+
+    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>
@@ -33,7 +67,7 @@
 {%- set section = get_section(path="header/_index.md") %}
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
-<body>
+<body id="header-container">
         <div class="z-10 bg-white fixed w-screen">
           <div class="relative z-10 shadow">
             <div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
@@ -43,12 +77,18 @@
                 </a>
               </div>
               <div class="-mr-2 -my-2 md:hidden">
-                <button type="button" class="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">
+                <button id="hamburger-btn" type="button" class="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">
                   <!-- Heroicon name: menu -->
                   <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                   </svg>
                 </button>
+                <button id="close-hamburger-btn" type="button" class="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">
+                    <!-- Heroicon name: x -->
+                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
               </div>
               <div class="hidden md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
                 <nav class="flex space-x-10">
@@ -57,26 +97,28 @@
     {% if not loop.first %}
         {% set header_arr = header_item | split(pat="</li>") %}
         {% set header_label = header_arr[0] %}
-                  <div class="relative">
-                    <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
-                    <button type="button" id="learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm 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"
-                      -->
-                    </button>
-                  </div>
-                  <a href="/careers" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                    Careers
-                  </a>
-                  <a href="/blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                    Blog
-                  </a>
-                         
+        {% 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-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                {{link_label}}
+            </a>
+        {% else %}
+            <div class="relative">
+            <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
+            <button type="button" id="learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm 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"
+                -->
+            </button>
+            </div>
+
+        {% endif %}  
     {% endif %}
-    {% endfor %}
+{% endfor %}
 </nav>
 
 
@@ -89,15 +131,15 @@
         {% set header_label = header_arr[0] %}
         {% set header_menu = header_arr[1] %}
     
-    <div>
-        <div id="learn" class="hidden opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
-            <div class="bg-semi-white">
+    <nav>
+        <div id="learn" class="z-50 mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 hidden opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur">
+            <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
               <div class="mx-8 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
-                {{header_menu | safe}}
+                {{header_menu | replace(from="<br>", to="") | safe }}
               </div>
             </div>            
           </div>
-    </div>
+        </nav>
 
     
     {% endif %}
@@ -114,114 +156,40 @@
               From: "opacity-100 scale-100"
               To: "opacity-0 scale-95"
           -->
-          <div class="hidden absolute z-20 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
-            <div class="rounded-lg shadow-lg">
-              <div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
+          <div id="hamburger" class="hidden absolute 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">
-                  <div class="flex items-center justify-between">
-                    <div>
-                      <img class="h-8 w-auto" src="/https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
-                    </div>
-                    <div class="-mr-2">
-                      <button type="button" class="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">
-                        <!-- Heroicon name: x -->
-                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                  <div>
-                    <nav class="space-y-8">
-                      <div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
-                        <a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
-                          <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
-                            <!-- Heroicon name: chart-bar -->
-                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                            </svg>
-                          </div>
-                          <div class="text-sm leading-6 font-normal text-gray-900">
-                            Analytics
-                          </div>
-                        </a>
-                        <a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
-                          <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
-                            <!-- Heroicon name: cursor-click -->
-                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
-                            </svg>
-                          </div>
-                          <div class="text-sm leading-6 font-normal text-gray-900">
-                            Engagement
-                          </div>
-                        </a>
-                        <a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
-                          <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
-                            <!-- Heroicon name: shield-check -->
-                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                            </svg>
-                          </div>
-                          <div class="text-sm leading-6 font-normal text-gray-900">
-                            Security
-                          </div>
-                        </a>
-                        <a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
-                          <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
-                            <!-- Heroicon name: view-grid -->
-                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
-                            </svg>
-                          </div>
-                          <div class="text-sm leading-6 font-normal text-gray-900">
-                            Integrations
-                          </div>
-                        </a>
-                      </div>
-                      <div class="text-sm leading-6">
-                        <a href="#" class="font-normal text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
-                          View all products &#x2192;
-                        </a>
-                      </div>
-                    </nav>
-                  </div>
-                </div>
-                <div class="py-6 px-5 space-y-6">
-                  <div class="grid grid-cols-2 gap-4">
-                    <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
-                      Pricing
-                    </a>
-                    <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
-                      Docs
-                    </a>
-                    <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
-                      Company
-                    </a>
-                    <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
-                      Resources
-                    </a>
-                    <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
-                      Blog
-                    </a>
-                    <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
-                      Contact Sales
-                    </a>
-                  </div>
-                  <div class="space-y-6">
-                    <span class="w-full flex rounded-md shadow-sm">
-                      <a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-6 font-normal rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
-                        Sign up
-                      </a>
-                    </span>
-                    <p class="text-center text-sm leading-6 font-normal text-gray-500">
-                      Existing customer?
-                      <a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
-                        Sign in
-                      </a>
-                    </p>
-                  </div>
-                </div>
+
+                    <nav class="flex justify-around">
+
+                        {% for header_item in header_items %}
+                            {% if not loop.first %}
+                                {% set header_arr = header_item | split(pat="</li>") %}
+                                {% set header_label = header_arr[0] %}
+                                {% 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-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                                        {{link_label}}
+                                    </a>
+                                {% else %}
+                                    <div class="relative">
+                                    <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
+                                    <button type="button" id="mobile-learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm 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"
+                                        -->
+                                    </button>
+                                    </div>
+                        
+                                {% endif %}  
+                            {% endif %}
+                        {% endfor %}
+                        </nav>                    
               </div>
             </div>
           </div>