Merge pull request #69 from couchbase/left-nav-feature

amarantha-k · web-flow · commit 94203845f0bc · 2020-09-17T15:20:51.000-07:00
Left nav feature
diff --git a/src/css/base.css b/src/css/base.css
@@ -99,6 +99,12 @@ i {
 .hide-nav {
   display: none;
 }
+
+@media screen and (min-width: 992px) {
+  .body.container {
+    padding-left: 0;
+  }
+}
 /* .container-fluid {
   max-width: var(--width-container-fluid);
   padding: 0;
diff --git a/src/css/body.css b/src/css/body.css
@@ -59,6 +59,6 @@ aside.toc.sidebar {
 
 @media screen and (max-width: 767px) {
   div.body {
-    margin-top: 3.9rem;
+    margin-top: 4.2rem;
   }
 }
diff --git a/src/css/component-frame.css b/src/css/component-frame.css
@@ -20,7 +20,7 @@
 
 .frame-body {
   margin-left: var(--base-extra-small-space);
-  position: relative;
+  /* position: relative; */
   padding-top: 12px;
   padding-bottom: 12px;
   padding-right: 0;
@@ -32,7 +32,7 @@
 
 .frame-body .title {
   margin: 0 0 0 0;
-  font-size: var(--font-medium);
+  font-size: 1.125rem;
   line-height: 1.5rem;
   font-weight: var(--weight-semibold);
   color: var(--color-brand-gray1);
@@ -56,8 +56,12 @@
 .frame-body .frame-link {
   position: relative;
   color: var(--color-brand-gray1);
-  font-size: 18px;
-  margin-left: 4px;
+  font-size: 1.125rem;
+  font-weight: var(--weight-semibold);
+}
+
+.frame-body .frame-link .version {
+  margin: 0 8px 0 4px;
 }
 
 .frame-dropdown {
@@ -67,6 +71,7 @@
   top: 100%;
   z-index: 1;
   padding: 0;
+  right: 4px;
 }
 
 .component-frame .frame-dropdown.show,
@@ -76,8 +81,6 @@
 
 .frame-link-dropdowns .frame-link {
   color: var(--color-brand-gray1);
-  font-weight: var(--weight-semibold);
-  margin: 0;
   font-family: "Source Sans Pro", sans-serif;
 }
 
@@ -89,7 +92,7 @@
 .frame-dropdown .frame-dropdown-list,
 .frame-dropdown .related {
   margin: 0;
-  padding: 0;
+  padding: 0.5rem 0;
   list-style: none;
   min-width: 125px;
 }
@@ -103,7 +106,7 @@
 
 .frame-dropdown ul li a,
 .frame-dropdown .related li a {
-  padding: 8px 0.625rem;
+  padding: 0.5rem 1rem;
   display: inline-block;
   width: 100%;
   color: var(--color-brand-primary);
@@ -140,7 +143,7 @@ ul.frame-dropdown-list li:last-child,
 .frame-link,
 .frame-item,
 .navbar-item {
-  font-size: var(--font-small);
+  font-size: var(--font-base);
   color: var(--color-brand-gray4);
   text-decoration: none;
 }
diff --git a/src/css/nav.css b/src/css/nav.css
@@ -251,9 +251,9 @@ html.is-clipped--nav {
   background-size: 75%;
 }
 
-.is-inactive {
+/* .is-inactive {
   display: none;
-}
+} */
 
 .main-nav-parent {
   font-size: var(--font-small);
@@ -316,7 +316,7 @@ html.is-clipped--nav {
   color: var(--color-brand-black);
   font-size: var(--font-base);
   line-height: var(--line-height-base);
-  font-weight: var(--weight-semibold);
+  /* font-weight: var(--weight-semibold); */
 }
 
 .is-active[data-depth='0'] .is-active > .nav-line[data-depth="1"] {
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -14,7 +14,7 @@
   })
 
   find(/*'.nav-toggle',*/ '.in-toggle', navMenu.element).forEach(function (toggleBtn) {
-    console.log(toggleBtn, 17)
+    // console.log(toggleBtn, 17)
     var navItem = findAncestorWithClass('nav-item', toggleBtn, navMenu.element)
     toggleBtn.addEventListener('click', toggleActive.bind(navItem))
     // var dataDepth = toggleBtn.getAttribute('data-depth')
@@ -68,18 +68,18 @@
   //   navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : ''
   // }
 
-  var navMenuControl
-  if (document.querySelector('.main-nav-parent')) {
-    navMenuControl = document.querySelector('.main-nav-parent')
-    navMenuControl.addEventListener('click', function () {
-      for (var i = 0; i < navItems.length; i++) {
-        navItems[i].classList.remove('is-active')
-        navItems[i].classList.remove('is-inactive')
-        navItems[i].classList.remove('open')
-      }
-      this.style.display = 'none'
-    })
-  }
+  // var navMenuControl
+  // if (document.querySelector('.main-nav-parent')) {
+  //   navMenuControl = document.querySelector('.main-nav-parent')
+  //   navMenuControl.addEventListener('click', function () {
+  //     for (var i = 0; i < navItems.length; i++) {
+  //       navItems[i].classList.remove('is-active')
+  //       navItems[i].classList.remove('is-inactive')
+  //       navItems[i].classList.remove('open')
+  //     }
+  //     this.style.display = 'none'
+  //   })
+  // }
   // Toggle class
   function toggleActive (e) {
     // if (this.getAttribute('data-depth') === '1') {
@@ -92,7 +92,7 @@
     this.classList.toggle('is-active')
   }
 
-  var navItems = document.querySelectorAll('.nav .nav-item')
+  // var navItems = document.querySelectorAll('.nav .nav-item')
   function revealNav (e) {
     if (nav.classList.contains('is-active')) return hideNav(e)
     document.documentElement.classList.add('is-clipped--nav')
@@ -148,7 +148,7 @@
   setTimeout(function () {
     if (document.querySelector('.is-current-page')) {
       var currentPageMenu = document.querySelector('.is-current-page')
-      var topPositon = currentPageMenu.offsetTop
+      var topPositon = currentPageMenu.offsetTop - 100
       var leftMenu = document.querySelector('.left-sidebar-menu .nav-menu')
       leftMenu.scrollTop = topPositon
     }
@@ -166,9 +166,9 @@
 
       // hide main menu for top level navigation -
 
-      if (nav.className.includes('is-current-page')) {
-        navMenuControl.style.display = 'none'
-      }
+      // if (nav.className.includes('is-current-page')) {
+      //   navMenuControl.style.display = 'none'
+      // }
 
       // hide in second level menu
       if (nav.className.includes('is-current-path')) {
diff --git a/src/partials/main.hbs b/src/partials/main.hbs
@@ -16,7 +16,7 @@
 {{/with}}
 {{/unless}}
 <div class="article-header">
-{{> nav-control}}
+{{!-- {{> nav-control}} --}}
 {{> crumbs}}
 </div>
 {{> article}}
diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs
@@ -2,10 +2,9 @@
 {{#each navigation}}
 {{#if (eq ../crumbAtLevel this)}}
 {{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2 or eq ../crumbLevel 3)}}
-<div class="main-nav-parent new " data-depth="{{../level}}">
-<span class="back-to-menu"><i class="fas fa-chevron-left"></i> Main Menu </span>
-{{!-- <span class="nav-text">{{{./content}}}</span> --}}
-</div>
+{{!-- <div class="main-nav-parent new " data-depth="{{../level}}"><span class="back-to-menu"><i class="fas fa-chevron-left"></i> Main Menu </span>
+
+</div> --}}
 {{/if}}
 {{/if}}
 {{/each}}
diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs
@@ -46,7 +46,7 @@
 </div>
 <div class="frame-body">
 <h4 class="title"><span class="">{{{page.component.title}}}</span></h4>
-<a class="navbar-item component" href="{{relativize page.componentVersion.url}}">{{#unless (eq page.componentVersion.displayVersion 'master')}} <span class="version">{{page.componentVersion.displayVersion}}</span>{{/unless}}</a>
+<a class="frame-link component" href="{{relativize page.componentVersion.url}}">{{#unless (eq page.componentVersion.displayVersion 'master')}} <span class="version">{{page.componentVersion.displayVersion}}</span>{{/unless}}</a>
 </div>
 </div>
 {{/if}}

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,6 @@ aside.toc.sidebar {`
`59`	`59`
`60`	`60`	`@media screen and (max-width: 767px) {`
`61`	`61`	`div.body {`
`62`		`- margin-top: 3.9rem;`
	`62`	`+ margin-top: 4.2rem;`
`63`	`63`	`}`
`64`	`64`	`}`