fix: (menu): Submenu link status and arrow notification dot on mobile (…

…#8039)

Add notification dot to arrow if any item exist with status (live, new)
that currently not visible on the view

<img width="423" alt="image"
src="https://github.com/pancakeswap/pancake-frontend/assets/2213635/ad06496a-088e-45ac-b7f9-2b069bd10a2a">

Add status to submenu item

<img width="400" alt="image"
src="https://github.com/pancakeswap/pancake-frontend/assets/2213635/85cc31d7-ba95-4123-8820-2fb6f8b6a7f9">


<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!--
copilot:all
-->
### <samp>🤖 Generated by Copilot at 2ebc9a0</samp>

### Summary
🎨📝♻️

<!--
1. 🎨 - This emoji represents the addition of color indicators for the
submenu items, which is a visual enhancement that affects the appearance
of the UI.
2. 📝 - This emoji represents the addition of status text for the submenu
items, which is a textual enhancement that affects the content of the
UI.
3. ♻️ - This emoji represents the refactoring of `NotificationDot` to
use the same color as the highlighted item, which is a code improvement
that affects the maintainability and consistency of the codebase.
-->
Added status indicators for submenu items in the UI kit. This allows
showing the current state of each submenu item, such as `live`, `soon`,
or `closed`, using the same colors as the dropdown menu items. Modified
`SubMenuItems.tsx` and `types.ts` to implement this feature.

> _The submenu of doom, it shows you the status_
> _With text and color, it warns you of the madness_
> _`LinkStatus` and `useMemo`, they power the display_
> _`NotificationDot` and highlight, they match in every way_

### Walkthrough
* Memoize highlighted item and color for submenu items using `useMemo`
hook
([link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-7b1a6a3f05ab0aa56579faf8e5c5fdd339241a62cc292bc5649a0442935fcca5L3-R3),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-7b1a6a3f05ab0aa56579faf8e5c5fdd339241a62cc292bc5649a0442935fcca5L47-R58))
* Import and use `LinkStatus` component to render status text and color
for submenu items
([link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-7b1a6a3f05ab0aa56579faf8e5c5fdd339241a62cc292bc5649a0442935fcca5R18),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-7b1a6a3f05ab0aa56579faf8e5c5fdd339241a62cc292bc5649a0442935fcca5L89-R100),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-7b1a6a3f05ab0aa56579faf8e5c5fdd339241a62cc292bc5649a0442935fcca5R129-R133))
* Update `NotificationDot` component to use highlighted item color
instead of hardcoded value
([link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-7b1a6a3f05ab0aa56579faf8e5c5fdd339241a62cc292bc5649a0442935fcca5L77-R88))
* Add `status` prop to `SubMenuItemsType` type and import `LinkStatus`
type from `DropdownMenu` types
([link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-df36b2c3bb1688013bc5ff64351870feb67ad1ec3ef85dbf892363cf25e7caf2L4-R4),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8039/files?diff=unified&w=0#diff-df36b2c3bb1688013bc5ff64351870feb67ad1ec3ef85dbf892363cf25e7caf2R12))

packages/uikit/src/components/SubMenuItems/SubMenuItems.tsx

@@ -1,6 +1,6 @@
 import { useIsomorphicLayoutEffect } from "framer-motion";
 import debounce from "lodash/debounce";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Box } from "../Box";
 import { DropdownMenuItemType } from "../DropdownMenu/types";
 import { AtomBox } from "../AtomBox";
@@ -15,6 +15,7 @@ import StyledSubMenuItems, {
 import { SubMenuItemsProps } from "./types";
 import { FlexGap } from "../Layouts";
 import NotificationDot from "../NotificationDot/NotificationDot";
+import { LinkStatus } from "../DropdownMenu/styles";
 
 const SUBMENU_CHEVRON_CLICK_MOVE_PX = 100;
 const SUBMENU_SCROLL_DEVIATION = 3;
@@ -44,7 +45,17 @@ const SubMenuItems: React.FC<React.PropsWithChildren<SubMenuItemsProps>> = ({
     else setRightClassName("");
   }, []);
 
-  const hasLabeledItem = items.some((item) => !!item.LabelIcon);
+  const { hasHighlightedItem, highlightedItemColor } = useMemo(() => {
+    const anyLabelIcon = items.some((item) => !!item.LabelIcon);
+    if (anyLabelIcon) {
+      return { hasHighlightedItem: true, highlightedItemColor: "success" as const };
+    }
+    const anyStatusIcon = items.find((item) => !!item.status);
+    if (anyStatusIcon) {
+      return { hasHighlightedItem: true, highlightedItemColor: anyStatusIcon?.status?.color || ("success" as const) };
+    }
+    return { hasHighlightedItem: false, highlightedItemColor: "success" as const };
+  }, [items]);
 
   useIsomorphicLayoutEffect(() => {
     layerController();
@@ -74,7 +85,7 @@ const SubMenuItems: React.FC<React.PropsWithChildren<SubMenuItemsProps>> = ({
             }}
           >
             {hasOverflowing && (
-              <NotificationDot show={hasLabeledItem} color="success">
+              <NotificationDot show={hasHighlightedItem} color={highlightedItemColor}>
                 <ChevronRightIcon width="24px" height="24px" />
               </NotificationDot>
             )}
@@ -86,7 +97,7 @@ const SubMenuItems: React.FC<React.PropsWithChildren<SubMenuItemsProps>> = ({
           onScroll={debounce(layerController, 100)}
           ref={scrollLayerRef}
         >
-          {items.map(({ label, LabelIcon, href, icon, itemProps, type, disabled, onClick }) => {
+          {items.map(({ label, LabelIcon, status, href, icon, itemProps, type, disabled, onClick }) => {
             const Icon = icon;
             const isExternalLink = type === DropdownMenuItemType.EXTERNAL_LINK;
             const linkProps = isExternalLink
@@ -115,6 +126,11 @@ const SubMenuItems: React.FC<React.PropsWithChildren<SubMenuItemsProps>> = ({
                       {Icon && <Icon color={isActive ? "secondary" : "textSubtle"} mr="4px" />}
                       {label}
                       {LabelIcon ? <LabelIcon /> : null}
+                      {status && (
+                        <LinkStatus textTransform="uppercase" color={status.color} fontSize="14px">
+                          {status.text}
+                        </LinkStatus>
+                      )}
                     </FlexGap>
                     {isExternalLink && (
                       <Box display={["none", null, "flex"]} style={{ alignItems: "center" }} ml="4px">

packages/uikit/src/components/SubMenuItems/types.ts

@@ -1,14 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ElementType } from "react";
 import { FlexProps } from "../Box";
-import { DropdownMenuItemType } from "../DropdownMenu/types";
+import { DropdownMenuItemType, LinkStatus } from "../DropdownMenu/types";
 
 export type SubMenuItemsType = {
   label: string;
   href: string;
   itemProps?: any;
   icon?: ElementType<any>;
   disabled?: boolean;
+  status?: LinkStatus;
   isMobileOnly?: boolean;
   type?: DropdownMenuItemType;
   onClick?: React.MouseEvent<HTMLElement>;