#2748 - Composer docs navigation restyling

packages/composer-website/jekylldocs/_includes/sidebars/accordion-toc0.md

@@ -3,7 +3,7 @@
 {% if page.index-order %}
 {% capture mods %}{{ page.index-order | modulo:100 }}{% endcapture %}
 {% if mods == "0" and page.exception == nil %}
-- [<b>{{ page.title }}</b><img src="{{site.baseurl}}/assets/img/chevron-left.svg" class="caret">](..{{page.url}}.html)
+- [<b>{{ page.title }}</b><img src="{{site.baseurl}}/assets/img/Caret_SW_2.svg" class="caret">](..{{page.url}}.html)
 {% elsif mods != "0" and page.exception == nil %}
   - [{{page.title}}](..{{page.url}}.html)
 {% endif %}

packages/composer-website/jekylldocs/assets/css/grid-layout.scss

@@ -43,7 +43,7 @@ $callout: #FFD640;
     justify-items: start;
     overflow-y: scroll;
     height: 100vh;
-    background-color: #f7f2f0;
+    background-color: $white;
 
     // Scrollbar overrides
     &::-webkit-scrollbar {
@@ -113,10 +113,9 @@ $callout: #FFD640;
         background-color: $white;
         &.hide {
             height: 4rem !important;
-            background-color: #f7f2f0;
+            background-color: $white;
         }
         &:hover {
-          border-right: 0px solid $first-highlight;
           &:after {
               content: " ";
               position: absolute;
@@ -128,7 +127,7 @@ $callout: #FFD640;
         }
         &.active {
           height: auto !important;
-          border-left-color: $black;
+          border-left-color: $first-highlight;
           &:after {
               content: " ";
               position: absolute;
@@ -138,6 +137,10 @@ $callout: #FFD640;
               background-color: $first-highlight;
           }
         }
+        &.activeBorder {
+          border-right: 3px solid $first-highlight;
+          transition: none;
+        }
         a {
           padding-left: 2rem;
           padding-right: 1rem;
@@ -169,9 +172,9 @@ $callout: #FFD640;
 
           li {
             border-bottom: none;
-            border-left: 6px solid $white;
+            border-left: 3px solid $white;
             &:hover {
-              border-left: 6px solid $black;
+              border-left: 3px solid $first-highlight;
               border-right: none;
             }
           }
@@ -182,6 +185,8 @@ $callout: #FFD640;
         float: right;
         width: 13px;
         height: 13px;
+        padding: 10px;
+        margin-top: -10px;
         &.hidden {
           visibility: hidden;
         }
@@ -213,7 +218,7 @@ $callout: #FFD640;
           li {
             border-bottom: none;
             padding: 0;
-            background-color: #f7f2f0 !important;
+            background-color: $white !important;
 
             &:hover {
               border-right: none;
@@ -681,7 +686,7 @@ copy-button {
     font-size: 0.9rem;
     line-height: 30px;
     border-bottom: 2px solid transparent;
-    background-color: #f7f2f0;
+    background-color: $white;
 
     &.opened {
       max-width: 70%;

packages/composer-website/jekylldocs/assets/js/nav.js

@@ -1,5 +1,5 @@
-var openRotation = 270;
-var closeRotation = 180;
+var openRotation = 0;
+var closeRotation = 270;
 
 $(function(){
     $('a').each(function(){
@@ -14,8 +14,7 @@ $(function(){
 $(function(){
     $('.context-nav a').each(function(){
         if ($(this).prop('href') == window.location.href) {
-            $(this).parent().parent().css('background-color', 'white');
-            $(this).parent().parent().parent().css('background-color', 'white');
+            $(this).parent().parent().closest('li').addClass('activeBorder');
         }
     });
 });
@@ -29,9 +28,18 @@ $(function(){
         if ($(this).closest('li').children('ul').length == 0) {
             $(this).toggleClass('hidden');
         }
+        if (!$(this).parent().parent().parent().hasClass('active')) {
+            $(this).addClass('hidden');
+        }
     });
 });
 
+$('li').hover(function(){
+    if (!$(this).hasClass('active') && $(this).children('ul').length > 0) {
+        $(this).find('.caret').toggleClass('hidden');
+    }
+});
+
 $('.caret').click(function() {
     if ($(this).closest('li').hasClass('hide')){
         $(this).rotate(openRotation);