From e45efb47dbc77b928236ebefebaeef112fd7ddbd Mon Sep 17 00:00:00 2001
From: jedrzejchalubek <jedrzej.chalubek@gmail.com>
Date: Wed, 26 Feb 2020 15:43:38 +0100
Subject: [PATCH] feat(): Adjust menu active state indicators

---
 src/_includes/menu/menu-item.html    |  4 ++--
 src/_sass/components/_menu-item.scss | 21 ++++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/_includes/menu/menu-item.html b/src/_includes/menu/menu-item.html
index 829ac71ceb..a177e0ea99 100644
--- a/src/_includes/menu/menu-item.html
+++ b/src/_includes/menu/menu-item.html
@@ -29,8 +29,8 @@
         {% assign currentSectionPage = page.path | downcase | split: "/" %}
         {% assign currentSectionPath = item.slug | downcase %}
         {% capture currentSectionSlug %}{{ currentSectionPage[0] | downcase }}/{{ currentSectionPage[1] | downcase }}{% endcapture %}
-
-        <li class="menu-item menu-item--gray {% if currentPage == currentPath or currentSectionSlug == currentSectionPath %}menu-item--active{% endif %}" data-accordion data-class-active="menu-item--active">
+        
+        <li class="menu-item {% if item.section_title %}menu-item--gray{% else %}menu-item--green{% endif %} {% if currentPage == currentPath or currentSectionSlug == currentSectionPath %}menu-item--active{% endif %}" data-accordion data-class-active="menu-item--active">
           {% if item.path %}
             {% assign menuLink = site.baseurl | append: item.path  | append: "/" %}
             {% if item.path contains "http://" or  item.path contains "https://"%}
diff --git a/src/_sass/components/_menu-item.scss b/src/_sass/components/_menu-item.scss
index 9ecb05f93b..7759fa4f5d 100644
--- a/src/_sass/components/_menu-item.scss
+++ b/src/_sass/components/_menu-item.scss
@@ -101,9 +101,9 @@
         content: "";
         display: block;
         position: absolute;
-        top: 0;
-        left: -18px;
-        height: 100%;
+        top: -8px;
+        left: -19px;
+        height: calc(100% + 16px);
         width: 2px;
         background-color: color(primary);
       }
@@ -116,9 +116,9 @@
         content: "";
         display: block;
         position: absolute;
-        top: 0;
-        left: -26px;
-        height: 100%;
+        top: -8px;
+        left: -25px;
+        height: calc(100% + 16px);
         width: 2px;
         background-color: color(primary);
       }
@@ -149,7 +149,14 @@
 
     &#{$this}--gray {
       & > #{$this}__link {
-        color: rgba(color(gray-dark), 0.8);
+        color: #435A6F;
+        font-weight: 500;
+      }
+    }
+
+    &#{$this}--green {
+      & > #{$this}__link {
+        color: color(primary);
         font-weight: 500;
       }
     }