refactor: 💄 Alteração nos ícones do menu de navegação

src/components/NavBar/OptionMenu/index.tsx

@@ -1,14 +1,11 @@
-import Image from "next/image";
 import { IconArea, TextMenu } from "../styles";
 import { OptionMenuProps } from "@/assets";
 import { CustomLink } from "@/components";
 
 const OptionMenu = ({
   name,
-  iconUnselect,
-  iconSelect,
+  icon,
   path,
-  alt,
   $isSelected,
   color,
   $highlightTextColor
@@ -19,15 +16,12 @@ const OptionMenu = ({
       href={path}>
       <IconArea
         $backgroundColor={color}
-        $isClicked={$isSelected}>
-        <Image
-          src={$isSelected ? iconSelect : iconUnselect}
-          alt={alt}
-        />
+        $isSelected={$isSelected}>
+        {icon}
       </IconArea>
       <TextMenu
         $highlightTextColor={$highlightTextColor}
-        $isClicked={$isSelected}>
+        $isSelected={$isSelected}>
         {name}
       </TextMenu>
     </CustomLink>

src/components/NavBar/data/index.tsx

@@ -1,42 +1,56 @@
-import { OptionMenuProps } from "@/assets";
-import homeBlack from "@/assets/Images/HomeBlack.png";
-import homeWhite from "@/assets/Images/HomeWhite.png";
-import callsBlack from "@/assets/Images/CallsBlack.png";
-import callsWhite from "@/assets/Images/CallsWhite.png";
-import requestBlack from "@/assets/Images/RequestsBlack.png";
-import requestWhite from "@/assets/Images/RequestsWhite.png";
-import searchBlack from "@/assets/Images/SearchBlack.png";
-import searchWhite from "@/assets/Images/SearchWhite.png";
-
-const navigationOptions: OptionMenuProps[] = [
-  {
-    name: "Iniciar",
-    path: "/",
-    alt: "inicio",
-    iconUnselect: homeBlack,
-    iconSelect: homeWhite
-  },
-  {
-    name: "Pesquisa",
-    path: "/pesquisa",
-    alt: "pesquisa",
-    iconUnselect: searchBlack,
-    iconSelect: searchWhite
-  },
-  {
-    name: "Chamados",
-    path: "/chamados",
-    alt: "chamados",
-    iconUnselect: callsBlack,
-    iconSelect: callsWhite
-  },
-  {
-    name: "Solicitações",
-    path: "/solicitacoes",
-    alt: "solicitações",
-    iconUnselect: requestBlack,
-    iconSelect: requestWhite
-  }
-];
-
-export default navigationOptions;
+import { OptionMenuProps } from "@/assets";
+import {
+  ClipboardText,
+  House,
+  ListDashes,
+  MagnifyingGlass
+} from "@phosphor-icons/react/dist/ssr";
+
+const navigationOptions: OptionMenuProps[] = [
+  {
+    name: "Iniciar",
+    path: "/",
+    alt: "inicio",
+    icon: (
+      <House
+        size={24}
+        color="#352F2F"
+      />
+    )
+  },
+  {
+    name: "Pesquisa",
+    path: "/pesquisa",
+    alt: "pesquisa",
+    icon: (
+      <MagnifyingGlass
+        size={24}
+        color="#352F2F"
+      />
+    )
+  },
+  {
+    name: "Chamados",
+    path: "/chamados",
+    alt: "chamados",
+    icon: (
+      <ListDashes
+        size={24}
+        color="#352F2F"
+      />
+    )
+  },
+  {
+    name: "Solicitações",
+    path: "/solicitacoes",
+    alt: "solicitações",
+    icon: (
+      <ClipboardText
+        size={24}
+        color="#352F2F"
+      />
+    )
+  }
+];
+
+export default navigationOptions;

src/components/NavBar/index.tsx

@@ -27,8 +27,7 @@ export const NavigationBar = ({
               name={option.name}
               path={option.path}
               alt={option.alt}
-              iconUnselect={option.iconUnselect}
-              iconSelect={option.iconSelect}
+              icon={option.icon}
               $isSelected={option.path === actualRoute}
             />
           );

src/components/NavBar/styles.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { OptionMenuStyleProps } from "@/assets";
+import Link from "next/link";
 
 export const ContainerMenu = styled.div<{ color?: string }>`
   position: absolute;
@@ -16,14 +17,15 @@ export const MenuList = styled.div<OptionMenuStyleProps>`
   padding: 1rem;
 `;
 
-export const OptionMenuStyle = styled.a<OptionMenuStyleProps>`
+export const OptionMenuStyle = styled(Link)<OptionMenuStyleProps>`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  background-color: ${({ $isClicked }) =>
-    $isClicked === true ? "#7AC143" : "#F5F5F5"};
+  background-color: ${({ $isSelected }) =>
+    $isSelected === true ? "#7AC143" : "#F5F5F5"};
+  /* F8F5F5 */
 `;
 
 export const IconArea = styled.div<OptionMenuStyleProps>`
@@ -33,12 +35,16 @@ export const IconArea = styled.div<OptionMenuStyleProps>`
   border-radius: 16px;
   align-items: center;
   justify-content: center;
-  background-color: ${({ $isClicked, $backgroundColor }) =>
-    $isClicked ? "#7AC143" : $backgroundColor || "#F5F5F5"};
+  background-color: ${({ $isSelected, $backgroundColor }) =>
+    $isSelected ? "#7AC143" : $backgroundColor || "#F5F5F5"};
 
   &:active {
     background-color: #c1f599;
   }
+
+  & > svg {
+    fill: ${({ $isSelected }) => ($isSelected ? "#F5F5F5" : "#352F2F")};
+  }
   transition: 0.2s ease-in-out;
 `;
 
@@ -48,7 +54,7 @@ export const TextMenu = styled.p<OptionMenuStyleProps>`
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
-  color: ${({ $isClicked, $highlightTextColor }) =>
-    $isClicked ? $highlightTextColor || "#7AC143" : "#252728"};
+  color: ${({ $isSelected, $highlightTextColor }) =>
+    $isSelected ? $highlightTextColor || "#7AC143" : "#252728"};
   list-style: none;
 `;

src/types/index.tsx

@@ -10,7 +10,7 @@ type IssueDisplayProps = {
   isUpdated?: boolean;
   color?: string;
   $borderColor?: string;
-  isClicked?: boolean;
+  isSelected?: boolean;
   onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 };
 
@@ -35,7 +35,7 @@ type IconProps = {
 };
 
 type OptionMenuStyleProps = {
-  $isClicked?: boolean;
+  $isSelected?: boolean;
   $backgroundColor?: string;
   $highlightTextColor?: string;
 };
@@ -44,8 +44,7 @@ type OptionMenuProps = {
   name: string;
   path: string;
   alt: string;
-  iconUnselect: StaticImageData;
-  iconSelect: StaticImageData;
+  icon: ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
   $isSelected?: boolean;
   color?: string;