From ab4e74a1f2a24dca241706a5bb6cce173b890dbb Mon Sep 17 00:00:00 2001
From: Nicolas <nicolasgabrip@gmail.com>
Date: Sun, 19 May 2024 19:51:29 -0300
Subject: [PATCH 1/6] side dialog respecting header boundaries

---
 src/components/BurgerMenu/BurgerMenu.tsx | 4 ++--
 src/components/Header/Header.tsx         | 3 ++-
 src/components/ui/sheet.tsx              | 4 +++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
index 526a5e02..af8c8fa1 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -32,11 +32,11 @@ const BurgerMenu = () => {
   }, []);
 
   return (
-    <Sheet>
+    <Sheet modal={false}>
       <SheetTrigger>
         <Menu color="white" className="ml-2 mr-2" />
       </SheetTrigger>
-      <SheetContent side="left" className="pt-[96px] flex flex-col">
+      <SheetContent side="left" className="pt-[96px] flex flex-col absolute top-[56px] h-screen">
         <div className="flex flex-col gap-4">
           {session && (
             <Fragment>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9dde1265..fc517744 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -15,9 +15,10 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
 
   return (
     <div
+      id='header'
       ref={ref}
       className={cn(
-        'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60]',
+        'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60] fixed',
         className
       )}
       {...rest}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 117f9957..a8afd4c5 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -51,11 +51,13 @@ interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
+const headerEl = document.getElementById('header')
+
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
 >(({ side = 'right', className, children, ...props }, ref) => (
-  <SheetPortal>
+  <SheetPortal container={headerEl}>
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}

From 0f1042b687185a53b8258939d4ee82725cc97391 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolasgabrip@gmail.com>
Date: Sun, 19 May 2024 20:27:05 -0300
Subject: [PATCH 2/6] omitting default close button / adding animated burger
 icon

---
 package.json                             |  7 ++++---
 src/components/BurgerMenu/BurgerMenu.tsx | 23 ++++++++++++-----------
 src/components/ui/sheet.tsx              |  5 +----
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 29dd3ef1..4f0ecea0 100644
--- a/package.json
+++ b/package.json
@@ -26,14 +26,15 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "formik": "^2.4.6",
+    "hamburger-react": "^2.5.1",
     "lucide-react": "^0.378.0",
     "qs": "^6.12.1",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.23.0",
     "react-select": "^5.8.0",
-    "react": "^18.2.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.4.0"
@@ -41,16 +42,16 @@
   "devDependencies": {
     "@types/node": "^20.12.8",
     "@types/qs": "^6.9.15",
+    "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/react-input-mask": "^3.0.5",
-    "@types/react": "^18.2.66",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint": "^8.57.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
index af8c8fa1..b16fc1e6 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useContext } from 'react';
+import { Fragment, useCallback, useContext, useState } from 'react';
 import {
   CircleHelp,
   CirclePlus,
@@ -6,8 +6,8 @@ import {
   HeartHandshake,
   Info,
   LinkIcon,
-  Menu,
 } from 'lucide-react';
+import { Squash as Hamburger } from 'hamburger-react'
 
 import { SessionServices } from '@/service';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
@@ -19,6 +19,7 @@ import { usePartners } from '@/hooks';
 const BurgerMenu = () => {
   const { session } = useContext(SessionContext);
   const { data: partners } = usePartners();
+  const [isOpen, setOpen] = useState(false)
 
   const logout = useCallback(() => {
     SessionServices.logout()
@@ -32,11 +33,11 @@ const BurgerMenu = () => {
   }, []);
 
   return (
-    <Sheet modal={false}>
+    <Sheet modal={false} onOpenChange={() => setOpen(!isOpen)}>
       <SheetTrigger>
-        <Menu color="white" className="ml-2 mr-2" />
+        <Hamburger color='#fff' size={20} toggled={isOpen}/>
       </SheetTrigger>
-      <SheetContent side="left" className="pt-[96px] flex flex-col absolute top-[56px] h-screen">
+      <SheetContent side="left" className="pt-[30px] flex flex-col absolute top-[56px] h-screen">
         <div className="flex flex-col gap-4">
           {session && (
             <Fragment>
@@ -49,27 +50,27 @@ const BurgerMenu = () => {
           <BurguerMenuItem
             label="Sobre nós"
             link="/sobre-nos"
-            icon={<Info className="w-4 h-4" />}
+            icon={<Info className="w-5 h-5" />}
           />
           <BurguerMenuItem
             label="Cadastrar abrigo"
             link="https://forms.gle/2S7L2gR529Dc8P3T9"
-            icon={<CirclePlus className="w-4 h-4" />}
+            icon={<CirclePlus className="w-5 h-5" />}
           />
           <BurguerMenuItem
             label="Como Ajudar"
             link="https://www.instagram.com/reel/C613CfGuh4b"
-            icon={<CircleHelp className="w-4 h-4" />}
+            icon={<CircleHelp className="w-5 h-5" />}
           />
           <BurguerMenuItem
             label="Política de Privacidade"
             link="/politica-de-privacidade"
-            icon={<Info className="w-4 h-4" />}
+            icon={<Info className="w-5 h-5" />}
           />
           <BurguerMenuItem
             label="Apoiadores"
             link="/apoiadores"
-            icon={<HeartHandshake className="w-4 h-4" />}
+            icon={<HeartHandshake className="w-5 h-5" />}
           />
           <Separator />
           {partners.length > 0 && (
@@ -80,7 +81,7 @@ const BurgerMenu = () => {
                   key={idx}
                   label={partner.name}
                   link={partner.link}
-                  icon={<LinkIcon className="w-4 h-4" />}
+                  icon={<LinkIcon className="w-5 h-5" />}
                 />
               ))}
             </Fragment>
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index a8afd4c5..8274c47f 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -3,7 +3,6 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
-import { X } from 'lucide-react';
 
 const Sheet = SheetPrimitive.Root;
 
@@ -65,9 +64,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-3 mt-[-30px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-6 w-6" />
-      </SheetPrimitive.Close>
+      <SheetPrimitive.Close className="absolute right-3 mt-[-30px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"/>
     </SheetPrimitive.Content>
   </SheetPortal>
 ));

From 4926fc7c88476a3b36329278154ea3f202de1206 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolasgabrip@gmail.com>
Date: Mon, 20 May 2024 22:22:18 -0300
Subject: [PATCH 3/6] id to page and header

---
 src/components/BurgerMenu/BurgerMenu.tsx      | 146 ++++++++++--------
 src/components/ui/sheet.tsx                   |  37 ++---
 src/pages/AboutUs/AboutUs.tsx                 |   2 +-
 src/pages/CreateShelter/CreateShelter.tsx     |   2 +-
 src/pages/CreateSupply/CreateSupply.tsx       |   2 +-
 .../EditShelterSupply/EditShelterSupply.tsx   |   2 +-
 src/pages/Home/Home.tsx                       |   2 +-
 src/pages/PrivacyPolicy/PrivacyPolicy.tsx     |   2 +-
 src/pages/Shelter/Shelter.tsx                 |   2 +-
 src/pages/Supporters/Supporters.tsx           |   2 +-
 src/pages/UpdateShelter/UpdateShelter.tsx     |   2 +-
 11 files changed, 108 insertions(+), 93 deletions(-)

diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
index b16fc1e6..af3d7752 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useContext, useState } from 'react';
+import { Fragment, useCallback, useContext, useEffect, useState } from 'react';
 import {
   CircleHelp,
   CirclePlus,
@@ -10,7 +10,7 @@ import {
 import { Squash as Hamburger } from 'hamburger-react'
 
 import { SessionServices } from '@/service';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTrigger, SheetOverlay, SheetPortal, SheetClose } from '@/components/ui/sheet';
 import { BurguerMenuItem } from './components';
 import { Separator } from '../ui/separator';
 import { SessionContext } from '@/contexts';
@@ -20,6 +20,8 @@ const BurgerMenu = () => {
   const { session } = useContext(SessionContext);
   const { data: partners } = usePartners();
   const [isOpen, setOpen] = useState(false)
+  const [pageElement, setPageElement] = useState(document.body)
+  const [headerElement, setHeaderElement] = useState(document.body)
 
   const logout = useCallback(() => {
     SessionServices.logout()
@@ -32,72 +34,90 @@ const BurgerMenu = () => {
       });
   }, []);
 
+  useEffect(() => {
+    setPageElement(document.getElementById('page') || document.body)
+    setHeaderElement(document.getElementById('header') || document.body)
+  }, [])
+
+  const toggleMenu = () => {
+    setOpen(!isOpen)
+    setTimeout(() => { document.body.style.pointerEvents = ""}, 100)
+  }
+
   return (
-    <Sheet modal={false} onOpenChange={() => setOpen(!isOpen)}>
+    <Sheet modal={true} onOpenChange={toggleMenu} open={isOpen}>
       <SheetTrigger>
-        <Hamburger color='#fff' size={20} toggled={isOpen}/>
+        <Hamburger color='#fff' size={20} toggled={isOpen} aria-label="menu"/>
       </SheetTrigger>
-      <SheetContent side="left" className="pt-[30px] flex flex-col absolute top-[56px] h-screen">
-        <div className="flex flex-col gap-4">
+      <SheetClose>
+        close
+      </SheetClose>
+      <SheetPortal container={pageElement}>
+        <SheetOverlay />
+      </SheetPortal>
+      <SheetPortal container={headerElement}>
+        <SheetContent side="left" className="pt-[30px] flex flex-col absolute top-[56px] h-screen">
+          <div className="flex flex-col gap-4">
+            {session && (
+              <Fragment>
+                <div className="inline-flex items-center text-semibold">
+                  Olá, {session.name}
+                </div>
+                <Separator />
+              </Fragment>
+            )}
+            <BurguerMenuItem
+              label="Sobre nós"
+              link="/sobre-nos"
+              icon={<Info className="w-5 h-5" />}
+            />
+            <BurguerMenuItem
+              label="Cadastrar abrigo"
+              link="https://forms.gle/2S7L2gR529Dc8P3T9"
+              icon={<CirclePlus className="w-5 h-5" />}
+            />
+            <BurguerMenuItem
+              label="Como Ajudar"
+              link="https://www.instagram.com/reel/C613CfGuh4b"
+              icon={<CircleHelp className="w-5 h-5" />}
+            />
+            <BurguerMenuItem
+              label="Política de Privacidade"
+              link="/politica-de-privacidade"
+              icon={<Info className="w-5 h-5" />}
+            />
+            <BurguerMenuItem
+              label="Apoiadores"
+              link="/apoiadores"
+              icon={<HeartHandshake className="w-5 h-5" />}
+            />
+            <Separator />
+            {partners.length > 0 && (
+              <Fragment>
+                <span>Parcerias</span>
+                {partners.map((partner, idx) => (
+                  <BurguerMenuItem
+                    key={idx}
+                    label={partner.name}
+                    link={partner.link}
+                    icon={<LinkIcon className="w-5 h-5" />}
+                  />
+                ))}
+              </Fragment>
+            )}
+          </div>
           {session && (
-            <Fragment>
-              <div className="inline-flex items-center text-semibold">
-                Olá, {session.name}
-              </div>
-              <Separator />
-            </Fragment>
+            <div className="mt-auto">
+              <span
+                className="inline-flex items-center hover:font-semibold cursor-pointer"
+                onClick={logout}
+              >
+                <DoorOpen className="mr-2" /> Sair
+              </span>
+            </div>
           )}
-          <BurguerMenuItem
-            label="Sobre nós"
-            link="/sobre-nos"
-            icon={<Info className="w-5 h-5" />}
-          />
-          <BurguerMenuItem
-            label="Cadastrar abrigo"
-            link="https://forms.gle/2S7L2gR529Dc8P3T9"
-            icon={<CirclePlus className="w-5 h-5" />}
-          />
-          <BurguerMenuItem
-            label="Como Ajudar"
-            link="https://www.instagram.com/reel/C613CfGuh4b"
-            icon={<CircleHelp className="w-5 h-5" />}
-          />
-          <BurguerMenuItem
-            label="Política de Privacidade"
-            link="/politica-de-privacidade"
-            icon={<Info className="w-5 h-5" />}
-          />
-          <BurguerMenuItem
-            label="Apoiadores"
-            link="/apoiadores"
-            icon={<HeartHandshake className="w-5 h-5" />}
-          />
-          <Separator />
-          {partners.length > 0 && (
-            <Fragment>
-              <span>Parcerias</span>
-              {partners.map((partner, idx) => (
-                <BurguerMenuItem
-                  key={idx}
-                  label={partner.name}
-                  link={partner.link}
-                  icon={<LinkIcon className="w-5 h-5" />}
-                />
-              ))}
-            </Fragment>
-          )}
-        </div>
-        {session && (
-          <div className="mt-auto">
-            <span
-              className="inline-flex items-center hover:font-semibold cursor-pointer"
-              onClick={logout}
-            >
-              <DoorOpen className="mr-2" /> Sair
-            </span>
-          </div>
-        )}
-      </SheetContent>
+        </SheetContent>
+      </SheetPortal>
     </Sheet>
   );
 };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 8274c47f..87f41dc0 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -16,14 +16,14 @@ const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
+    <SheetPrimitive.Overlay
+      className={cn(
+        'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
@@ -50,23 +50,18 @@ interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
-const headerEl = document.getElementById('header')
-
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
 >(({ side = 'right', className, children, ...props }, ref) => (
-  <SheetPortal container={headerEl}>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-3 mt-[-30px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"/>
-    </SheetPrimitive.Content>
-  </SheetPortal>
+  <SheetPrimitive.Content
+    ref={ref}
+    className={cn(sheetVariants({ side }), className)}
+
+    {...props}
+  >
+    {children}
+  </SheetPrimitive.Content>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
diff --git a/src/pages/AboutUs/AboutUs.tsx b/src/pages/AboutUs/AboutUs.tsx
index 080c909e..ceb73b19 100644
--- a/src/pages/AboutUs/AboutUs.tsx
+++ b/src/pages/AboutUs/AboutUs.tsx
@@ -29,7 +29,7 @@ const AboutUs = () => {
   );
 
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center" id="page">
       <Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
       <div className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full">
         <h2 className="text-4xl pt-4 font-semibold !text-zinc-900">
diff --git a/src/pages/CreateShelter/CreateShelter.tsx b/src/pages/CreateShelter/CreateShelter.tsx
index 6003b603..630bf803 100644
--- a/src/pages/CreateShelter/CreateShelter.tsx
+++ b/src/pages/CreateShelter/CreateShelter.tsx
@@ -112,7 +112,7 @@ const CreateShelterComponent = () => {
   }, [cepData, setFieldValue, setErrors]);
 
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center" id="page">
       <Header
         title="Cadastrar novo abrigo"
         className="bg-white [&_*]:text-zinc-800 border-b-[1px] border-b-border"
diff --git a/src/pages/CreateSupply/CreateSupply.tsx b/src/pages/CreateSupply/CreateSupply.tsx
index 18fd1a3a..641297e4 100644
--- a/src/pages/CreateSupply/CreateSupply.tsx
+++ b/src/pages/CreateSupply/CreateSupply.tsx
@@ -81,7 +81,7 @@ const CreateSupply = () => {
   if (loading) return <LoadingScreen />;
 
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center" id="page">
       <Header
         title="Cadastrar novo item"
         className="bg-white [&_*]:text-zinc-800 border-b-[1px] border-b-border"
diff --git a/src/pages/EditShelterSupply/EditShelterSupply.tsx b/src/pages/EditShelterSupply/EditShelterSupply.tsx
index c7729e6e..69ca3da5 100644
--- a/src/pages/EditShelterSupply/EditShelterSupply.tsx
+++ b/src/pages/EditShelterSupply/EditShelterSupply.tsx
@@ -146,7 +146,7 @@ const EditShelterSupply = () => {
           {...modalData}
         />
       )}
-      <div className="flex flex-col h-screen items-center">
+      <div className="flex flex-col h-screen items-center" id="page">
         <Header
           title="Editar Itens"
           className="bg-white [&_*]:text-zinc-800 border-b-[1px] border-b-border"
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 4f51f924..5c12169c 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -88,7 +88,7 @@ const Home = () => {
   }, [refresh, filterData, shelters.filters, shelters.page, shelters.perPage]);
 
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center" id="page">
       {isModalOpen && (
         <Filter
           open={isModalOpen}
diff --git a/src/pages/PrivacyPolicy/PrivacyPolicy.tsx b/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
index d7de826b..b99dc466 100644
--- a/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
@@ -2,7 +2,7 @@ import { BurgerMenu, Header } from '@/components';
 
 const PrivacyPolicy = () => {
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center" id="page">
       <Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
       <div className="w-full flex flex-col gap-4 p-4 max-w-4xl [&_*]:text-zinc-500 pb-8">
         <h3 className="text-4xl pt-4 font-bold !text-zinc-900">
diff --git a/src/pages/Shelter/Shelter.tsx b/src/pages/Shelter/Shelter.tsx
index b3473806..5f78038f 100644
--- a/src/pages/Shelter/Shelter.tsx
+++ b/src/pages/Shelter/Shelter.tsx
@@ -87,7 +87,7 @@ const Shelter = () => {
   if (loading) return <LoadingScreen />;
 
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center" id="page">
       <Header
         title={shelter.name}
         startAdornment={
diff --git a/src/pages/Supporters/Supporters.tsx b/src/pages/Supporters/Supporters.tsx
index a24d9102..c6dacb72 100644
--- a/src/pages/Supporters/Supporters.tsx
+++ b/src/pages/Supporters/Supporters.tsx
@@ -9,7 +9,7 @@ const Supporters = () => {
   if (loading) return <LoadingScreen />;
 
   return (
-    <div className="flex flex-col h-screen items-center bg-gray-50 overflow-auto">
+    <div className="flex flex-col h-screen items-center bg-gray-50 overflow-auto" id="page">
       <Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
       <div className="flex flex-col gap-4 p-4 max-w-5xl pb-8 w-full">
         <h2 className="text-4xl pt-4 font-semibold !text-zinc-900">
diff --git a/src/pages/UpdateShelter/UpdateShelter.tsx b/src/pages/UpdateShelter/UpdateShelter.tsx
index a85a6f99..6ba59c02 100644
--- a/src/pages/UpdateShelter/UpdateShelter.tsx
+++ b/src/pages/UpdateShelter/UpdateShelter.tsx
@@ -101,7 +101,7 @@ const UpdateShelter = () => {
   if (loading) return <LoadingScreen />;
 
   return (
-    <div className="flex flex-col h-screen items-center">
+    <div className="flex flex-col h-screen items-center" id="page">
       <Header
         title="Atualização cadastral"
         className="bg-white [&_*]:text-zinc-800 border-b-[1px] border-b-border"

From afe7820ccf9fe90087e58929e2d3a5e3204312a6 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolasgabrip@gmail.com>
Date: Mon, 20 May 2024 22:56:48 -0300
Subject: [PATCH 4/6] fix: opening immediately after closing

---
 src/components/BurgerMenu/BurgerMenu.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
index af3d7752..df43af6d 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -10,7 +10,7 @@ import {
 import { Squash as Hamburger } from 'hamburger-react'
 
 import { SessionServices } from '@/service';
-import { Sheet, SheetContent, SheetTrigger, SheetOverlay, SheetPortal, SheetClose } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTrigger, SheetOverlay, SheetPortal } from '@/components/ui/sheet';
 import { BurguerMenuItem } from './components';
 import { Separator } from '../ui/separator';
 import { SessionContext } from '@/contexts';
@@ -40,8 +40,12 @@ const BurgerMenu = () => {
   }, [])
 
   const toggleMenu = () => {
+    console.log('agora está: ', isOpen)
     setOpen(!isOpen)
-    setTimeout(() => { document.body.style.pointerEvents = ""}, 100)
+    document.body.style.pointerEvents = "none"
+    setTimeout(() => { 
+      document.body.style.pointerEvents = "auto"
+    }, 500)
   }
 
   return (
@@ -49,9 +53,6 @@ const BurgerMenu = () => {
       <SheetTrigger>
         <Hamburger color='#fff' size={20} toggled={isOpen} aria-label="menu"/>
       </SheetTrigger>
-      <SheetClose>
-        close
-      </SheetClose>
       <SheetPortal container={pageElement}>
         <SheetOverlay />
       </SheetPortal>

From e6e91827b12e6e8b20714d0680c0e0e0faae5a7a Mon Sep 17 00:00:00 2001
From: Nicolas <nicolasgabrip@gmail.com>
Date: Tue, 21 May 2024 19:25:43 -0300
Subject: [PATCH 5/6] cleaning code

---
 src/components/BurgerMenu/BurgerMenu.tsx | 53 ++----------------------
 src/components/ui/sheet.tsx              | 18 ++++----
 2 files changed, 12 insertions(+), 59 deletions(-)

diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
index 3aa5ab84..b227e424 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -41,6 +41,7 @@ const BurgerMenu = () => {
   }, [])
 
   const toggleMenu = () => {
+    console.log('agora está: ', isOpen)
     setOpen(!isOpen)
     document.body.style.pointerEvents = "none"
     setTimeout(() => { 
@@ -67,56 +68,7 @@ const BurgerMenu = () => {
                 <Separator />
               </Fragment>
             )}
-            <BurguerMenuItem
-              label="Sobre nós"
-              link="/sobre-nos"
-              icon={<Info className="w-5 h-5" />}
-            />
-            <BurguerMenuItem
-              label="Cadastrar abrigo"
-              link="https://forms.gle/2S7L2gR529Dc8P3T9"
-              icon={<CirclePlus className="w-5 h-5" />}
-            />
-            <BurguerMenuItem
-              label="Como Ajudar"
-              link="https://www.instagram.com/reel/C613CfGuh4b"
-              icon={<CircleHelp className="w-5 h-5" />}
-            />
-            <BurguerMenuItem
-              label="Política de Privacidade"
-              link="/politica-de-privacidade"
-              icon={<Info className="w-5 h-5" />}
-            />
-            <BurguerMenuItem
-              label="Apoiadores"
-              link="/apoiadores"
-              icon={<HeartHandshake className="w-5 h-5" />}
-            />
-            <Separator />
-            {partners.length > 0 && (
-              <Fragment>
-                <span>Parcerias</span>
-                {partners.map((partner, idx) => (
-                  <BurguerMenuItem
-                    key={idx}
-                    label={partner.name}
-                    link={partner.link}
-                    icon={<LinkIcon className="w-5 h-5" />}
-                  />
-                ))}
-              </Fragment>
-            )}
-          </div>
-          {session && (
-            <div className="mt-auto">
-              <span
-                className="inline-flex items-center hover:font-semibold cursor-pointer"
-                onClick={logout}
-              >
-                <DoorOpen className="mr-2" /> Sair
-              </span>
-            </div>
-          )}
+           {/* deelete */}
           <BurguerMenuItem
             label="Sobre nós"
             link="/sobre-nos"
@@ -164,6 +116,7 @@ const BurgerMenu = () => {
               ))}
             </Fragment>
           )}
+        </div>
         {session && (
           <div className="mt-auto">
             <span
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 87f41dc0..9c463be6 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -16,14 +16,14 @@ const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-    <SheetPrimitive.Overlay
-      className={cn(
-        'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
@@ -48,7 +48,7 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+  VariantProps<typeof sheetVariants> { }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,

From 1b26b2909dcb023b382df7eb6b57c4d0c7c5c8ba Mon Sep 17 00:00:00 2001
From: Nicolas <nicolasgabrip@gmail.com>
Date: Tue, 21 May 2024 19:32:50 -0300
Subject: [PATCH 6/6] cleaning

---
 src/components/BurgerMenu/BurgerMenu.tsx | 6 ++----
 src/components/ui/sheet.tsx              | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
index b227e424..58edcd1d 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -41,7 +41,6 @@ const BurgerMenu = () => {
   }, [])
 
   const toggleMenu = () => {
-    console.log('agora está: ', isOpen)
     setOpen(!isOpen)
     document.body.style.pointerEvents = "none"
     setTimeout(() => { 
@@ -50,9 +49,9 @@ const BurgerMenu = () => {
   }
 
   return (
-    <Sheet modal={true} onOpenChange={toggleMenu} open={isOpen}>
+    <Sheet onOpenChange={toggleMenu} open={isOpen}>
       <SheetTrigger>
-        <Hamburger color='#fff' size={20} toggled={isOpen} aria-label="menu"/>
+        <Hamburger color="#fff" size={20} toggled={isOpen} aria-label="menu"/>
       </SheetTrigger>
       <SheetPortal container={pageElement}>
         <SheetOverlay />
@@ -68,7 +67,6 @@ const BurgerMenu = () => {
                 <Separator />
               </Fragment>
             )}
-           {/* deelete */}
           <BurguerMenuItem
             label="Sobre nós"
             link="/sobre-nos"
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 9c463be6..a0056f5c 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -57,7 +57,6 @@ const SheetContent = React.forwardRef<
   <SheetPrimitive.Content
     ref={ref}
     className={cn(sheetVariants({ side }), className)}
-
     {...props}
   >
     {children}