diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js
index c5234811..dbe6b83f 100644
--- a/src/components/PetAvatar/index.js
+++ b/src/components/PetAvatar/index.js
@@ -1,25 +1,27 @@
import { Component } from 'pet-dex-utilities';
import './index.scss';
+import { routeLocation } from 'vanilla-routing';
-const events = ['active', 'deactive'];
+const events = ['active'];
const html = `
-
+
`;
-// estudar frontend route / route parameter
-
-export default function PetAvatar({ id, title, imgSrc, imgAlt }) {
+export default function PetAvatar({ id, title, imgSrc, imgAlt } = {}) {
Component.call(this, { html, events });
- this.selected.get('pet-container').href += id;
-
+ if (id) this.setHref(id);
if (title) this.setTitle(title);
if (imgSrc) this.setImgSrc(imgSrc);
if (imgAlt) this.setImgAlt(imgAlt);
+
+ if (routeLocation().pathname === `/petperfil/${id}`) {
+ this.activate();
+ }
}
PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, {
@@ -32,7 +34,9 @@ PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, {
setImgAlt(alt) {
this.selected.get('pet-image').alt = alt;
},
- isActive() {},
+ setHref(id) {
+ this.selected.get('pet-container').href += id;
+ },
activate() {
const image = this.selected.get('pet-image');
const title = this.selected.get('pet-title');
@@ -40,11 +44,4 @@ PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, {
title.classList.add('pet-container__title--active');
this.emit('active');
},
- deactivate() {
- const image = this.selected.get('pet-image');
- const title = this.selected.get('pet-title');
- image.classList.remove('pet-container__img--active');
- title.classList.remove('pet-container__title--active');
- this.emit('deactive');
- },
});
diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss
index 6f59f8fc..3454b2ec 100644
--- a/src/components/PetAvatar/index.scss
+++ b/src/components/PetAvatar/index.scss
@@ -4,7 +4,7 @@
.pet-container {
display: flex;
flex-direction: column;
- gap: 0.6rem;
+ gap: 1rem;
align-items: center;
aspect-ratio: 1/1;
@@ -31,10 +31,11 @@
max-height: 2.2rem;
overflow: hidden;
- font-family: fonts.$secondaryFont;
+ font-family: fonts.$quaternaryFont;
color: colors.$gray200;
text-align: center;
+ font-size: 1.4rem;
font-weight: fonts.$regular;
&--active {
diff --git a/src/home/components/SideMenu/index.js b/src/home/components/SideMenu/index.js
index f8c4e755..6f463c3d 100644
--- a/src/home/components/SideMenu/index.js
+++ b/src/home/components/SideMenu/index.js
@@ -10,6 +10,7 @@ import notificacoes from './images/notifications.svg';
import perfil from './images/perfil.svg';
import exitMenu from './images/exitmenu.svg';
import './index.scss';
+import PetAvatar from '../../../components/PetAvatar';
const html = `