aside menu current page highlight (#80)

* aside menu current page highlight

* fixex children highlight and changed bold to color

* add page var check

* improvements

* Update layout.twig

src/frontend/styles/components/aside.pcss

@@ -58,6 +58,10 @@
       }
     }
   }
+
+  &__current {
+    color: var(--color-page-active) !important;
+  }
 }
 
 .docs-aside-toggler {

src/frontend/styles/vars.pcss

@@ -5,6 +5,7 @@
   --color-link-active: #2071cc;
   --color-button-danger: #ff5159;
   --color-bg-light: #f8f7fa;
+  --color-page-active: #ff1767;
 
   /**
    * Site layout sizes

src/views/components/aside.twig

@@ -4,7 +4,12 @@
 <div class="docs-aside">
     {% for firstLevelPage in menu %}
       <section class="docs-aside__section">
-        <a class="docs-aside__section-title"
+        <a
+          {% if page is defined and page._id == firstLevelPage._id%}
+            class="docs-aside__section-title docs-aside__current"
+          {% else %}
+            class="docs-aside__section-title"
+          {% endif %}
           {% if firstLevelPage.uri %}
             href="/{{ firstLevelPage.uri }}"
           {% else %}
@@ -17,6 +22,9 @@
             {% for child in firstLevelPage.children %}
               <li>
                 <a
+                {% if page is defined and page._id == child._id %}
+                  class="docs-aside__current"
+                {% endif %}
                 {% if child.uri %}
                   href="/{{ child.uri }}"
                 {% else %}