[camel-website] branch master updated: CAMEL-14695: Improve Mobile Main-Menu

[zregvart]

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 29a65b2  CAMEL-14695: Improve Mobile Main-Menu
29a65b2 is described below

commit 29a65b2b0faa934c46a86168f155fdaca4e38e8f
Author: Aashna Jena <32356795+aashnaj...@users.noreply.github.com>
AuthorDate: Thu Mar 26 20:42:47 2020 +0530

    CAMEL-14695: Improve Mobile Main-Menu
    
    * made menu full-length, added drop downs for sub-menus
    
    * made changes for device width
    
    * use toggle and is-active
---
 antora-ui-camel/src/css/header.css         | 114 ++++++++++++++++++++++++-----
 antora-ui-camel/src/js/04-mobile-navbar.js |   7 ++
 2 files changed, 103 insertions(+), 18 deletions(-)

diff --git a/antora-ui-camel/src/css/header.css 
b/antora-ui-camel/src/css/header.css
index b9d3659..c84e004 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -152,10 +152,40 @@ body {
 }
 
 @media screen and (max-width: 1023px) and (min-width: 480px) {
-  .navbar-brand .navbar-item {
-    display: flex;
-    align-items: flex-start;
-    flex-flow: column;
+  .navbar-menu.is-active {
+    display: block;
+    position: absolute;
+    height: 100vh;
+    box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
+    overflow-y: auto;
+    top: 4rem;
+    left: 0;
+    right: 0;
+    margin-left: 50%;
+    padding: 1rem 2rem;
+  }
+
+  .navbar-dropdown {
+    background-color: var(--navbar-menu-background);
+    top: 100%;
+    left: 0;
+    min-width: 100%;
+  }
+
+  .has-dropdown:not(.is-active) > .navbar-dropdown {
+    display: none;
+  }
+
+  .has-dropdown:not(.is-active) > .navbar-link::after {
+    transform: rotate(-45deg);
+  }
+
+  .has-dropdown.is-active > .navbar-dropdown {
+    display: block;
+  }
+
+  .has-dropdown.is-active > .navbar-link::after {
+    transform: rotate(135deg);
   }
 
   .navbar-item.navbar-topics,
@@ -167,7 +197,9 @@ body {
     font-weight: bold;
   }
 
-  .navbar-dropdown .navbar-item:hover {
+  .navbar-dropdown .navbar-item:hover,
+  a.navbar-item.navbar-topics:hover,
+  a.navbar-link.navbar-topics:hover {
     text-decoration: underline;
     text-decoration-color: var(--navbar-hover-font-color);
   }
@@ -177,33 +209,61 @@ body {
     padding: 0.5rem 0;
   }
 
-  .navbar-menu.is-active {
-    display: block;
-    position: absolute;
-    height: calc(90vh - 6rem);
-    box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
-    overflow-y: auto;
-    top: 4rem;
-    left: auto;
-    right: 0;
-  }
-
   .navbar-menu a.navbar-item:hover,
   .navbar-menu .navbar-link:hover {
     background-color: var(--navbar-menu-hover-background);
   }
+
+  .navbar-link::after {
+    border-width: 0 0 2px 2px;
+    border-style: solid;
+    content: " ";
+    display: block;
+    height: 0.5em;
+    position: absolute;
+    pointer-events: none;
+    transform: rotate(-45deg);
+    width: 0.5em;
+    right: 0;
+    top: 40%;
+  }
 }
 
 @media screen and (max-width: 479px) {
   .navbar-menu.is-active {
     display: block;
     position: absolute;
-    height: calc(100vh - 4rem);
+    height: 100vh;
     box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
     overflow-y: auto;
     top: 4rem;
     left: 0;
     right: 0;
+    padding: 1rem 2rem;
+  }
+
+  .navbar-dropdown {
+    background-color: var(--navbar-menu-background);
+    display: none;
+    top: 100%;
+    left: 0;
+    min-width: 100%;
+  }
+
+  .has-dropdown:not(.is-active) > .navbar-dropdown {
+    display: none;
+  }
+
+  .has-dropdown:not(.is-active) > .navbar-link::after {
+    transform: rotate(-45deg);
+  }
+
+  .has-dropdown.is-active > .navbar-dropdown {
+    display: block;
+  }
+
+  .has-dropdown.is-active > .navbar-link::after {
+    transform: rotate(135deg);
   }
 
   .navbar-item.navbar-topics,
@@ -215,7 +275,9 @@ body {
     font-weight: bold;
   }
 
-  .navbar-dropdown .navbar-item:hover {
+  .navbar-dropdown .navbar-item:hover,
+  a.navbar-item.navbar-topics:hover,
+  a.navbar-link.navbar-topics:hover {
     text-decoration: underline;
     text-decoration-color: var(--navbar-hover-font-color);
   }
@@ -224,6 +286,22 @@ body {
     background: var(--navbar-menu-background);
     padding: 0.5rem 0;
   }
+
+  .navbar-link::after {
+    border-width: 0 0 2px 2px;
+    border-style: solid;
+    content: " ";
+    display: block;
+    height: 0.5em;
+    pointer-events: none;
+    position: absolute;
+    transform: rotate(-45deg);
+    width: 0.5em;
+    margin-top: 0.6em;
+    margin-right: 1rem;
+    right: 0;
+    top: 40%;
+  }
 }
 
 @media screen and (min-width: 1024px) {
diff --git a/antora-ui-camel/src/js/04-mobile-navbar.js 
b/antora-ui-camel/src/js/04-mobile-navbar.js
index ba5cb09..e79236b 100644
--- a/antora-ui-camel/src/js/04-mobile-navbar.js
+++ b/antora-ui-camel/src/js/04-mobile-navbar.js
@@ -9,4 +9,11 @@ document.addEventListener('DOMContentLoaded', function () {
       document.documentElement.classList.toggle('is-clipped--navbar')
     })
   })
+
+  var menuDropDowns = 
Array.prototype.slice.call(document.querySelectorAll('.has-dropdown'), 0)
+  menuDropDowns.forEach(function (el) {
+    el.addEventListener('click', function (e) {
+      el.classList.toggle('is-active')
+    })
+  })
 })