4
4
<p class =" slideMenu__subTitle" >Carbon Design in VueJS</p >
5
5
<search ></search >
6
6
<ca-accordion >
7
- <div class =" slideMenu__item" ><router-link to =" /GetStarted" >Get Started</router-link ></div >
7
+ <div class =" slideMenu__item" ><router-link to =" /GetStarted" active-class = " activeLink " class = " inactiveLink " >Get Started</router-link ></div >
8
8
<ca-accordion-item title =" Components" active >
9
9
<ul class =" slideMenu__item__list" >
10
- <li v-for =" page in pages" :key =" page" ><router-link :to =" '/component/'+page" >{{page}}</router-link ></li >
10
+ <li v-for =" page in pages" :key =" page" ><router-link :to =" '/component/'+page" active-class = " activeLink " class = " inactiveLink " >{{page}}</router-link ></li >
11
11
</ul >
12
12
</ca-accordion-item >
13
- <div class =" slideMenu__item" ><router-link to =" /componentStatus" >Components Status</router-link ></div >
13
+ <div class =" slideMenu__item" ><router-link to =" /componentStatus" active-class = " activeLink " class = " inactiveLink " >Components Status</router-link ></div >
14
14
</ca-accordion >
15
15
</div >
16
16
</template >
@@ -37,6 +37,16 @@ export default {
37
37
</script >
38
38
39
39
<style scoped>
40
+ .inactiveLink {
41
+ text-decoration :none ;
42
+ }
43
+
44
+ .activeLink {
45
+ font-weight :bold ;
46
+ text-decoration :none ;
47
+ color :#3057d5
48
+ }
49
+
40
50
.slideMenu__title {
41
51
font-size :20px ;
42
52
}