Niloofar/Added menu item component

src/components/AppLayout/Header/MenuItem/MenuItem.scss

@@ -0,0 +1,15 @@
+.deriv-menu-item {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    &:hover {
+        background: var(--du-general-hover, #e6e9e9);
+    }
+
+    &--active {
+        &:hover {
+            background: transparent;
+        }
+    }
+}

src/components/AppLayout/Header/MenuItem/index.tsx

@@ -0,0 +1,70 @@
+import {
+    ComponentProps,
+    PropsWithChildren,
+    ReactNode,
+    createElement,
+} from "react";
+import clsx from "clsx";
+import "./MenuItem.scss";
+
+/**
+ * Type definition for MenuItem props.
+ * @typedef TMenuItem
+ * @property {'a' | 'button'} as - The element type to render, 'a' for anchor or 'button' for button.
+ * @property {ReactNode} leftComponent - Optional component to display on the left side.
+ * @property {ReactNode} rightComponent - Optional component to display on the right side.
+ * @property {boolean} disableHover - If true, disables hover effects.
+ * @property {boolean} active - If true, applies an active state style.
+ */
+type TMenuItem = ComponentProps<"a" | "button"> & {
+    as: "a" | "button";
+    leftComponent?: ReactNode;
+    rightComponent?: ReactNode;
+    disableHover?: boolean;
+    active?: boolean;
+};
+
+/**
+ * MenuItem component that can render as either an anchor or a button element, with optional left and right components.
+ * The component uses the `as` prop to determine which HTML element to render.
+ * It supports additional HTML attributes which are spread into the resulting element.
+ *
+ * @param {PropsWithChildren<TMenuItem>} props - The props object for the MenuItem component.
+ * @param {'a' | 'button'} props.as - Determines the element type ('a' or 'button').
+ * @param {ReactNode} props.leftComponent - Optional component rendered on the left side of the MenuItem.
+ * @param {ReactNode} props.children - The main content of the MenuItem.
+ * @param {ReactNode} props.rightComponent - Optional component rendered on the right side of the MenuItem.
+ * @param {boolean} props.disableHover - If set to true, no hover effects are applied.
+ * @param {boolean} props.active - If set to true, the 'active' styling is applied.
+ * @param {string} props.className - Additional className for custom styling.
+ * @param {Object} props.otherProps - Spread into the element as additional HTML attributes.
+ * @returns {React.ReactElement} A React Element of type 'a' or 'button' based on the 'as' prop.
+ */
+export const MenuItem = ({
+    as,
+    leftComponent,
+    children,
+    rightComponent,
+    disableHover,
+    active,
+    className,
+    ...props
+}: PropsWithChildren<TMenuItem>) => {
+    const content = {
+        className: clsx(
+            "deriv-menu-item",
+            { "deriv-menu-item--active": active || disableHover },
+            className,
+        ),
+        children: [
+            createElement("div", { key: "leftComponent" }, leftComponent),
+            createElement("div", { key: "mainChildren" }, children),
+            createElement("div", { key: "rightComponent" }, rightComponent),
+        ],
+        ...props,
+    };
+
+    return createElement(as, { ...content });
+};
+
+MenuItem.displayName = "MenuItem";

src/components/AppLayout/Header/index.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps, PropsWithChildren } from "react";
 import clsx from "clsx";
 import { DerivLogo } from "./DerivLogo";
+import { MenuItem } from "./MenuItem";
 import "./Header.scss";
 
 /**
@@ -21,5 +22,6 @@ export const Header = ({
 );
 
 Header.DerivLogo = DerivLogo;
+Header.MenuItem = MenuItem;
 
 Header.displayName = "Header";

src/components/AppLayout/__test__/MenuItem.spec.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MenuItem } from "../Header/MenuItem";
+
+describe("MenuItem Component", () => {
+    it('renders as a button when "as" prop is "button"', () => {
+        render(
+            <MenuItem as="button" onClick={jest.fn()}>
+                Click me
+            </MenuItem>,
+        );
+        const button = screen.getByRole("button", { name: "Click me" });
+        expect(button).toBeInTheDocument();
+        expect(button.tagName).toBe("BUTTON");
+    });
+
+    it('renders as a link when "as" prop is "a" and href is provided', () => {
+        const href = "https://example.com";
+        render(
+            <MenuItem as="a" href={href}>
+                Visit Example
+            </MenuItem>,
+        );
+        const link = screen.getByRole("link", { name: "Visit Example" });
+        expect(link).toBeInTheDocument();
+        expect(link.tagName).toBe("A");
+        expect(link).toHaveAttribute("href", href);
+    });
+
+    it("applies active and disableHover classes correctly", () => {
+        render(
+            <MenuItem as="button" active disableHover className="custom-class">
+                Click me
+            </MenuItem>,
+        );
+        const button = screen.getByRole("button", { name: "Click me" });
+        expect(button).toHaveClass("deriv-menu-item");
+        expect(button).toHaveClass("deriv-menu-item--active");
+        expect(button).toHaveClass("custom-class");
+    });
+
+    it("handles onClick event for button", async () => {
+        const mockClick = jest.fn();
+        render(
+            <MenuItem as="button" onClick={mockClick}>
+                Click me
+            </MenuItem>,
+        );
+        const button = screen.getByRole("button", { name: "Click me" });
+        await userEvent.click(button);
+        expect(mockClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not break when missing optional props", () => {
+        render(
+            <MenuItem as="button" onClick={jest.fn()}>
+                Click me
+            </MenuItem>,
+        );
+        const button = screen.getByRole("button", { name: "Click me" });
+        expect(button).toBeInTheDocument();
+    });
+});

stories/MenuItem.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Header } from "../src/main";
+import { LegacyAdsIcon, LegacyWhatsappIcon } from "@deriv/quill-icons";
+
+const meta = {
+    title: "Components/MenuItem",
+    component: Header.MenuItem,
+    args: {
+        as: "a",
+        leftComponent: <LegacyWhatsappIcon width={16} height={16} />,
+        rightComponent: <LegacyAdsIcon width={16} height={16} />,
+        disableHover: false,
+        active: true,
+    },
+    argTypes: {
+        as: { control: false },
+        leftComponent: { control: false },
+        rightComponent: { control: false },
+        disableHover: { control: false },
+        active: { control: false },
+    },
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+} satisfies Meta<typeof Header.MenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    name: "Header.MenuItem",
+    render: (args) => (
+        <Header.MenuItem {...args}>
+            <span style={{ margin: "0 10px" }}>Menu Item</span>
+        </Header.MenuItem>
+    ),
+};