Merge branch 'master' of https://github.com/couchbase/docs-ui-sandbox into ui-bug-fixes

Author: rakeshAlgo

src/css/body.css

@@ -21,7 +21,6 @@ main {
 nav.nav {
   /* NOTE reserve no space in layout by default */
   flex: 0 0 0%;
-  visibility: hidden;
   /* NOTE width must be set in order for fixed child to inherit */
   width: var(--width-nav);
 }
@@ -59,6 +58,6 @@ aside.toc.sidebar {
 
 @media screen and (max-width: 767px) {
   div.body {
-    margin-top: 5rem;
+    margin-top: 3.9rem;
   }
 }

src/js/01-nav.js

@@ -2,6 +2,7 @@
   'use strict'
 
   var nav = document.querySelector('nav.nav')
+  var menuExpandToggle = document.querySelector('.menu-expand-toggle')
   var navMenu = {}
   if (!(navMenu.element = nav && nav.querySelector('.nav-menu'))) return
   var navControl
@@ -29,41 +30,41 @@
     }
   })
 
-  fitNavMenuInit({})
-  window.addEventListener('load', fitNavMenuInit)
-  window.addEventListener('resize', fitNavMenuInit)
+  // fitNavMenuInit({})
+  // window.addEventListener('load', fitNavMenuInit)
+  // window.addEventListener('resize', fitNavMenuInit)
 
   if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav)
 
-  function scrollItemToMiddle (el, parentEl) {
-    var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop
-    if (adjustment > 0) parentEl.scrollTop = adjustment
-  }
-
-  function fitNavMenuInit (e) {
-    window.removeEventListener('scroll', fitNavMenuOnScroll)
-    navMenu.element.style.height = ''
-    if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) {
-      // QUESTION should we check if x value > 0 instead?
-      if (window.getComputedStyle(nav).visibility === 'visible') {
-        if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer')
-        fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement)
-        window.addEventListener('scroll', fitNavMenuOnScroll)
-      }
-      if (currentPageItem && e.type !== 'resize') {
-        scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element)
-      }
-    }
-  }
-
-  function fitNavMenuOnScroll () {
-    fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement)
-  }
-
-  function fitNavMenu (preferredHeight, availableHeight, encroachingElement) {
-    var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top
-    navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : ''
-  }
+  // function scrollItemToMiddle (el, parentEl) {
+  //   var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop
+  //   if (adjustment > 0) parentEl.scrollTop = adjustment
+  // }
+
+  // function fitNavMenuInit (e) {
+  //   window.removeEventListener('scroll', fitNavMenuOnScroll)
+  //   navMenu.element.style.height = ''
+  //   if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) {
+  //     // QUESTION should we check if x value > 0 instead?
+  //     if (window.getComputedStyle(nav).visibility === 'visible') {
+  //       if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer')
+  //       fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement)
+  //       window.addEventListener('scroll', fitNavMenuOnScroll)
+  //     }
+  //     if (currentPageItem && e.type !== 'resize') {
+  //       scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element)
+  //     }
+  //   }
+  // }
+
+  // function fitNavMenuOnScroll () {
+  //   fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement)
+  // }
+
+  // function fitNavMenu (preferredHeight, availableHeight, encroachingElement) {
+  //   var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top
+  //   navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : ''
+  // }
 
   var navMenuControl
   if (document.querySelector('.main-nav-parent')) {
@@ -137,7 +138,20 @@
     } else {
       nav.classList.add('show-nav')
     }
-  }, 2000)
+
+    menuExpandToggle.addEventListener('click', function(e) {
+      e.preventDefault()
+      // var navBarHeight =  nav.querySelector('.nav-menu')
+      // navBarHeight.style.height = '100vh'
+      // console.log(navBarHeight.style.height)
+      if (nav.classList.contains('collapse-menu')) {
+        nav.classList.remove('collapse-menu')
+      } else {
+        nav.classList.add('collapse-menu')
+      }
+
+    })
+  }, 500)
   // has children in li
   // $('ul.nav-list li.nav-item ul.nav-list .nav-item').has('ul.nav-list').addClass('has-children')
   function concealEvent (e) {

src/js/05-tabset.js

@@ -98,9 +98,12 @@ function find (selector, from) {
   return Array.prototype.slice.call((from || document).querySelectorAll(selector))
 }
 setTimeout(function () {
-  document.querySelector(' .dropddown-btn').addEventListener('click', function (e) {
-    e.preventDefault()
-  })
+  if (document.querySelector(' .dropddown-btn')) {
+    document.querySelector(' .dropddown-btn').addEventListener('click', function (e) {
+      e.preventDefault()
+    })
+  }
+
 }, 1000)
 
 function getPane (id, tabset) {