finish service routes

package.json

@@ -65,6 +65,7 @@
     "dayjs": "^1.11.10",
     "pet-dex-utilities": "^1.0.1",
     "reset-css": "^5.0.2",
+    "vanilla-routing": "0.0.4",
     "vite": "^5.0.12",
     "vite-plugin-pwa": "^0.19.0"
   },

src/home/components/Navigation/index.js

@@ -19,7 +19,7 @@ const html = `
       <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">
+      <figure data-select='avatar' 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">

src/home/components/SideMenu/index.js

@@ -31,12 +31,12 @@ const html = `
       <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 class="side-menu-content__menuitens" href="#"><img src="${meusPets}" alt="Meus Pets">Meus Pets</a></li>
-          <li><a class="side-menu-content__menuitens" href="#"><img src="${petdex}" alt="Pet Dex">Pet Dex</a></li>
-          <li><a class="side-menu-content__menuitens" href="#"><img src="${doacoes}" alt="Doacoes">Doações</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/meuspets"><img src="${meusPets}" alt="Meus Pets">Meus Pets</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/petdex"><img src="${petdex}" alt="Pet Dex">Pet Dex</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/doacoes"><img src="${doacoes}" alt="Doacoes">Doações</a></li>
           <hr class="side-menu-content__lineinside"/>
-          <li><a class="side-menu-content__menuitens" href="#"><img src="${conta}" alt="conta">Conta</a></li>
-          <li><a class="side-menu-content__menuitens" href="#"><img src="${configuracoes}" alt="configuracoes">Configurações</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/conta"><img src="${conta}" alt="conta">Conta</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/configuracoes"><img src="${configuracoes}" alt="configuracoes">Configurações</a></li>
         </ul>
       </div>
     </div>

src/home/index.html

@@ -86,7 +86,7 @@
     <div data-select="home" class="root home">
       <nav data-select="navigation" class="home__navigation"></nav>
       <aside data-select="sidemenu" class="home__sidemenu"></aside>
-      <main data-select="content" class="home__content"></main>
+      <main data-select="content" class="home__content" data-vanilla-route-ele="router-wrap"></main>
     </div>
   </body>
 </html>

src/home/index.js

@@ -1,10 +1,10 @@
 import { extractElements } from 'pet-dex-utilities';
 import { initializeSwiper } from '../utils/swiper';
 import Navigation from './components/Navigation';
-import NoPetRegirestedPage from './components/NoPetRegirestedPage';
 import SideMenu from './components/SideMenu';
 import './index.scss';
 import initializeScrollable from './utils/scrollable-sidemenu';
+import mainRouter from '../router/main-router';
 
 document.addEventListener('DOMContentLoaded', () => {
   const selected = extractElements([document.body]);
@@ -19,14 +19,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const navigation = new Navigation();
   navigation.mount($navigation);
 
-  const $content = selected.get('content');
-  const noPetRegirestedPage = new NoPetRegirestedPage();
-  noPetRegirestedPage.mount($content);
-
   const $hamburgerMenu = navigation.selected.get('hamburger-menu');
   const $exitMenu = sideMenu.selected.get('exitMenu');
   const $itemsMenu = sideMenu.selected.get('menuitens').querySelectorAll('li');
 
   initializeScrollable($hamburgerMenu, $exitMenu, $itemsMenu, $home);
   initializeSwiper();
+  mainRouter();
 });

src/home/index.scss

@@ -1,86 +1,91 @@
-@use '~styles/base.scss';
-@use '~styles/colors.scss' as colors;
-@use '~styles/breakpoints.scss' as breakpoints;
-@use '~styles/fonts.scss' as fonts;
-
-.home {
-  width: 200vw;
-  height: 100dvh;
-  overflow-x: hidden;
-
-  display: grid;
-  grid-template-areas:
-    'sidemenu nav'
-    'sidemenu content';
-  grid-template-rows: 8.1rem 1fr;
-  grid-template-columns: 100vw 100vw;
-
-  background-color: colors.$primary600;
-  transform: translateX(-100vw);
-
-  &--open-menu {
-    width: 100vw;
-
-    transform: translateX(0);
-
-    transition: transform 0.3s;
-  }
-
-  &--exit-menu {
-    width: 200vw;
-
-    transform: translateX(-100vw);
-
-    transition: transform 0.3s;
-  }
-
-  &__navigation {
-    display: flex;
-    grid-area: nav;
-
-    align-items: center;
-  }
-
-  &__sidemenu {
-    display: grid;
-    grid-area: sidemenu;
-    grid-template-rows: 8.1rem 1fr;
-  }
-
-  &__content {
-    overflow: auto;
-
-    grid-area: content;
-
-    background-color: colors.$secondary100;
-
-    padding-inline: 2rem;
-    padding-block: 3.2rem;
-  }
-}
-
-@include breakpoints.from1024 {
-  .home {
-    width: 100vw;
-
-    grid-template-areas:
-      'sidemenu nav'
-      'sidemenu content';
-    grid-template-rows: 8.1rem 1fr;
-    grid-template-columns: 31.3rem 1fr;
-
-    transform: translateX(0);
-
-    &__content {
-      margin-inline: 2.4rem;
-
-      margin-bottom: 2.4rem;
-
-      border-radius: 1.6rem;
-    }
-
-    &__sidemenu {
-      display: block;
-    }
-  }
-}
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/fonts.scss' as fonts;
+
+.home {
+  width: 200vw;
+  height: 100dvh;
+  overflow-x: hidden;
+
+  display: grid;
+  grid-template-areas:
+    'sidemenu nav'
+    'sidemenu content';
+  grid-template-rows: 8.1rem 1fr;
+  grid-template-columns: 100vw 100vw;
+
+  background-color: colors.$primary600;
+  transform: translateX(-100vw);
+
+  &--open-menu {
+    width: 100vw;
+
+    transform: translateX(0);
+
+    transition: transform 0.3s;
+  }
+
+  &--exit-menu {
+    width: 200vw;
+
+    transform: translateX(-100vw);
+
+    transition: transform 0.3s;
+  }
+
+  &__navigation {
+    display: flex;
+    grid-area: nav;
+
+    align-items: center;
+  }
+
+  &__sidemenu {
+    display: grid;
+    grid-area: sidemenu;
+    grid-template-rows: 8.1rem 1fr;
+  }
+
+  &__content {
+    overflow: auto;
+
+    grid-area: content;
+
+    background-color: colors.$secondary100;
+
+    padding-inline: 2rem;
+    padding-block: 3.2rem;
+  }
+
+  &__content-page {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@include breakpoints.from1024 {
+  .home {
+    width: 100vw;
+
+    grid-template-areas:
+      'sidemenu nav'
+      'sidemenu content';
+    grid-template-rows: 8.1rem 1fr;
+    grid-template-columns: 31.3rem 1fr;
+
+    transform: translateX(0);
+
+    &__content {
+      margin-inline: 2.4rem;
+
+      margin-bottom: 2.4rem;
+
+      border-radius: 1.6rem;
+    }
+
+    &__sidemenu {
+      display: block;
+    }
+  }
+}

src/router/main-router.js

@@ -0,0 +1,14 @@
+import { BrowserRoute } from 'vanilla-routing';
+import cadastroPet from './routes/cadastro-pet/cadastro-pet';
+import meusPets from './routes/meus-pets/meus-pets';
+import rotasPrincipais from './routes/rotas-principais/rotas-principais';
+
+export default function mainRouter() {
+  const routes = [
+    ...Object.values(rotasPrincipais),
+    ...Object.values(meusPets),
+    ...Object.values(cadastroPet),
+  ];
+
+  BrowserRoute(routes);
+}

src/router/routes/cadastro-pet/cadastro-pet.js

@@ -0,0 +1,17 @@
+import aniversario from './etapas/aniversario';
+import cadastro from './etapas/cadastro';
+import nome from './etapas/nome';
+import peso from './etapas/peso';
+import petvet from './etapas/petvet';
+import raca from './etapas/raca';
+import tamanho from './etapas/tamanho';
+
+export default {
+  cadastro,
+  raca,
+  nome,
+  tamanho,
+  peso,
+  aniversario,
+  petvet,
+};

src/router/routes/cadastro-pet/etapas/aniversario.js

@@ -0,0 +1,18 @@
+import { Router, routeLocation } from 'vanilla-routing';
+import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage';
+
+export default {
+  pathname: '/aniversariopet',
+  element: () => {
+    console.log('Aniversario', routeLocation());
+    const $content = document.createElement('div');
+    $content.classList.add('home__content-page');
+    $content.style.backgroundColor = 'brown';
+    const noPetRegirestedPage = new NoPetRegirestedPage();
+    noPetRegirestedPage.mount($content);
+    Router.dispose(() => {
+      console.log('Bye AniversarioPet Page');
+    });
+    return $content;
+  },
+};

src/router/routes/cadastro-pet/etapas/cadastro.js

@@ -0,0 +1,20 @@
+import { Router, routeLocation } from 'vanilla-routing';
+import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage';
+
+export default {
+  pathname: '/cadastropet',
+  element: () => {
+    console.log('Cadastro', routeLocation());
+    const $content = document.createElement('div');
+    $content.classList.add('home__content-page');
+    $content.style.backgroundColor = 'blue';
+    const noPetRegirestedPage = new NoPetRegirestedPage();
+    const botao = noPetRegirestedPage.button;
+    console.log(botao);
+    noPetRegirestedPage.mount($content);
+    Router.dispose(() => {
+      console.log('Bye Cadastro Pet Page');
+    });
+    return $content;
+  },
+};

src/router/routes/cadastro-pet/etapas/nome.js

@@ -0,0 +1,18 @@
+import { Router, routeLocation } from 'vanilla-routing';
+import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage';
+
+export default {
+  pathname: '/nomepet',
+  element: () => {
+    console.log('Nome', routeLocation());
+    const $content = document.createElement('div');
+    $content.classList.add('home__content-page');
+    $content.style.backgroundColor = 'yellow';
+    const noPetRegirestedPage = new NoPetRegirestedPage();
+    noPetRegirestedPage.mount($content);
+    Router.dispose(() => {
+      console.log('Bye NomePet Page');
+    });
+    return $content;
+  },
+};

src/router/routes/cadastro-pet/etapas/peso.js

@@ -0,0 +1,18 @@
+import { Router, routeLocation } from 'vanilla-routing';
+import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage';
+
+export default {
+  pathname: '/pesopet',
+  element: () => {
+    console.log('Peso', routeLocation());
+    const $content = document.createElement('div');
+    $content.classList.add('home__content-page');
+    $content.style.backgroundColor = 'orange';
+    const noPetRegirestedPage = new NoPetRegirestedPage();
+    noPetRegirestedPage.mount($content);
+    Router.dispose(() => {
+      console.log('Bye PesoPet Page');
+    });
+    return $content;
+  },
+};