Improving menu open/close and fixing header at the top

package.json

@@ -26,31 +26,32 @@
     "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"
   },
   "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",

src/components/BurgerMenu/BurgerMenu.tsx

@@ -1,17 +1,17 @@
-import { Fragment, useCallback, useContext } from 'react';
+import { Fragment, useCallback, useContext, useEffect, useState } from 'react';
 import {
   CircleHelp,
   CirclePlus,
   DoorOpen,
   HeartHandshake,
   Info,
   LinkIcon,
-  Menu,
   ShieldAlert,
 } from 'lucide-react';
+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 } from '@/components/ui/sheet';
 import { BurguerMenuItem } from './components';
 import { Separator } from '../ui/separator';
 import { SessionContext } from '@/contexts';
@@ -20,6 +20,9 @@ import { usePartners } from '@/hooks';
 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,21 +35,38 @@ const BurgerMenu = () => {
       });
   }, []);
 
+  useEffect(() => {
+    setPageElement(document.getElementById('page') || document.body)
+    setHeaderElement(document.getElementById('header') || document.body)
+  }, [])
+
+  const toggleMenu = () => {
+    setOpen(!isOpen)
+    document.body.style.pointerEvents = "none"
+    setTimeout(() => { 
+      document.body.style.pointerEvents = "auto"
+    }, 500)
+  }
+
   return (
-    <Sheet>
+    <Sheet onOpenChange={toggleMenu} open={isOpen}>
       <SheetTrigger>
-        <Menu color="white" className="ml-2 mr-2" />
+        <Hamburger color="#fff" size={20} toggled={isOpen} aria-label="menu"/>
       </SheetTrigger>
-      <SheetContent side="left" className="pt-[96px] flex flex-col">
-        <div className="flex flex-col gap-4">
-          {session && (
-            <Fragment>
-              <div className="inline-flex items-center text-semibold">
-                Olá, {session.name}
-              </div>
-              <Separator />
-            </Fragment>
-          )}
+      <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"
@@ -105,7 +125,8 @@ const BurgerMenu = () => {
             </span>
           </div>
         )}
-      </SheetContent>
+        </SheetContent>
+      </SheetPortal>
     </Sheet>
   );
 };

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}

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;
 
@@ -49,25 +48,19 @@ 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>,
   SheetContentProps
 >(({ side = 'right', className, children, ...props }, ref) => (
-  <SheetPortal>
-    <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">
-        <X className="h-6 w-6" />
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
+  <SheetPrimitive.Content
+    ref={ref}
+    className={cn(sheetVariants({ side }), className)}
+    {...props}
+  >
+    {children}
+  </SheetPrimitive.Content>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 

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">

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"

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"

src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -173,7 +173,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"

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}

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">

src/pages/Shelter/Shelter.tsx

@@ -93,7 +93,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={

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">

src/pages/UpdateShelter/UpdateShelter.tsx

@@ -102,7 +102,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"