s

payment-iq/app/components/PageLinks/PageLinks.tsx

@@ -5,19 +5,10 @@ import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.inter
 import clsx from "clsx"; // Utility to merge class names
 import "./PageLinks.scss";
 
-interface PageLinksProps extends ISidebarLink {
-  className?: string;
-}
-
-export default function PageLinks({
-  title,
-  path,
-  icon: Icon,
-  className,
-}: PageLinksProps) {
+export default function PageLinks({ title, path, icon: Icon }: ISidebarLink) {
   return (
     <Link href={path} passHref legacyBehavior>
-      <a className={clsx("link-container", className)}>
+      <a className={clsx("link-container")}>
         {Icon && <Icon />}
         <span className="link-text">{title}</span>
       </a>

payment-iq/app/features/dashboard/header/dropDown/DropDown.scss

@@ -1,8 +1,9 @@
 /* DropDown.scss */
-
-.link-container-text {
-  color: var(--text-primary);
-  span {
-    color: var(--text-primary);
+.dropdown-container {
+  .link-container {
+    color: var(--text-secondary);
+    .link-text {
+      color: var(--text-primary);
+    }
   }
 }

payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx

@@ -41,21 +41,17 @@ export default function SidebarDropdown({ onChange }: Props) {
           },
         }}
       >
-        <MenuItem value="" disabled>
-          {/* <Em className="em">
-            Select a page
-            <ChevronRightIcon fontSize="small" sx={{ ml: 1 }} />
-          </Em> */}
-        </MenuItem>
-        {SIDEBAR_LINKS.map((link: ISidebarLink) => (
-          <PageLinks
-            key={link.path}
-            title={link.title}
-            path={link.path}
-            icon={link.icon}
-            className="link-container-text"
-          />
-        ))}
+        <MenuItem value="" disabled></MenuItem>
+        <div className="dropdown-container">
+          {SIDEBAR_LINKS.map((link: ISidebarLink) => (
+            <PageLinks
+              key={link.path}
+              title={link.title}
+              path={link.path}
+              icon={link.icon}
+            />
+          ))}
+        </div>
       </Select>
     </FormControl>
   );