ghost-dao-interface/src/components/NavItem/NavItem.jsx

import { Box, Link, Accordion, AccordionSummary } from "@mui/material";
import { styled } from "@mui/material/styles";

import Chip from "../Chip/Chip";
import GhostStyledIcon from "../Icon/GhostIcon";
import ArrowUpIcon from "../../assets/icons/arrow-up.svg?react";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import { NavLink, useLocation } from "react-router-dom";

const PREFIX = "NavItem";

const classes = {
    root: `${PREFIX}-root`,
    title: `${PREFIX}-title`,
};

const Root = styled("div", { shouldForwardProp: prop => prop !== "match" })(({ theme, match }) => ({
    [`&.${classes.root}`]: {
        alignItems: "center",
        marginBottom: "12px",
        "& .link-container": {
            paddingRight: "12px",
        },
        "& a.active": {
            "& .link-container": {
                backgroundColor: theme.colors.gray[600],
            },
            textDecoration: "none",
        },
        "& .MuiAccordion-root": {
            background: "transparent",
            "& .MuiAccordionDetails-root a.active .activePill": {
                marginLeft: "-35px",
                marginRight: "35px",
            },
            "& .MuiAccordionSummary-expandIconWrapper": {
                padding: "0px 18px",
            },
            "& .MuiAccordionSummary-contentGutters": {
                "& > a": {
                    width: "100%",
                }
            }
        },
        "& .MuiAccordion-root &:last-child": {
            paddingBottom: "0px",
        },
        "& .MuiAccordionSummary-root": {
            padding: "0px",
            margin: "-12px 0 -12px",

            "& :has(a.active .link-container)": {
                backgroundColor: theme.colors.gray[600],
                marginRight: "-67px",
            },
            "& a.active .link-container": {
                margin: "0px",
            },
        },

        "& .MuiAccordionDetails-root": {
            "& .link-container .title": {
                fontSize: "13px",
                lineHeight: 1,
            },
            "& a.active .link-container": {
                backgroundColor: theme.colors.gray[600],
            },
            paddingLeft: "20px",
            display: "block",
            "& .nav-item-container": {
                paddingTop: "3px",
                paddingBottom: "3px",
                paddingRight: "0px",
            },
        },

        "& svg": {
            marginRight: "12px",
        },
        "& svg.accordion-arrow": {
            marginRight: "0px",
        },
        "& .external-site-link": {
            "& .external-site-link-icon": {
                opacity: "0",
            },
            "&:hover .external-site-link-icon": {
                marginLeft: "5px",
                opacity: "1",
            },
        },
    },

    [`& .${classes.title}`]: {
        lineHeight: "33px",
        paddingLeft: "12px",
        paddingTop: "3px",
        paddingBottom: "3px",
        fontSize: "15px",
    },
}));

const NavItem = ({
    chip,
    className = "",
    customIcon,
    icon,
    label,
    to,
    children,
    defaultExpanded = false,
    chipColor,
    ...props
}) => {
    const currentLocation = useLocation();
    const match = currentLocation.pathname === to || currentLocation.pathname === `/${to}`;

    const linkProps = props.href
        ? {
            href: props.href,
            target: "_blank",
            className: `external-site-link ${className}`,
        }
        : {
            component: NavLink,
            to: to,
            className: `button-dapp-menu ${className}`,
        };

    const LinkItem = () => (
        <Link {...linkProps} {...props} underline="hover" onClick={(e) => e.stopPropagation()}>
            <Box
                sx={{ fontFamily: "Ubuntu" }}
                display="flex"
                flexDirection="row"
                alignItems="center"
                alignContent="center"
                justifyContent="space-around"
                className="link-container"
            >
                <Box display="flex" width={"100%"} alignItems="center" className={`${classes.title} title`}>
                    {customIcon ? customIcon : icon && <GhostStyledIcon viewBox="0 0 25 25" component={icon} style={{ fontSize: "21px" }} />}
                    {label}
                    {props.href && <GhostStyledIcon
                        style={{ marginTop: "7px" }}
                        viewBox="0 0 30 30"
                        className="external-site-link-icon"
                        component={ArrowUpIcon}
                    />}
                </Box>
                {chip && <Chip size="small" label={chip} template={chipColor} />}
            </Box>
        </Link>
    );
    return (
        <Root className={`${classes.root} nav-item-container`} match={match}>
            {children ? (
                <Accordion defaultExpanded={defaultExpanded} arrowonlycollapse="true">
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon style={{ width: "18px", height: "18px" }} />}
                        children={<LinkItem />}
                    />
                    {children}
                </Accordion>
            ) : (
                <LinkItem />
            )}
        </Root>
    );
};

export default NavItem;