From 14930c38cb8d635900efeeda15713079588c1bc5 Mon Sep 17 00:00:00 2001
From: Victor Santos <victords895@gmail.com>
Date: Sun, 19 May 2024 16:48:13 -0300
Subject: [PATCH] feat: add sticky header

---
 src/components/Header/Header.tsx                  | 2 +-
 src/pages/AboutUs/AboutUs.tsx                     | 2 +-
 src/pages/CreateShelter/CreateShelter.tsx         | 2 +-
 src/pages/CreateSupply/CreateSupply.tsx           | 2 +-
 src/pages/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 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9dde1265..eeaa49cc 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -17,7 +17,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
     <div
       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] sticky top-0',
         className
       )}
       {...rest}
diff --git a/src/pages/AboutUs/AboutUs.tsx b/src/pages/AboutUs/AboutUs.tsx
index 080c909e..170bf704 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 overflow-y-scroll">
       <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..89b7e0fb 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 overflow-y-scroll">
       <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..266f5f20 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 overflow-y-scroll">
       <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..de03f8b5 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 overflow-y-scroll">
         <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..6431cb86 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 overflow-y-scroll">
       {isModalOpen && (
         <Filter
           open={isModalOpen}
diff --git a/src/pages/PrivacyPolicy/PrivacyPolicy.tsx b/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
index d7de826b..2ac346e1 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 overflow-y-scroll">
       <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 78fea039..75876bb3 100644
--- a/src/pages/Shelter/Shelter.tsx
+++ b/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 overflow-y-scroll">
       <Header
         title={shelter.name}
         startAdornment={
diff --git a/src/pages/Supporters/Supporters.tsx b/src/pages/Supporters/Supporters.tsx
index a24d9102..6d351b05 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 overflow-y-scroll">
       <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 c1c8f739..fc379af1 100644
--- a/src/pages/UpdateShelter/UpdateShelter.tsx
+++ b/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 overflow-y-scroll">
       <Header
         title="Atualização cadastral"
         className="bg-white [&_*]:text-zinc-800 border-b-[1px] border-b-border"