Level one menu Style fixes

Author: rakeshAlgo

src/css/component-frame.css

@@ -1,9 +1,10 @@
 .component-frame {
   /* rgba(87, 160, 255, 1) */
-  /* background: rgba(var(--color-blue-rgb), 0.07); */
+  background: var(--color-brand-gray6);
   padding: 12px 30px 12px 15px;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .frame-body {
@@ -13,7 +14,8 @@
 
 .frame-body .title {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
   font-weight: var(--weight-semibold);
   color: var(--color-brand-gray1);
 }

src/css/contributor.css

@@ -1,5 +1,5 @@
 .contributor-list-box {
-  display: flex;
+  /* display: flex; */
   align-items: center;
   flex-wrap: wrap;
   margin: 15px 0 0;

src/css/main.css

@@ -133,6 +133,7 @@ main p {
 
   .article-header {
     margin-bottom: 0;
+    margin-top: var(--base-space);
     align-items: flex-start;
   }
 }

src/css/nav.css

@@ -2,7 +2,7 @@
   background-color: var(--color-brand-gray7);
   position: fixed;
   width: inherit;
-  overflow-y: scroll;
+  overflow-y: auto;
   font-size: 1rem;
   line-height: 24px;
 }
@@ -23,6 +23,8 @@
     margin-bottom: 1.5rem;
     height: var(--height-nav);
     z-index: var(--z-index-nav);
+    border-left: 2px solid var(--color-brand-gray7);
+    border-right: 2px solid var(--color-brand-gray7);
   }
 }
 
@@ -43,18 +45,21 @@
   display: flex;
   word-break: break-all;
   align-items: center;
+  font-size: 20px;
+  line-height: 28px;
+  font-family: "Open Sans", sans-serif;
+  color: var(--color-brand-gray1);
+  font-weight: var(--weight-semibold);
 }
 
 .nav-line .fas {
   color: var(--color-brand-gray3);
-}
-
-.nav-item.is-active .nav-line[data-depth="0"] .fas {
-  color: var(--color-brand-blue);
+  display: none;
 }
 
 .nav-menu .nav-text {
-  margin-left: 0.75rem;
+  /* margin-left: 0.75rem; */
+  margin-left: 0;
 }
 
 .nav-menu a.nav-link {
@@ -73,6 +78,15 @@
   padding: 0;
 }
 
+.nav-menu .nav-list .nav-list .nav-line[data-depth="1"] {
+  padding-left: 1.65rem;
+}
+
+.nav-menu .nav-list li a {
+  font-size: 0.875rem;
+  font-weight: var(--weight-normal);
+}
+
 .nav-menu > .nav-list {
   /* margin: 1rem 1.875rem; */
   margin: 1.5rem 0;
@@ -84,8 +98,8 @@
   margin-bottom: 0.625rem;
   */
   margin-bottom: 0.75rem;
-  margin-left: 3.6875rem;
-  border-left: 1px solid var(--color-brand-gray5);
+  /* margin-left: 1rem; */
+  /* border-left: 1px solid var(--color-brand-gray5); */
 }
 
 /* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-list {
@@ -123,25 +137,44 @@
 } */
 
 .nav-line[data-depth="0"] {
-  padding: 0.625rem 1.875rem;
+  padding: 0.625rem 1.25rem;
   color: var(--brand-color-gray2);
 }
 
-.nav-item.is-active .nav-line[data-depth="0"] {
-  background: rgba(var(--color-gray-rgb), 0.06);
+/* .nav-item.is-active .nav-line[data-depth="0"] {
+  background: #4287D60F;
+  margin-bottom: 0.625rem;
+  border-right: 4px solid rgba(66, 135, 214, 0.44);
+} */
+
+/* .nav-item.is-active > .nav-line[data-depth="0"], */
+.nav-item.open > .nav-line[data-depth="0"],
+.nav-item.is-current-path.is-active-depth-2:not(.is-active)  > .nav-line,
+.nav-item.is-current-page > .nav-line {
+  background: #4287d60f;
   margin-bottom: 0.625rem;
+  border-right: 4px solid rgba(66, 135, 214, 0.44);
 }
 
 .nav-item.is-active .nav-line[data-depth="0"] .nav-text {
-  color: var(--color-brand-blue);
+  /* color: var(--color-brand-blue); */
   font-weight: var(--weight-semibold);
 }
 
+.nav-item.is-active .nav-line[data-depth="0"] .fas {
+  color: var(--color-brand-blue);
+}
+
 .nav-menu .nav-item.is-current-page > .nav-line > a.nav-link {
   color: var(--color-text);
   font-weight: var(--weight-medium);
 }
 
+.nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link {
+  /* color: var(--color-brand-blue); */
+  font-weight: var(--weight-semibold);
+}
+
 .nav-menu .nav-toggle {
   background: none;
   border: 0;
@@ -190,24 +223,29 @@ html.is-clipped--nav {
 }
 
 .main-nav-parent {
-  font-size: 16px;
+  font-size: var(--font-small);
   line-height: 20px;
-  color: var(--color-brand-gray2);
+  color: var(--color-brand-blue);
   display: flex;
-  margin: 10px 0;
+  margin: 15px 0 -20px;
   text-decoration: none;
   align-items: center;
   flex-wrap: wrap;
-  background: rgba(var(--color-blue-rgb), 0.06);
+  /* background: rgba(var(--color-blue-rgb), 0.06);
   padding: 10px 0;
   border-top: 1px solid var(--color-brand-gray5);
-  border-bottom: 2px solid var(--color-brand-gray5);
+  border-bottom: 2px solid var(--color-brand-gray5); */
 }
 
 .main-nav-parent .back-to-menu {
-  padding: 0 40px;
+  padding: 0 22px;
   width: 100%;
-  background: url(../img/back-arrow.png) no-repeat 20px center;
+  /* background: url(../img/back-arrow.png) no-repeat 20px center; */
+  cursor: pointer;
+}
+
+.main-nav-parent .back-to-menu .fas{
+  margin-right: 8px;
 }
 
 .main-nav-parent .nav-text {
@@ -237,12 +275,16 @@ html.is-clipped--nav {
 .nav-line[data-depth="2"] {
   display: flex;
   justify-content: flex-end;
-  padding: 0.625rem 1rem;
+  padding: 0.625rem 1.375rem;
   flex-direction: row-reverse;
 }
 
 .nav-line[data-depth="1"] .nav-link {
-  color: var(--color-brand-gray4);
+  /* color: var(--color-brand-gray4); */
+  color: var(--color-brand-black);
+  font-size: var(--font-base);
+  line-height: var(--line-height-base);
+  font-weight: var(--weight-semibold);
 }
 
 .is-active[data-depth='0'] .is-active > .nav-line[data-depth="1"] {
@@ -258,12 +300,13 @@ html.is-clipped--nav {
   transform: rotate(90deg);
 } */
 
-.nav-menu .nav-item.is-active[data-depth='1'] .nav-list {
+/* .nav-menu .nav-item.is-active[data-depth='1'] .nav-list {
   margin-left: 1.5rem;
-}
+} */
 
 .nav-menu .nav-item[data-depth='2'] {
-  margin: 0 8px 8px 0;
+  /* margin: 0px 0px 8px 0px; */
+  margin-bottom: 8px;
 }
 
 .nav-menu .nav-item.is-active[data-depth='1'] > .nav-line .nav-link {
@@ -274,11 +317,6 @@ html.is-clipped--nav {
   color: var(--color-brand-gray1);
 }
 
-.nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link {
-  color: var(--color-brand-blue);
-  font-weight: 900;
-}
-
 .nav-item[data-depth='1'] .in-toggle {
   background: url(../img/back-arrow.png) no-repeat center center;
   transform: rotate(180deg);

src/css/vars.css

@@ -64,8 +64,8 @@
   --hljs-string: #295d1e;
   --hljs-number: #0711ba;
   /* --height-navbar: 4rem; */
-  --height-spacer: 1.3rem;
-  --height-navbar: 6.09rem;
+  --height-spacer: 1rem;
+  --height-navbar: 6rem;
   --height-to-body: calc(var(--height-navbar) + var(--height-spacer));
   --height-min-body: calc(100vh - var(--height-to-body));
   --height-nav: calc(var(--height-min-body) + var(--height-spacer));
@@ -97,6 +97,7 @@
   /* New  design font style */
 
   --font-base: 1rem; /* ~16px */
+  --font-small: 0.875rem; /* ~14px */
   --labels-font-size: 0.75rem; /* ~12px */
   --labels-line-height: 1;
 

src/js/01-nav.js

@@ -97,6 +97,7 @@
         otherNavs[i].classList.add('is-inactive')
       }
     }
+    this.classList.toggle('open')
     this.classList.toggle('is-active')
   }
 

src/js/11-page-customize.js

@@ -1,17 +1,14 @@
-;
-(function ($) {
-'use strict'
-// for label edition/statuses
-var $labels = $('.edition').find('a')
-
-console.log($labels.length)
-
-for (var i = 0; i < $labels.length; i++) {
+; (function ($) {
+  'use strict'
+  // for label edition/statuses
+  var $labels = $('.edition').find('a')
+  console.log($labels.length)
+  for (var i = 0; i < $labels.length; i++) {
     console.log(i, 445, $labels[i])
     if ($labels[i].text.toLocaleLowerCase().indexOf('community') !== -1) {
-        $labels[i].parentNode.classList.add('page-edition')
+      $labels[i].parentNode.classList.add('page-edition')
     }
-}
+  }
 
-    /*eslint-env jquery*/
+  /*eslint-env jquery*/
 })(jQuery)

src/partials/nav-tree.hbs

@@ -1,21 +1,21 @@
 {{#if navigation}}
   {{#each navigation}}
     {{#if (eq ../crumbAtLevel this)}}
-      {{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2)}} 
+      {{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2)}}
           <div class="main-nav-parent new">
-            <span class="back-to-menu">Main Menu </span>
+            <span class="back-to-menu"><i class="fas fa-chevron-left"></i> Main Menu </span>
             {{!-- <span class="nav-text">{{{./content}}}</span> --}}
           </div>
       {{/if}}
     {{/if}}
   {{/each}}
   <ul class="nav-list">
     {{!-- {{log ../crumbAtLevel this 'log output'}} --}}
-    {{#each navigation}} 
+    {{#each navigation}}
       <li class="nav-item{{#if (eq ../crumbAtLevel this)}}
         {{~#if (eq this (last @root.page.breadcrumbs))}} is-current-page{{~else}} is-current-path{{/if}} is-active
         {{~else if (eq ../level 0)}} {{!--is-active--}} is-inactive{{/if}}{{#if (eq ../crumbAtLevel this (and eq ../level 2))}} is-active-depth-2 {{/if}} " data-depth="{{../level}}">
-          
+
           {{#if ./content}}
           <span class="nav-line "  data-depth="{{../level}}">
             {{#if ./items}}