Changing Sidebar Style Changes (github#6391)

gracepark · web-flow · commit 2f832b687836 · 2021-05-13T17:47:31.000Z
This PR is updating the sidebar so that the current active page sidebar is viewable via bold and the marker.
diff --git a/includes/sidebar-specific-product.html b/includes/sidebar-specific-product.html
@@ -62,13 +62,13 @@
       </ul>
       <!-- some categories have no maptopics, only articles -->
       {% else %}
-      <ul class="sidebar-articles list-style-none">
+      <ul class="sidebar-articles my-2">
         {% for article in category[1].articles %}
         {% unless article[1].hidden %}
         {% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
         {% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
         <li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
-          <a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
+          <a href="{{fullPathToArticle}}" class="pl-6 pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
         </li>
         {% endunless %}
         {% endfor %}
diff --git a/stylesheets/sidebar.scss b/stylesheets/sidebar.scss
@@ -37,28 +37,30 @@
   // as the browsers are still working on supporting that combination
 }
 
-.sidebar-maptopic {
-  .sidebar-article {
-    position: relative;
+.sidebar-article {
+  position: relative;
 
-    &::before {
-      content: "";
-      position: absolute;
-      left: $spacer-4;
-      height: 100%;
-      border-left: 1px solid var(--color-text-primary);
-      width: 1px;
-      top: 0;
-    }
+  &::before {
+    content: "";
+    position: absolute;
+    left: $spacer-4;
+    height: 100%;
+    border-left: 1px solid var(--color-text-primary);
+    width: 1px;
+    top: 0;
+  }
 
-    &.active {
-      &::before {
-        border-left: 3px solid var(--color-text-primary);
-      }
+  &.active {
+    &::before {
+      border-left: 3px solid var(--color-text-primary);
     }
   }
 }
 
+.is-current-page > a {
+  font-weight: bolder;
+}
+
 // only display child lists of active elements in sidebar
 .sidebar-product.active > ul,
 .sidebar-category.active > ul,
