style: adding responsiveness

Author: marcoDmc

src/components/Alert/Alert.tsx

@@ -7,7 +7,7 @@ const Alert = (props: IAlert) => {
   return (
     <Card className="p-3 flex gap-3 border-zinc-200 border-[1px] rounded-md select-none w-full items-center text-justify">
       <div>{startAdornment}</div>
-      <span className="text-sm text-zinc-600">{description}</span>
+      <span className="text-sm text-zinc-600 max-sm:text-center">{description}</span>
     </Card>
   );
 };

src/components/Footer/Footer.tsx

@@ -17,7 +17,7 @@ const Footer = React.forwardRef<
         className
       )}
     >
-      <p className="text-white">
+      <p className="text-white max-sm:grid max-sm:place-items-center transition-all">
         Para cadastrar novos abrigos clique{' '}
         <a
           href="https://forms.gle/2S7L2gR529Dc8P3T9"
@@ -28,7 +28,7 @@ const Footer = React.forwardRef<
         </a>
       </p>
       <span className="text-white hidden md:block">•</span>
-      <span className="text-white flex flex-nowrap gap-2 items-center">
+      <span className="text-white flex flex-nowrap gap-2 items-center max-sm:grid max-sm:place-items-center transition-all">
         Projeto Open Source disponível em{' '}
         <a
           className="underline hover:text-gray-300 flex"

src/components/Header/Header.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { IHeader } from './types';
 import { cn } from '@/lib/utils';
 
@@ -15,21 +14,64 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
   } = props;
 
   return (
-    <div
+    <header
       ref={ref}
       className={cn(
-        'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full',
+        'bg-red-600 overflow-hidden flex min-h-[56px] justify-between items-center text-white p-3 gap-2 w-full',
         className
       )}
       {...rest}
     >
-      <div className="flex gap-1 items-center">
+      <div className="flex w-full max-w-42 h-full">
         {startAdornment}
-        <h3 className="font-medium text-white">{title}</h3>
-      </div>
-      <div className="flex items-center">
-        <div className="cursor-pointer ">{endAdornment}</div>
+        <h3 className="font-medium
+        w-auto
+        h-full
+        max-sm:truncate
+        max-sm:text-wrap
+      text-white flex
+        items-center
+        justify-start
+        max-sm:text-sm
+        ">{title}</h3>
       </div>
+      {statusHamburguer ? <div className='transition-all ease-linear flex justify-between items-center w-auto
+      max-sm:w-full
+      max-sm:max-w-72
+      max-sm:absolute
+      max-sm:top-0 
+      max-sm:right-0
+      h-full
+      rounded-tl-lg
+    max-sm:bg-red-500
+      max-sm:z-10
+      '>
+
+        <div className="flex 
+        items-center 
+        h-full
+        w-full
+        max-sm:grid
+        max-sm:place-items-center
+        max-sm:pt-5
+        max-sm:pl-5
+        ">
+          <div className="cursor-pointer">{endAdornment}</div>
+        </div>
+      </div> :
+
+        <div className="flex 
+        items-center 
+        h-full
+        justify-end
+        w-full
+        max-sm:hidden
+        max-sm:place-items-center
+        max-sm:pt-5
+        max-sm:pl-5
+        ">
+          <div className="cursor-pointer">{endAdornment}</div>
+        </div>
 
       }
 
@@ -48,7 +90,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
         {statusHamburguer ? <span className='w-full h-1 rounded transition-all bg-neutral-100 rotate-45 translate-y-2 scale-x-105'></span> : <span className='w-full h-1 rounded bg-neutral-100 transition-all'></span>}
         {statusHamburguer ? <span className='hidden transition-all'></span> : <span className='w-full h-1 rounded bg-neutral-100 scale-90 transition-all'></span>}
         {statusHamburguer ? <span className='w-full h-1 rounded transition-all bg-neutral-100 -rotate-45 -translate-y-2 scale-110'></span> : <span className='w-full h-1 rounded bg-neutral-100 transition-all'></span>}
-    </div>
+      </div>
     </header>
   );
 });

src/pages/Home/components/ShelterListView/ShelterListView.tsx

@@ -33,7 +33,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
 
     return (
       <div className={cn(className, 'flex flex-col gap-2')}>
-        <h1 className="text-[#2f2f2f] font-semibold text-2xl">
+        <h1 className="text-[#2f2f2f] font-semibold text-2xl max-sm:text-center">
           Abrigos disponíveis ({count})
         </h1>
         <Alert