From f9e807e2e41aeadd578f9eda32e242e518dadcd2 Mon Sep 17 00:00:00 2001 From: JonasGz Date: Thu, 16 May 2024 13:23:01 -0300 Subject: [PATCH] finish service routes --- package.json | 1 + pnpm-lock.yaml | 7 + src/home/components/Navigation/index.js | 2 +- src/home/components/SideMenu/index.js | 10 +- src/home/index.html | 2 +- src/home/index.js | 7 +- src/home/index.scss | 177 +++++++++--------- src/router/main-router.js | 14 ++ .../routes/cadastro-pet/cadastro-pet.js | 17 ++ .../routes/cadastro-pet/etapas/aniversario.js | 18 ++ .../routes/cadastro-pet/etapas/cadastro.js | 20 ++ src/router/routes/cadastro-pet/etapas/nome.js | 18 ++ src/router/routes/cadastro-pet/etapas/peso.js | 18 ++ .../routes/cadastro-pet/etapas/petvet.js | 18 ++ src/router/routes/cadastro-pet/etapas/raca.js | 18 ++ .../routes/cadastro-pet/etapas/tamanho.js | 18 ++ .../routes/meus-pets/etapas/meuspets.js | 18 ++ .../routes/meus-pets/etapas/petperfil.js | 18 ++ src/router/routes/meus-pets/meus-pets.js | 7 + .../rotas-principais/rotas-principais.js | 8 + .../rotas-principais/rotas/configuracoes.js | 18 ++ .../routes/rotas-principais/rotas/conta.js | 18 ++ .../routes/rotas-principais/rotas/doacoes.js | 18 ++ .../routes/rotas-principais/rotas/error.js | 18 ++ .../routes/rotas-principais/rotas/home.js | 17 ++ .../routes/rotas-principais/rotas/pet-dex.js | 18 ++ vite.config.js | 4 +- 27 files changed, 427 insertions(+), 100 deletions(-) create mode 100644 src/router/main-router.js create mode 100644 src/router/routes/cadastro-pet/cadastro-pet.js create mode 100644 src/router/routes/cadastro-pet/etapas/aniversario.js create mode 100644 src/router/routes/cadastro-pet/etapas/cadastro.js create mode 100644 src/router/routes/cadastro-pet/etapas/nome.js create mode 100644 src/router/routes/cadastro-pet/etapas/peso.js create mode 100644 src/router/routes/cadastro-pet/etapas/petvet.js create mode 100644 src/router/routes/cadastro-pet/etapas/raca.js create mode 100644 src/router/routes/cadastro-pet/etapas/tamanho.js create mode 100644 src/router/routes/meus-pets/etapas/meuspets.js create mode 100644 src/router/routes/meus-pets/etapas/petperfil.js create mode 100644 src/router/routes/meus-pets/meus-pets.js create mode 100644 src/router/routes/rotas-principais/rotas-principais.js create mode 100644 src/router/routes/rotas-principais/rotas/configuracoes.js create mode 100644 src/router/routes/rotas-principais/rotas/conta.js create mode 100644 src/router/routes/rotas-principais/rotas/doacoes.js create mode 100644 src/router/routes/rotas-principais/rotas/error.js create mode 100644 src/router/routes/rotas-principais/rotas/home.js create mode 100644 src/router/routes/rotas-principais/rotas/pet-dex.js diff --git a/package.json b/package.json index e12e07ed..499373dc 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1a1b5f7e..de5143f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: reset-css: specifier: ^5.0.2 version: 5.0.2 + vanilla-routing: + specifier: 0.0.4 + version: 0.0.4 vite: specifier: ^5.0.12 version: 5.2.10(@types/node@20.12.7)(sass@1.75.0) @@ -9318,6 +9321,10 @@ packages: spdx-expression-parse: 3.0.1 dev: true + /vanilla-routing@0.0.4: + resolution: {integrity: sha512-I+9E+HLN4EsGsPwFBRPkQe94f1+uEHOSFnnWaRbI5CdM3nwXy6RSERhXPzLxmNNCBTxpfAeQTRJAApd7ODY/gQ==} + dev: false + /vary@1.1.2: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} diff --git a/src/home/components/Navigation/index.js b/src/home/components/Navigation/index.js index 38514d91..213395c6 100644 --- a/src/home/components/Navigation/index.js +++ b/src/home/components/Navigation/index.js @@ -19,7 +19,7 @@ const html = `
notifications
-
+
user avatar
diff --git a/src/home/components/SideMenu/index.js b/src/home/components/SideMenu/index.js index a7671565..36bc9964 100644 --- a/src/home/components/SideMenu/index.js +++ b/src/home/components/SideMenu/index.js @@ -31,12 +31,12 @@ const html = `
diff --git a/src/home/index.html b/src/home/index.html index 810894ba..f0ab059e 100644 --- a/src/home/index.html +++ b/src/home/index.html @@ -86,7 +86,7 @@
-
+
diff --git a/src/home/index.js b/src/home/index.js index 9a5b9a69..d6d0e212 100644 --- a/src/home/index.js +++ b/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(); }); diff --git a/src/home/index.scss b/src/home/index.scss index 4f0652c9..885f8ddb 100644 --- a/src/home/index.scss +++ b/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; + } + } +} diff --git a/src/router/main-router.js b/src/router/main-router.js new file mode 100644 index 00000000..7ae931bd --- /dev/null +++ b/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); +} diff --git a/src/router/routes/cadastro-pet/cadastro-pet.js b/src/router/routes/cadastro-pet/cadastro-pet.js new file mode 100644 index 00000000..45dde010 --- /dev/null +++ b/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, +}; diff --git a/src/router/routes/cadastro-pet/etapas/aniversario.js b/src/router/routes/cadastro-pet/etapas/aniversario.js new file mode 100644 index 00000000..1a497da9 --- /dev/null +++ b/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; + }, +}; diff --git a/src/router/routes/cadastro-pet/etapas/cadastro.js b/src/router/routes/cadastro-pet/etapas/cadastro.js new file mode 100644 index 00000000..19c7668d --- /dev/null +++ b/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; + }, +}; diff --git a/src/router/routes/cadastro-pet/etapas/nome.js b/src/router/routes/cadastro-pet/etapas/nome.js new file mode 100644 index 00000000..c1e0e0ff --- /dev/null +++ b/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; + }, +}; diff --git a/src/router/routes/cadastro-pet/etapas/peso.js b/src/router/routes/cadastro-pet/etapas/peso.js new file mode 100644 index 00000000..6b8ebde1 --- /dev/null +++ b/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; + }, +}; diff --git a/src/router/routes/cadastro-pet/etapas/petvet.js b/src/router/routes/cadastro-pet/etapas/petvet.js new file mode 100644 index 00000000..f88f9c50 --- /dev/null +++ b/src/router/routes/cadastro-pet/etapas/petvet.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/petvet', + element: () => { + console.log('PetVet', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + $content.style.backgroundColor = 'red'; + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye PetVet Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/cadastro-pet/etapas/raca.js b/src/router/routes/cadastro-pet/etapas/raca.js new file mode 100644 index 00000000..732154b6 --- /dev/null +++ b/src/router/routes/cadastro-pet/etapas/raca.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/racapet', + element: () => { + console.log('Raca', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + $content.style.backgroundColor = 'black'; + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye Raca Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/cadastro-pet/etapas/tamanho.js b/src/router/routes/cadastro-pet/etapas/tamanho.js new file mode 100644 index 00000000..1d5a752c --- /dev/null +++ b/src/router/routes/cadastro-pet/etapas/tamanho.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/tamanhopet', + element: () => { + console.log('Tamanho', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + $content.style.backgroundColor = 'purple'; + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye TamanhoPet Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/meus-pets/etapas/meuspets.js b/src/router/routes/meus-pets/etapas/meuspets.js new file mode 100644 index 00000000..a6cc8d1b --- /dev/null +++ b/src/router/routes/meus-pets/etapas/meuspets.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/meuspets', + element: () => { + console.log('Meus Pets', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + $content.style.backgroundColor = 'blue'; + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye Meus Pets Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/meus-pets/etapas/petperfil.js b/src/router/routes/meus-pets/etapas/petperfil.js new file mode 100644 index 00000000..7c4cab7b --- /dev/null +++ b/src/router/routes/meus-pets/etapas/petperfil.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/petperfil', + element: () => { + console.log('Pet Perfil', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + $content.style.backgroundColor = 'blue'; + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye Meus Pets Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/meus-pets/meus-pets.js b/src/router/routes/meus-pets/meus-pets.js new file mode 100644 index 00000000..fce74aa2 --- /dev/null +++ b/src/router/routes/meus-pets/meus-pets.js @@ -0,0 +1,7 @@ +import meuspets from './etapas/meuspets'; +import petperfil from './etapas/petperfil'; + +export default { + meuspets, + petperfil, +}; diff --git a/src/router/routes/rotas-principais/rotas-principais.js b/src/router/routes/rotas-principais/rotas-principais.js new file mode 100644 index 00000000..514d1b5f --- /dev/null +++ b/src/router/routes/rotas-principais/rotas-principais.js @@ -0,0 +1,8 @@ +import configuracoes from './rotas/configuracoes'; +import conta from './rotas/conta'; +import doacoes from './rotas/doacoes'; +import { error } from './rotas/error'; +import home from './rotas/home'; +import petDex from './rotas/pet-dex'; + +export default { home, petDex, doacoes, conta, configuracoes, error }; diff --git a/src/router/routes/rotas-principais/rotas/configuracoes.js b/src/router/routes/rotas-principais/rotas/configuracoes.js new file mode 100644 index 00000000..9465620d --- /dev/null +++ b/src/router/routes/rotas-principais/rotas/configuracoes.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/configuracoes', + element: () => { + console.log('Configuracoes', 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 Configuracoes Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/rotas-principais/rotas/conta.js b/src/router/routes/rotas-principais/rotas/conta.js new file mode 100644 index 00000000..450216f1 --- /dev/null +++ b/src/router/routes/rotas-principais/rotas/conta.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/conta', + element: () => { + console.log('Conta', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + $content.style.backgroundColor = 'red'; + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye Conta Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/rotas-principais/rotas/doacoes.js b/src/router/routes/rotas-principais/rotas/doacoes.js new file mode 100644 index 00000000..9b1d4ebe --- /dev/null +++ b/src/router/routes/rotas-principais/rotas/doacoes.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/doacoes', + element: () => { + console.log('Doacoes', 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 Doacoes Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/rotas-principais/rotas/error.js b/src/router/routes/rotas-principais/rotas/error.js new file mode 100644 index 00000000..e08f0055 --- /dev/null +++ b/src/router/routes/rotas-principais/rotas/error.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export const error = { + pathname: '*', + element: () => { + console.log('Erro', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.elements[0].textContent = 'ERRO 404!'; + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye Erro Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/rotas-principais/rotas/home.js b/src/router/routes/rotas-principais/rotas/home.js new file mode 100644 index 00000000..66f3adb9 --- /dev/null +++ b/src/router/routes/rotas-principais/rotas/home.js @@ -0,0 +1,17 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/', + element: () => { + console.log('Home Page', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye Home Page'); + }); + return $content; + }, +}; diff --git a/src/router/routes/rotas-principais/rotas/pet-dex.js b/src/router/routes/rotas-principais/rotas/pet-dex.js new file mode 100644 index 00000000..702b5db3 --- /dev/null +++ b/src/router/routes/rotas-principais/rotas/pet-dex.js @@ -0,0 +1,18 @@ +import { Router, routeLocation } from 'vanilla-routing'; +import NoPetRegirestedPage from '../../../../home/components/NoPetRegirestedPage'; + +export default { + pathname: '/petdex', + element: () => { + console.log('Pet Dex', routeLocation()); + const $content = document.createElement('div'); + $content.classList.add('home__content-page'); + $content.style.backgroundColor = 'red'; + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + Router.dispose(() => { + console.log('Bye PetDex Page'); + }); + return $content; + }, +}; diff --git a/vite.config.js b/vite.config.js index 9014703d..de302d41 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,7 +4,7 @@ import { defineConfig } from 'vite'; import { VitePWA } from 'vite-plugin-pwa'; export default defineConfig({ - root: resolve(__dirname, 'src'), + root: resolve(__dirname, 'src/home/'), define: { __isBrowser__: true, }, @@ -18,7 +18,7 @@ export default defineConfig({ outDir: resolve(__dirname, 'dist'), rollupOptions: { input: { - index: resolve(__dirname, 'src/index.html'), + index: resolve(__dirname, 'src/home/index.html'), home: resolve(__dirname, 'src/home/index.html'), }, },