Estruturação do Projeto para ser uma SPA (#256)

* finish service routes

remove codes

* chore: changed pt-br to english

* style: add eof package.json

* feat: change home folder to pages

* feat: change page petRegisterPage story  structure imports

* fix: change index directory to pages/

* fix: resolve conflict changes sidemenu

* refactor: change directories name of SPA structure

* refactor: refactor in pages and components for nomenclature correct

* refactor: moving Utils for PetDexApp directory

---------

Co-authored-by: JonasGz <[email protected]>

src/layouts/PetDexApp/components/Navigation/index.js

@@ -0,0 +1,36 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+import petUrl from '../../../../images/pet-dex.svg';
+import avatarUrl from './images/avatar.svg';
+import bellUrl from './images/bell.svg';
+import exitUrl from './images/exit.svg';
+import menuUrl from './images/menu.svg';
+
+const html = `
+  <div class="navigation">
+    <figure>
+      <img class="navigation__logo" src="${petUrl}" alt="pet-dex logo" />
+    </figure>
+    <div class="navigation__icons">
+      <figure data-select="hamburger-menu" class="navigation__icon-container navigation__icon-container--menu">
+        <img class="navigation__icon" src="${menuUrl}" alt="menu" />
+      </figure>
+      <figure class="navigation__icon-container navigation__icon-container--bell">
+        <img class="navigation__icon" src="${bellUrl}" alt="notifications" />
+      </figure>
+      <figure class="navigation__icon-container navigation__icon-container--avatar">
+        <img class="navigation__icon" src="${avatarUrl}" alt="user avatar" />
+      </figure>
+      <figure class="navigation__icon-container navigation__icon-container--exit">
+        <img class="navigation__icon" src="${exitUrl}" alt="exit button" />
+      </figure>
+    </div>
+  </div>
+`;
+
+export default function Navigation() {
+  Component.call(this, { html });
+}
+
+Navigation.prototype = Object.assign(Navigation.prototype, Component.prototype);

src/layouts/PetDexApp/components/Navigation/index.scss

@@ -0,0 +1,57 @@
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.navigation {
+  width: 100%;
+
+  display: flex;
+
+  align-items: center;
+  justify-content: space-between;
+
+  padding-inline: 2rem;
+
+  &__icons {
+    display: flex;
+
+    gap: 2.4rem;
+  }
+
+  &__icon-container {
+    width: 4rem;
+    height: 4rem;
+
+    display: grid;
+
+    place-items: center;
+
+    &--menu {
+      display: grid;
+    }
+
+    &--avatar,
+    &--bell,
+    &--exit {
+      display: none;
+    }
+  }
+}
+
+@include breakpoints.from1024 {
+  .navigation {
+    &__icon-container {
+      &--menu {
+        display: none;
+      }
+
+      &--avatar,
+      &--bell,
+      &--exit {
+        display: grid;
+      }
+    }
+
+    &__logo {
+      display: none;
+    }
+  }
+}

src/layouts/PetDexApp/components/SideMenu/index.js

@@ -0,0 +1,50 @@
+import { Component } from 'pet-dex-utilities';
+import petUrl from '../../../../images/pet-dex.svg';
+import configuracoes from './images/configuracoes.svg';
+import conta from './images/conta.svg';
+import doacoes from './images/doacoes.svg';
+import exit from './images/exit.svg';
+import exitMenu from './images/exitmenu.svg';
+import meusPets from './images/meuspets.svg';
+import notificacoes from './images/notifications.svg';
+import perfil from './images/perfil.svg';
+import petdex from './images/petdex.svg';
+import './index.scss';
+
+const html = `
+  <nav class="side-menu-nav">
+      <figure class="side-menu-nav__logo-container">
+        <img class="side-menu-nav__logo" src="${petUrl}" alt="pet-dex logo" />
+      </figure>
+      <div class="side-menu-nav__icons">
+        <a href="#"><img class="side-menu-nav__notifications" src="${notificacoes}" alt="notificacoes"></a>
+        <a href="#"><img class="side-menu-nav__perfil" src="${perfil}" alt="meu perfil"></a>
+        <a href="#"><img class="side-menu-nav__exit" src="${exit}" alt="sair"></a>
+      </div>
+      <img data-select="exitMenu" class="side-menu-nav__exitmenu" src="${exitMenu}" alt="Fechar Menu">
+    </nav>
+    <div class="side-menu-content">
+      <div class="side-menu-content__line"></div>
+      <div class="side-menu-content__yourpet">
+        <h2 class="side-menu-content__title-yourpet">Seu Pet</h2>
+      </div>
+      <div class="side-menu-content__line"></div>
+      <div class="side-menu-content__itens" alt="itens-um">
+        <ul class="side-menu-content__ul" data-select="menuitens">
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/app/pets"><img src="${meusPets}" alt="Meus Pets">Meus Pets</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/app/pet-dex"><img src="${petdex}" alt="Pet Dex">Pet Dex</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/app/donates"><img src="${doacoes}" alt="Doacoes">Doações</a></li>
+          <hr class="side-menu-content__lineinside"/>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/app/account"><img src="${conta}" alt="conta">Conta</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/app/settings"><img src="${configuracoes}" alt="configuracoes">Configurações</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+`;
+
+export default function SideMenu() {
+  Component.call(this, { html });
+}
+
+SideMenu.prototype = Object.assign(SideMenu.prototype, Component.prototype);

src/layouts/PetDexApp/components/SideMenu/index.scss

@@ -0,0 +1,147 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/fonts.scss' as fonts;
+
+.side-menu-nav {
+  display: flex;
+
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 2rem;
+
+  &__logo-container {
+    display: none;
+    padding-block: 4rem 2rem;
+
+    text-align: center;
+  }
+
+  &__logo {
+    max-width: 100%;
+  }
+
+  &__icons {
+    display: flex;
+    gap: 2.4rem;
+
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__notifications {
+    width: 1.6rem;
+    height: 1.95rem;
+  }
+
+  &__perfil {
+    width: 4.3rem;
+    height: 4.3rem;
+
+    border-radius: 100%;
+  }
+
+  &__exit {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &__exitmenu {
+    width: 2.9rem;
+    height: 2.4rem;
+  }
+}
+
+.side-menu-content {
+  width: 28rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 4.2rem;
+
+  margin: 0 auto;
+
+  &__line {
+    width: 100%;
+
+    border: 0.1rem solid colors.$secondary100;
+  }
+
+  &__lineinside {
+    width: 100%;
+
+    margin: 4.2rem 0;
+    border: 0.1rem solid colors.$secondary100;
+  }
+
+  &__yourpet {
+    font-family: fonts.$primaryFont;
+  }
+
+  &__title-yourpet {
+    color: colors.$secondary100;
+    font-size: 1.6rem;
+    font-weight: fonts.$bold;
+    font-style: fonts.$normal;
+  }
+
+  &__itens {
+    font-family: fonts.$primaryFont;
+    color: colors.$secondary100;
+    font-size: 1.6rem;
+  }
+
+  &__ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+
+    align-items: flex-start;
+  }
+
+  &__menuitens {
+    display: flex;
+    gap: 1.2rem;
+
+    align-items: center;
+
+    color: colors.$secondary100;
+    text-decoration: none;
+
+    padding: 1.2rem;
+
+    &--active {
+      background-color: rgb(0, 29, 49);
+      border-radius: 2rem;
+    }
+  }
+}
+
+@include breakpoints.from1024() {
+  .side-menu-nav {
+    &__logo-container {
+      display: block;
+
+      margin: 0 auto;
+    }
+
+    &__icons {
+      display: none;
+    }
+
+    &__exitmenu {
+      display: none;
+    }
+  }
+
+  .side-menu-content {
+    width: 70%;
+
+    &__menuitens {
+      transition: 0.3s;
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+}

src/layouts/PetDexApp/pages/NoPetRegirested/index.js

@@ -0,0 +1,38 @@
+import { Component } from 'pet-dex-utilities';
+import Button from '../../../../components/Button';
+import petUrl from './images/no-pet-regirested-page.png';
+import './index.scss';
+
+const html = `
+  <div data-select="container" class="no-pet-regirested-page">
+    <div class="no-pet-regirested-page__content">
+      <div class="no-pet-regirested-page__description">
+        <h1 class="no-pet-regirested-page__title">Você ainda não tem nenhum pet cadastrado</h1>
+        <p class="no-pet-regirested-page__hint">Crie o perfil do seu pet e deixe o nosso site com o focinho do seu filhote!</p>
+      </div>
+      <img class="no-pet-regirested-page__image" src="${petUrl}" alt="dog in an smart phone" />
+    </div>
+  </div>;
+`;
+
+export default function NoPetRegirested() {
+  Component.call(this, { html });
+
+  const $container = this.selected.get('container');
+
+  this.button = new Button({
+    text: 'Cadastrar pet',
+    isFullWidth: true,
+    isDisabled: false,
+  });
+
+  this.button.selected
+    .get('button')
+    .classList.add('no-pet-regirested-page__button');
+  this.button.mount($container);
+}
+
+NoPetRegirested.prototype = Object.assign(
+  NoPetRegirested.prototype,
+  Component.prototype,
+);