13
13
<div class =" navbar-iconWrapper hairlineWrapper no-hover" >
14
14
<img class =" navbar-icon hairline" src =" @/assets/images/navbar/hairline.svg" />
15
15
</div >
16
- <div class =" navbar-buttonWrapper desktop" @click =" openPlan" data-cyId =" openPlan" >
16
+ <div class =" navbar-buttonWrapper desktop" @click =" openPlan" :class = " { 'active': activePage === 'plan' } " data-cyId =" openPlan" >
17
17
<button class =" navbar-iconWrapper plan-icon full-opacity-on-hover" />
18
18
<div class =" navbar-iconText" >
19
19
<span >Plan</span >
20
20
</div >
21
21
</div >
22
- <div class =" navbar-buttonWrapper desktop" @click =" openTools" data-cyId =" openTools" >
22
+ <div class =" navbar-buttonWrapper desktop" @click =" openTools" :class = " { 'active': activePage === 'tools' } " data-cyId =" openTools" >
23
23
<button class =" navbar-iconWrapper tools-icon full-opacity-on-hover" />
24
24
<div class =" navbar-iconText" >
25
25
<span >Tools</span >
34
34
<div
35
35
class =" navbar-buttonWrapper desktop"
36
36
@click =" openCollection"
37
+ :class =" { 'active': activePage === 'collection' }"
37
38
data-cyId =" openCollection"
38
39
>
39
40
<button class =" navbar-iconWrapper saved-courses-icon full-opacity-on-hover" />
40
41
<div class =" navbar-iconText" >
41
42
<span >Saved</span >
42
43
</div >
43
44
</div >
44
- <div class =" navbar-buttonWrapper desktop" >
45
+ <div class =" navbar-buttonWrapper desktop" :class = " { 'active': activePage === 'scheduleGenerate' } " >
45
46
<button
46
47
id =" schedule-generator"
47
48
class =" navbar-iconWrapper schedule-builder-icon full-opacity-on-hover"
@@ -132,6 +133,7 @@ export default defineComponent({
132
133
],
133
134
data() {
134
135
return {
136
+ activePage: " plan" ,
135
137
menuOpen: false ,
136
138
};
137
139
},
@@ -162,14 +164,17 @@ export default defineComponent({
162
164
},
163
165
openCollection() {
164
166
this .menuOpen = false ;
167
+ this .activePage = " collection" ;
165
168
this .$emit (' openCollection' );
166
169
},
167
170
openPlan() {
168
171
this .menuOpen = false ;
172
+ this .activePage = " plan" ;
169
173
this .$emit (' openPlan' );
170
174
},
171
175
openTools() {
172
176
this .menuOpen = false ;
177
+ this .activePage = " tools" ;
173
178
this .$emit (' openTools' );
174
179
},
175
180
editProfile() {
@@ -181,6 +186,7 @@ export default defineComponent({
181
186
},
182
187
openScheduleGenerate() {
183
188
this .menuOpen = false ;
189
+ this .activePage = " scheduleGenerate" ;
184
190
this .$emit (' openScheduleGenerate' );
185
191
},
186
192
toggleRequirementsMobile() {
@@ -227,9 +233,28 @@ $mobile-navbar-height: 4.5rem;
227
233
& -buttonWrapper {
228
234
cursor : pointer ;
229
235
margin-bottom : 1.5rem ;
236
+ & .active {
237
+ .navbar-iconText {
238
+ color : #0d7acb ;
239
+ }
240
+ .plan-icon {
241
+ background-image : url (' @/assets/images/navbar/planIconBlue.svg' );
242
+ }
243
+ .tools-icon {
244
+ background-image : url (' @/assets/images/navbar/toolboxIconBlue.svg' );
245
+ }
246
+ .profile-icon {
247
+ background-image : url (' @/assets/images/navbar/profileIconBlue.svg' );
248
+ }
249
+ .saved-courses-icon {
250
+ background-image : url (' @/assets/images/navbar/savedCoursesIconBlue.svg' );
251
+ }
252
+ .schedule-builder-icon {
253
+ background-image : url (' @/assets/images/navbar/scheduleBuilderIconBlue.svg' );
254
+ }
255
+ }
230
256
& :hover ,
231
- & :focus ,
232
- & :active {
257
+ & :focus {
233
258
.navbar-iconText {
234
259
color : #0d7acb ;
235
260
}
0 commit comments