Skip to content

Commit

Permalink
Serviço de Rotas (devhatt#207)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
JonasGz authored May 30, 2024
1 parent 3994ad3 commit 851d256
Show file tree
Hide file tree
Showing 27 changed files with 440 additions and 198 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 7 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions src/home/components/SideMenu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
92 changes: 0 additions & 92 deletions src/home/index.html

This file was deleted.

7 changes: 2 additions & 5 deletions src/home/index.js
Original file line number Diff line number Diff line change
@@ -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]);
Expand All @@ -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();
});
177 changes: 91 additions & 86 deletions src/home/index.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Loading

0 comments on commit 851d256

Please sign in to comment.