apply root class element

Author: cwaring

docs/.vuepress/theme/components/Page.vue

@@ -56,18 +56,30 @@ export default {
   },
   methods: {
     smoothScroll: function () {
-      var root = document.getElementsByTagName('html')[0]
+      const root = document.getElementsByTagName('html')[0]
       // only enable smooth-scrolling on pages shorter that 15000 px
       return root.scrollHeight < 15000
         ? root.classList.add('smooth-scroll')
         : root.classList.remove('smooth-scroll')
+    },
+    htmlRouteClass: function () {
+      // patch to apply a root class for styling elements
+      const root = document.getElementsByTagName('html')[0]
+      const parts = this.$page.path.split('/')
+      const index = ['introduction', 'how-to', 'project', 'community']
+      index.includes(parts[1])
+        ? root.classList.add('route-index')
+        : root.classList.remove('route-index')
     }
   },
+
   mounted: function () {
     this.smoothScroll()
+    this.htmlRouteClass()
   },
   updated: function () {
     this.smoothScroll()
+    this.htmlRouteClass()
   }
 }
 </script>

docs/.vuepress/theme/styles/sidebar.styl

@@ -67,6 +67,15 @@ header.navbar .nav-links {
 	}
 }
 
+// style selected sidebar item based on route class
+html.route-index {
+	.sidebar .nav-links .nav-item:first-child {
+		a.nav-link {
+			color: $accentColor;
+		}
+	}
+}
+
 @media (min-width: $MQMobile) {
 	aside.sidebar {
 		display: flex;
@@ -100,10 +109,6 @@ header.navbar .nav-links {
 
 		.nav-links, .nav-links a {
 			display: block;
-
-			&:hover, &.router-link-active {
-				color: $textColor;
-			}
 		}
 
 		.nav-item > a:not(.external) {