From 15b8da79d052a126db0cd79ebf5f1bb40dbd8a59 Mon Sep 17 00:00:00 2001
From: joaoenrique <jebsantosalves@gmail.com>
Date: Fri, 17 May 2024 12:10:53 -0300
Subject: [PATCH] feat: add nav fixed and link self

---
 package.json                                  |  6 +--
 src/components/BurgerMenu/BurgerMenu.tsx      | 10 ++++-
 .../BurguerMenuItem/BurguerMenuItem.tsx       |  4 +-
 .../components/BurguerMenuItem/types.ts       |  1 +
 src/components/Header/Header.tsx              | 37 +++++++++++--------
 5 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 29dd3ef1..8f16a67b 100644
--- a/package.json
+++ b/package.json
@@ -28,12 +28,12 @@
     "formik": "^2.4.6",
     "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 +41,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 526a5e02..d092c483 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -34,9 +34,9 @@ const BurgerMenu = () => {
   return (
     <Sheet>
       <SheetTrigger>
-        <Menu color="white" className="ml-2 mr-2" />
+        <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 ">
         <div className="flex flex-col gap-4">
           {session && (
             <Fragment>
@@ -49,19 +49,23 @@ const BurgerMenu = () => {
           <BurguerMenuItem
             label="Sobre nós"
             link="/sobre-nos"
+            targetLink=''
             icon={<Info className="w-4 h-4" />}
           />
           <BurguerMenuItem
             label="Cadastrar abrigo"
+            targetLink='_blank'
             link="https://forms.gle/2S7L2gR529Dc8P3T9"
             icon={<CirclePlus className="w-4 h-4" />}
           />
           <BurguerMenuItem
             label="Como Ajudar"
+            targetLink='_blank'
             link="https://www.instagram.com/reel/C613CfGuh4b"
             icon={<CircleHelp className="w-4 h-4" />}
           />
           <BurguerMenuItem
+            targetLink=''
             label="Política de Privacidade"
             link="/politica-de-privacidade"
             icon={<Info className="w-4 h-4" />}
@@ -69,6 +73,7 @@ const BurgerMenu = () => {
           <BurguerMenuItem
             label="Apoiadores"
             link="/apoiadores"
+            targetLink=''
             icon={<HeartHandshake className="w-4 h-4" />}
           />
           <Separator />
@@ -78,6 +83,7 @@ const BurgerMenu = () => {
               {partners.map((partner, idx) => (
                 <BurguerMenuItem
                   key={idx}
+                  targetLink='_blank'
                   label={partner.name}
                   link={partner.link}
                   icon={<LinkIcon className="w-4 h-4" />}
diff --git a/src/components/BurgerMenu/components/BurguerMenuItem/BurguerMenuItem.tsx b/src/components/BurgerMenu/components/BurguerMenuItem/BurguerMenuItem.tsx
index 98d8a4c4..4eb0faba 100644
--- a/src/components/BurgerMenu/components/BurguerMenuItem/BurguerMenuItem.tsx
+++ b/src/components/BurgerMenu/components/BurguerMenuItem/BurguerMenuItem.tsx
@@ -7,13 +7,13 @@ const BurguerMenuItem = React.forwardRef<
   HTMLAnchorElement,
   IBurguerMenuItemProps
 >((props, ref) => {
-  const { icon, label, onClick, link, className = '', ...rest } = props;
+  const { icon, label, onClick, link, className = '', targetLink, ...rest } = props;
 
   return (
     <a
       ref={ref}
       href={link}
-      target="_blank"
+      target={targetLink}
       className={cn(
         'hover:font-semibold flex gap-2 items-center text-zinc-600 [&_svg]:stroke-zinc-500',
         className
diff --git a/src/components/BurgerMenu/components/BurguerMenuItem/types.ts b/src/components/BurgerMenu/components/BurguerMenuItem/types.ts
index d48e5ec0..5c6ad5eb 100644
--- a/src/components/BurgerMenu/components/BurguerMenuItem/types.ts
+++ b/src/components/BurgerMenu/components/BurguerMenuItem/types.ts
@@ -1,6 +1,7 @@
 export interface IBurguerMenuItemProps
   extends React.ComponentPropsWithoutRef<'a'> {
   label: string;
+  targetLink: string;
   icon?: React.ReactNode;
   link?: string;
   onClick?: () => void;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9dde1265..c21ef77a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -14,24 +14,29 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
   } = props;
 
   return (
-    <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]',
-        className
-      )}
-      {...rest}
-    >
-      <div className="flex gap-1 items-center">
-        {startAdornment}
-        <Link className="font-medium text-white" to="/">
-          {title}
-        </Link>
-      </div>
-      <div className="flex items-center">
-        <div className="cursor-pointer ">{endAdornment}</div>
+    <div className='w-full'>
+      <div
+        ref={ref}
+        className={cn(
+          'bg-red-600 w-100 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60] fixed',
+          className
+        )}
+        {...rest}
+      >
+        <div className="flex gap-1 items-center">
+          {startAdornment}
+          <Link className="font-medium text-white" to="/">
+            {title}
+          </Link>
+        </div>
+        <div className="flex items-center mb-5">
+          <div className="cursor-pointer ">{endAdornment}</div>
+        </div>
       </div>
+
+      <div className='mb-10'></div>
     </div>
+
   );
 });