Skip to content

Commit fc414e9

Browse files
committed
implement filled active page icons for navbar
1 parent 018c1b8 commit fc414e9

File tree

1 file changed

+30
-5
lines changed

1 file changed

+30
-5
lines changed

src/components/NavBar.vue

+30-5
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313
<div class="navbar-iconWrapper hairlineWrapper no-hover">
1414
<img class="navbar-icon hairline" src="@/assets/images/navbar/hairline.svg" />
1515
</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">
1717
<button class="navbar-iconWrapper plan-icon full-opacity-on-hover" />
1818
<div class="navbar-iconText">
1919
<span>Plan</span>
2020
</div>
2121
</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">
2323
<button class="navbar-iconWrapper tools-icon full-opacity-on-hover" />
2424
<div class="navbar-iconText">
2525
<span>Tools</span>
@@ -34,14 +34,15 @@
3434
<div
3535
class="navbar-buttonWrapper desktop"
3636
@click="openCollection"
37+
:class="{ 'active': activePage === 'collection' }"
3738
data-cyId="openCollection"
3839
>
3940
<button class="navbar-iconWrapper saved-courses-icon full-opacity-on-hover" />
4041
<div class="navbar-iconText">
4142
<span>Saved</span>
4243
</div>
4344
</div>
44-
<div class="navbar-buttonWrapper desktop">
45+
<div class="navbar-buttonWrapper desktop" :class="{ 'active': activePage === 'scheduleGenerate' }">
4546
<button
4647
id="schedule-generator"
4748
class="navbar-iconWrapper schedule-builder-icon full-opacity-on-hover"
@@ -132,6 +133,7 @@ export default defineComponent({
132133
],
133134
data() {
134135
return {
136+
activePage: "plan",
135137
menuOpen: false,
136138
};
137139
},
@@ -162,14 +164,17 @@ export default defineComponent({
162164
},
163165
openCollection() {
164166
this.menuOpen = false;
167+
this.activePage = "collection";
165168
this.$emit('openCollection');
166169
},
167170
openPlan() {
168171
this.menuOpen = false;
172+
this.activePage = "plan";
169173
this.$emit('openPlan');
170174
},
171175
openTools() {
172176
this.menuOpen = false;
177+
this.activePage = "tools";
173178
this.$emit('openTools');
174179
},
175180
editProfile() {
@@ -181,6 +186,7 @@ export default defineComponent({
181186
},
182187
openScheduleGenerate() {
183188
this.menuOpen = false;
189+
this.activePage = "scheduleGenerate";
184190
this.$emit('openScheduleGenerate');
185191
},
186192
toggleRequirementsMobile() {
@@ -227,9 +233,28 @@ $mobile-navbar-height: 4.5rem;
227233
&-buttonWrapper {
228234
cursor: pointer;
229235
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+
}
230256
&:hover,
231-
&:focus,
232-
&:active {
257+
&:focus {
233258
.navbar-iconText {
234259
color: #0d7acb;
235260
}

0 commit comments

Comments
 (0)