GitFOSS

// 3rd-party
import React, { FC } from "react";
import styled, { css } from "styled-components";
// app
import type { AppThemeScheme } from "../types";
import { NamedColors } from "../utils/style";

interface MenuItemProps {
  slug: string;
  active?: boolean;
  href?: string;
  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
  section?: boolean;
  themeScheme: AppThemeScheme;
  title?: string;
}

export const MenuItem: FC<MenuItemProps> = ({ children, ...props }) => {
  return <StyledMenuItem {...props}>{children}</StyledMenuItem>;
};

const StyledMenuItem = styled.a<MenuItemProps>`
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;

  min-height: 40px;
  height: 40px;
  width: 100%;

  ${({ themeScheme, active = false, section = false }) => css`
    padding: ${section ? "0 20px" : "0 20px 0 32px"};

    color: ${active || section
      ? NamedColors.TEXT_DEFAULT[themeScheme]
      : NamedColors.TEXT_MUTED[themeScheme]};
    background-color: ${active === false
      ? "transparent"
      : NamedColors.CARD_OVERLAY[themeScheme]};

    font-size: ${section ? 20 : 18}px;
    line-height: ${section ? 24 : 20}px;
  `};

  font-style: normal;
  font-weight: 600;
  text-decoration: none;

  transition: background-color 140ms ease-in-out 0s, color 140ms ease-in-out 0s;

  ${({ themeScheme, active = false }) =>
    active &&
    css`
      background-color: ${NamedColors.SIDE_MENU_ITEM_HOVER[themeScheme]};
      color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
      border-top: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};
      border-bottom: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};
    `};

  &:hover {
    ${({ themeScheme }) => css`
      background-color: ${NamedColors.SIDE_MENU_ITEM_HOVER[themeScheme]};
      color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
    `};
  }
`;