feat: swipe animation for mobile

src/components/Drawer/index.js

@@ -1,5 +1,8 @@
 import { Component } from 'pet-dex-utilities';
+import { listenBreakpoint } from '../../utils/breakpoints/breakpoints';
+import { makeSwipable } from '../../utils/swiper';
 import close from './images/close.svg';
+import line from './images/line.svg';
 import './index.scss';
 
 const events = ['open', 'close'];
@@ -9,7 +12,10 @@ const html = `
       <div class="drawer__wrapper" data-select="drawer-wrapper">
           <div class="drawer__nav">
             <span class="drawer__title" data-select="title"></span>
-            <button class="drawer__close" data-select="close"><img src="${close}"></button>
+            <button class="drawer__close" data-select="close">
+              <img class="drawer__close--xiszinho" src="${close}">
+              <img class="drawer__close--linhazinha" src="${line}">
+            </button>
           </div>
           <div class="drawer__content" data-select="content"></div>
       </div>
@@ -33,32 +39,41 @@ export default function Drawer({ title, content }) {
     setTimeout(() => {
       drawerWrapper.classList.add('drawer__wrapper--open');
     }, 1);
-    window.addEventListener('keydown', this.handleKeyDown);
-    drawer.addEventListener('click', this.handleClickOutside);
+    window.addEventListener('keydown', this.onEscapeKey);
+    drawer.addEventListener('click', this.onClickOutside);
+
+    const swipe = () => this.close();
+
+    listenBreakpoint('from667', (matches) => {
+      if (matches) {
+        makeSwipable(drawerWrapper).right(swipe);
+      }
+      makeSwipable(drawerWrapper).down(swipe);
+    });
   });
 
-  this.handleKeyDown = (event) => {
+  this.onEscapeKey = (event) => {
     if (event.key === 'Escape') {
       this.close();
     }
   };
 
-  this.handleClickOutside = (event) => {
+  this.onClickOutside = (event) => {
     if (event.target === drawer) {
       this.close();
     }
   };
 
-  this.transitionHandler = () => {
+  this.onTransition = () => {
     this.emit('close');
     this.isOpen = false;
-    drawerWrapper.removeEventListener('transitionend', this.transitionHandler);
+    drawerWrapper.removeEventListener('transitionend', this.onTransition);
     this.unmount();
   };
 
   this.listen('unmount', () => {
-    window.removeEventListener('keydown', this.handleKeyDown);
-    drawer.removeEventListener('click', this.handleClickOutside);
+    window.removeEventListener('keydown', this.onEscapeKey);
+    drawer.removeEventListener('click', this.onClickOutside);
   });
 }
 
@@ -74,7 +89,7 @@ Drawer.prototype = Object.assign(Drawer.prototype, Component.prototype, {
     if (this.isOpen) {
       const drawerWrapper = this.selected.get('drawer-wrapper');
       drawerWrapper.classList.remove('drawer__wrapper--open');
-      drawerWrapper.addEventListener('transitionend', this.transitionHandler);
+      drawerWrapper.addEventListener('transitionend', this.onTransition);
     }
   },
   setTitle(title) {

src/components/Drawer/index.scss

@@ -19,7 +19,7 @@
 
     align-items: start;
 
-    padding: 3rem;
+    padding: 1.2rem 2.4rem 2.4rem;
     box-sizing: border-box;
 
     position: absolute;
@@ -42,18 +42,14 @@
       width: 100%;
 
       display: flex;
-      gap: 2rem;
 
       align-items: center;
+      justify-content: center;
 
-      justify-content: space-between;
-
-      padding-bottom: 3rem;
+      padding-bottom: 1.2rem;
 
       .drawer__title {
-        font-family: fonts.$primaryFont;
-        color: colors.$gray700;
-        font-weight: 600;
+        display: none;
       }
 
       .drawer__close {
@@ -67,6 +63,14 @@
         background: inherit;
 
         cursor: pointer;
+
+        .drawer__close--xiszinho {
+          display: none;
+        }
+
+        .drawer__close--linhazinha {
+          display: block;
+        }
       }
     }
 
@@ -98,6 +102,48 @@
         right: 0;
         bottom: unset;
       }
+
+      .drawer__nav {
+        width: 100%;
+
+        display: flex;
+        gap: 2rem;
+
+        align-items: center;
+
+        justify-content: space-between;
+
+        padding-bottom: 3rem;
+
+        .drawer__title {
+          display: block;
+
+          font-family: fonts.$primaryFont;
+          color: colors.$gray700;
+          font-weight: 600;
+        }
+
+        .drawer__close {
+          display: grid;
+
+          place-items: center;
+
+          padding: 0.5rem;
+          border: 0;
+
+          background: inherit;
+
+          cursor: pointer;
+
+          .drawer__close--xiszinho {
+            display: block;
+          }
+
+          .drawer__close--linhazinha {
+            display: none;
+          }
+        }
+      }
     }
   }
 }

src/home/index.html

@@ -4,21 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700;&family=Wix+Madefor+Display:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Display:wght@400..800&display=swap" rel="stylesheet">
     <title>Pet Hat</title>
     <script src="index.js" type="module"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@500&display=swap"
-      rel="stylesheet"
-    />
-
     <link
       rel="icon"
       type="image/x-icon"

src/utils/swiper.js

@@ -9,21 +9,25 @@ export function makeSwipable($element) {
 
   const api = {
     left(callback) {
+      $element.removeEventListener(SWIPE_LEFT, callback);
       $element.addEventListener(SWIPE_LEFT, callback);
       return api;
     },
 
     right(callback) {
+      $element.removeEventListener(SWIPE_RIGHT, callback);
       $element.addEventListener(SWIPE_RIGHT, callback);
       return api;
     },
 
     up(callback) {
+      $element.removeEventListener(SWIPE_UP, callback);
       $element.addEventListener(SWIPE_UP, callback);
       return api;
     },
 
     down(callback) {
+      $element.removeEventListener(SWIPE_DOWN, callback);
       $element.addEventListener(SWIPE_DOWN, callback);
       return api;
     },