feat: add nav fixed and link self

package.json

@@ -28,29 +28,29 @@
     "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"
   },
   "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

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

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

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;

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>
+
   );
 });