components/navigation/MenuItem.tsx

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import React, { FC, ReactNode } from 'react';
import {
  Flex, FlexProps, Link, Text,
} from '@chakra-ui/react';

interface MenuItemProps extends FlexProps {
  selected: boolean;
  active: boolean;
  href: string;
  children: string | number;
  setActiveName: (name: string) => void;
}

export const MenuItem = ({
  selected,
  active,
  href,
  children,
  setActiveName,
}: MenuItemProps) => (
  <Link
    position="relative"
    href={href}
    h="8"
    mt={1.5}
    mb={1.5}
    ml={3}
    mr={3}
    boxSizing="border-box"
    style={{ textDecoration: 'none' }}
    _focus={{ boxShadow: 'none' }}
    onMouseOver={() => setActiveName(children.toString())}
    onMouseOut={() => setActiveName('')}
  >
    <Flex
      position="absolute"
      zIndex={2}
      w="full"
      h="full"
      p="6"
      borderRadius="lg"
      align="center"
      role="group"
      cursor="pointer"
      fontSize="md"
      transition="color 0.15s, background-color 0.15s"
      color={selected || active ? '#2a62ad' : 'current'}
      fontWeight={selected ? 'bolder' : 'none'}
      bgColor={selected || active ? '#dce5fe' : 'none'}
      wordBreak="break-word"
      overflowWrap="normal"
    >
      {children}
    </Flex>
    {/* <Box
      position="absolute"
      zIndex={1}
      p={selected || active ? '4' : 0}
      borderRadius="lg"
      role="group"
      cursor="pointer"
      transition="width 0.3s, opacity 0.4s"
      bgGradient="linear(28deg,#2a4cad, #2a6bad, #28c9ff)"
      h="100%"
      w={selected || active ? '100%' : '0'}
      opacity={selected || active ? 1 : 0}
    /> */}
  </Link>
);

export const MenuGroupItem: FC<{ name: string; children: ReactNode }> = (
  props,
) => {
  const { name, children } = props;
  return (
    <Flex
      flexDirection="column"
      w="full"
      justifyContent="center"
      alignContent="center"
    >
      {name && (
        <Text
          mt={5}
          mb="2"
          pl="6"
          fontSize="xs"
          color="#a2b5d8"
          fontWeight="bold"
        >
          {name.toUpperCase()}
        </Text>
      )}
      {children}
    </Flex>
  );
};