Serviço de Rotas (devhatt#207)

* finish service routes

remove codes

* chore: changed pt-br to english

* style: add eof package.json

* chore: add routes props in links sidemenu

* fix: error build

* fix: fix stylelint

package.json

@@ -31,7 +31,8 @@
     "reset-css": "^5.0.2",
     "vite-jsconfig-paths": "2.0.1",
     "vite-plugin-pwa": "^0.19.8",
-    "vite": "^5.2.10"
+    "vite": "^5.2.10",
+    "vanilla-routing": "0.0.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.2.2",

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="/pets"><img src="${meusPets}" alt="Meus Pets">Meus Pets</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/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="/donates"><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="/account"><img src="${conta}" alt="conta">Conta</a></li>
+          <li><a data-vanilla-route-link="spa" class="side-menu-content__menuitens" href="/settings"><img src="${configuracoes}" alt="configuracoes">Configurações</a></li>
         </ul>
       </div>
     </div>

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;
+    }
+  }
+}