Develop home page layout

src/components/button/index.js

@@ -0,0 +1,41 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['click'];
+
+const html = `
+    <button data-select="button" class="button" type="button"></button>
+`;
+
+export default function Button() {
+  Component.call(this, { html, events });
+
+  const $button = this.selected.get('button');
+  $button.addEventListener('click', () => {
+    this.click();
+  });
+}
+
+Button.prototype = Object.assign(Button.prototype, Component.prototype, {
+  getText() {
+    return this.selected.get('button').textContent;
+  },
+
+  setText(text) {
+    this.selected.get('button').textContent = text;
+  },
+
+  isBlock() {
+    return this.selected.get('button').classList.has('button--block');
+  },
+
+  setIsBlock(isBlock) {
+    const { classList } = this.selected.get('button');
+    if (isBlock) classList.add('button--block');
+    else classList.remove('button--block');
+  },
+
+  click() {
+    this.emit('click');
+  },
+});

src/components/button/index.scss

@@ -0,0 +1,18 @@
+@use '../../styles/colors.scss' as colors;
+
+.button {
+  appearance: none;
+  border-radius: 1.4rem;
+  background-color: colors.$blue-500;
+  color: #fff;
+  border: none;
+  padding: 1.6rem;
+  font-family: 'Noto Sans', sans-serif;
+  font-size: 1.6rem;
+  font-weight: 500;
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+}

src/home/components/navigation/index.js

@@ -0,0 +1,32 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = [];
+
+const html = `
+    <div class="navigation">
+        <div>
+            <img class="navigation__logo" src="assets/pet-dex.svg" alt="pet-dex logo" />
+        </div>
+        <div class="navigation__icons">
+            <div class="navigation__icon-container navigation__icon-container--mobile">
+                <img class="navigation__icon navigation__icon" src="/menu.svg" alt="menu" />
+            </div>
+            <div class="navigation__icon-container navigation__icon-container--desktop">
+                <img class="navigation__icon" src="/sin.svg" alt="notifications" />
+            </div>
+            <div class="navigation__icon-container navigation__icon-container--desktop">
+                <img class="navigation__icon" src="/avatar.svg" alt="user avatar" />
+            </div>
+            <div class="navigation__icon-container navigation__icon-container--desktop">
+                <img class="navigation__icon" src="/exit.svg" alt="exit button" />
+            </div>
+        </div>
+    </div>
+`;
+
+export default function Navigation() {
+  Component.call(this, { html, events });
+}
+
+Navigation.prototype = Object.assign(Navigation.prototype, Component.prototype);

src/home/components/navigation/index.scss

@@ -0,0 +1,56 @@
+@use 'sass:math';
+@use '../../../styles/breakpoints.scss' as breakpoints;
+@use '../../../styles/colors.scss' as colors;
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+
+    gap: 2.4rem;
+  }
+
+  &__icon-container {
+    width: 4rem;
+    height: 4rem;
+
+    display: none;
+
+    place-items: center;
+
+    &--mobile {
+      display: grid;
+    }
+
+    @include breakpoints.desktop {
+      &--desktop {
+        display: grid;
+      }
+    }
+  }
+
+  > :first-child {
+    padding-inline-start: 2rem;
+  }
+
+  > * {
+    padding-inline: math.div(2rem, 2);
+  }
+
+  > :last-child {
+    padding-inline-end: 2rem;
+  }
+
+  @include breakpoints.desktop {
+    &__logo {
+      padding-inline-start: 7.5rem;
+    }
+  }
+}

src/home/components/none-pet/index.js

@@ -0,0 +1,31 @@
+import { Component } from 'pet-dex-utilities';
+import Button from '../../../components/button';
+import './index.scss';
+
+const events = [];
+
+const html = `
+    <div data-select="container" class="none-pet">
+        <div class="none-pet__content">
+          <div class="none-pet__description">
+            <h1 class="none-pet__title">Você ainda não tem nenhum pet cadastrado</h1>
+            <p class="none-pet__hint">Crie o perfil do seu pet e deixe o nosso site com o focinho do seu filhote!</p>
+          </div>
+          <img class="none-pet__image" src="assets/none-pet.png" alt="dog in an smart phone" />
+        </div>
+    </div>;
+`;
+
+export default function NonePet() {
+  Component.call(this, { html, events });
+
+  const $container = this.selected.get('container');
+
+  this.button = new Button();
+  this.button.setIsBlock(true);
+  this.button.setText('Cadastrar pet');
+  this.button.selected.get('button').classList.add('none-pet__button');
+  this.button.mount($container);
+}
+
+NonePet.prototype = Object.assign(NonePet.prototype, Component.prototype);

src/home/components/none-pet/index.scss

@@ -0,0 +1,61 @@
+@use '../../../styles/colors.scss' as colors;
+@use '../../../styles/breakpoints.scss' as breakpoints;
+
+$inline-breathe: 2rem;
+$block-breathe: 3.2rem;
+
+.none-pet {
+  text-align: center;
+  margin: auto;
+
+  padding-inline: $inline-breathe;
+  padding-block: $block-breathe;
+
+  &__description {
+    width: 33.5rem;
+  }
+
+  &__title {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 2.4rem;
+    font-weight: 700;
+    line-height: 3rem;
+    color: colors.$gray-800;
+  }
+
+  &__hint {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.6rem;
+    font-weight: 500;
+    line-height: 3rem;
+    color: colors.$gray-600;
+    margin-top: 1.8rem;
+  }
+
+  &__image {
+    margin-top: 2.4rem;
+  }
+
+  &__button {
+    margin-top: 3.2rem;
+  }
+
+  @include breakpoints.desktop {
+    &__image {
+      margin-top: 0px;
+    }
+
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      max-width: 62.5rem;
+    }
+
+    &__button {
+      margin-top: 4rem;
+      max-width: 62.5rem;
+    }
+  }
+}

src/home/components/side-menu/index.js

@@ -0,0 +1,14 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = [];
+
+const html = `
+    <div class="side-menu"></div>
+`;
+
+export default function SideMenu() {
+  Component.call(this, { html, events });
+}
+
+SideMenu.prototype = Object.assign(SideMenu.prototype, Component.prototype);

src/home/components/side-menu/index.scss

@@ -0,0 +1,10 @@
+@use '../../../styles/breakpoints.scss' as breakpoints;
+
+.side-menu {
+  display: none;
+  width: 22rem;
+
+  @include breakpoints.desktop {
+    display: block;
+  }
+}

src/home/index.html

@@ -7,8 +7,9 @@
     <title>Pet Hat</title>
     <script src="main.js" type="module"></script>
   </head>
-  <body>
-    <main data-select="container" class="home-main-container">
-    </main>
+  <body class="home">
+    <div data-select="navigation" class="home__navigation"></div>
+    <div data-select="sidemenu" class="home__sidemenu"></div>
+    <div data-select="content" class="home__content"></div>
   </body>
 </html>

src/home/index.scss

@@ -1,6 +1,71 @@
-@use '../styles/base.scss';
+@use 'sass:math';
+@use '../styles/base.scss' as base;
+@use '../styles/colors.scss' as colors;
+@use '../styles/breakpoints.scss' as breakpoints;
 
-.home-main-container {
-  display: flex;
-  gap: 1rem;
-}
+$navigation-block-size: 8.1rem;
+$navigation-block-size-desktop: 8.8rem;
+
+$side-menu-inline-size: 31.3rem;
+
+.home {
+  background-color: colors.$app-color;
+
+  &__navigation {
+    display: flex;
+    align-items: center;
+
+    height: $navigation-block-size;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+
+    background-color: colors.$app-color;
+
+    @include breakpoints.desktop {
+      height: $navigation-block-size-desktop;
+    }
+  }
+
+  &__sidemenu {
+    display: flex;
+    justify-content: center;
+
+    position: fixed;
+    left: 0px;
+    top: $navigation-block-size;
+    bottom: 0px;
+
+    background-color: colors.$app-color;
+
+    @include breakpoints.desktop {
+      top: $navigation-block-size-desktop;
+      width: $side-menu-inline-size;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    box-sizing: border-box;
+
+    min-height: calc(100vh - $navigation-block-size);
+    margin-top: $navigation-block-size;
+
+    background-color: #fff;
+
+    @include breakpoints.desktop {
+      min-height: calc(100vh - $navigation-block-size-desktop - 2.4rem);
+
+      margin-inline-start: 2.4rem + $side-menu-inline-size;
+      margin-inline-end: 2.4rem;
+      margin-bottom: 2.4rem;
+      margin-top: $navigation-block-size-desktop;
+
+      border-radius: 1.6rem;
+    }
+  }
+}