Menu - TemplatesKart

Simple one

import React from 'react';
import {
  Flex,
  Text,
  Icon,
  Link,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { BiChevronDown } from 'react-icons/bi';

const MenuContainer = () => {
  return (
    <Flex
      w="full"
      h="230px"
      justifyContent="center"
      alignItems="flex-start"
      p={{ base: 5, sm: 10 }}
    >
      <DropDownMenu />
    </Flex>
  );
};

const dropdownLinks = [
  {
    name: 'Blog',
    path: '#'
  },
  {
    name: 'Documentation',
    path: '#'
  },
  {
    name: 'Github Repo',
    path: '#'
  }
];

// Ideally, only the DropDownMenu component should be used. The MenuContainer component is used to style the preview.
const DropDownMenu = () => {
  return (
    <Menu autoSelect={false} isLazy>
      {({ isOpen, onClose }) => (
        <>
          <MenuButton _hover={{ color: 'blue.400' }}>
            <Flex alignItems="center" fontWeight="bold">
              <Text>Community</Text>
              <Icon
                as={BiChevronDown}
                h={5}
                w={5}
                ml={1}
                transition="all .25s ease-in-out"
                transform={isOpen ? 'rotate(180deg)' : ''}
              />
            </Flex>
          </MenuButton>
          <MenuList
            bg={useColorModeValue('rgb(255, 255, 255)', 'rgb(26, 32, 44)')}
            border="none"
            boxShadow={useColorModeValue(
              '2px 4px 6px 2px rgba(160, 174, 192, 0.6)',
              '2px 4px 6px 2px rgba(9, 17, 28, 0.6)'
            )}
          >
            {dropdownLinks.map((link, index) => (
              <MenuLink key={index} name={link.name} path={link.path} onClose={onClose} />
            ))}
          </MenuList>
        </>
      )}
    </Menu>
  );
};

interface MenuLinkProps {
  name: string;
  path: string;
  onClose: () => void;
}

const MenuLink = ({ name, path, onClose }: MenuLinkProps) => {
  return (
    <Link href={path} onClick={() => onClose()}>
      <MenuItem _hover={{ color: 'blue.400', bg: useColorModeValue('gray.200', 'gray.700') }}>
        <Text>{name}</Text>
      </MenuItem>
    </Link>
  );
};

export default MenuContainer;

With sub label

import React from 'react';
import {
  Stack,
  Flex,
  Box,
  Popover,
  Link,
  Text,
  Icon,
  HStack,
  PopoverTrigger,
  PopoverContent,
  useDisclosure,
  useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaChevronDown } from 'react-icons/fa';

const menuData = [
  {
    id: 1,
    label: 'ProjectsKart',
    subLabel: 'Responsive Projects',
    href: '#'
  },
  {
    id: 2,
    label: 'ComponentsKart',
    subLabel: 'Responsive Components',
    href: '#'
  }
];

const MenuContainer = () => {
  return (
    <Flex
      w="full"
      h="280px"
      justifyContent={{ base: 'flex-start', sm: 'center' }}
      alignItems="flex-start"
      p={{ base: 5, sm: 10 }}
    >
      <DropDownMenu menuData={menuData} />
    </Flex>
  );
};

// Ideally, DropDownMenu component should be used. The MenuContainer component is used to style the preview.
interface MenuData {
  id: number;
  label: string;
  subLabel: string;
  href: string;
  linkColor?: string;
}

interface MenuDataProps {
  menuData: MenuData[];
}

const DropDownMenu = ({ menuData }: MenuDataProps) => {
  const linkColor = 'cyan.400';
  const { onOpen, onClose, isOpen } = useDisclosure();

  return (
    <Stack direction="row" spacing={4}>
      <Popover trigger="hover" placement="bottom-start" onOpen={onOpen} onClose={onClose}>
        <PopoverTrigger>
          <HStack alignItems="center" cursor="pointer" role="group">
            <Link
              href="#"
              p={2}
              fontSize={{ sm: 'md', md: 'lg' }}
              fontWeight="bold"
              color={useColorModeValue('gray.600', 'gray.200')}
              _groupHover={{
                color: linkColor
              }}
            >
              Templates
            </Link>
            <Icon
              as={FaChevronDown}
              h={4}
              w={4}
              _groupHover={{
                color: linkColor
              }}
              transition="all .25s ease-in-out"
              transform={isOpen ? 'rotate(180deg)' : ''}
            />
          </HStack>
        </PopoverTrigger>

        <PopoverContent
          border={0}
          boxShadow={useColorModeValue(
            '2px 4px 6px rgba(160, 174, 192, 0.6)',
            '0 4px 6px rgba(9, 17, 28, 0.9)'
          )}
          bg={useColorModeValue('white', 'gray.800')}
          p={4}
          rounded="lg"
          minW="xs"
        >
          <Stack>
            {menuData.map((data) => (
              <DropDownItem key={data.id} linkColor={linkColor} {...data} />
            ))}
          </Stack>
        </PopoverContent>
      </Popover>
    </Stack>
  );
};

const DropDownItem = ({ label, href, subLabel, linkColor }: MenuData) => {
  return (
    <Link
      href={href!}
      display="block"
      p={2}
      rounded="md"
      _hover={{ bg: useColorModeValue('gray.100', 'gray.900'), color: linkColor }}
    >
      <Stack direction="row" align="center">
        <Box>
          <Text fontWeight={500}>{label}</Text>
          <Text fontSize="sm">{subLabel}</Text>
        </Box>
      </Stack>
    </Link>
  );
};

export default MenuContainer;

With icon

import React from 'react';
import {
  Flex,
  Text,
  Icon,
  Link,
  Menu,
  HStack,
  Button,
  MenuButton,
  MenuList,
  MenuItem,
  useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { AiTwotoneThunderbolt } from 'react-icons/ai';
import { BiChevronDown } from 'react-icons/bi';
import { MdTimeline } from 'react-icons/md';
import { BsBook } from 'react-icons/bs';
import { IconType } from 'react-icons';

const dropdownLinks = [
  {
    name: 'Projects',
    path: '#',
    icon: MdTimeline
  },
  {
    name: 'Tech Stack',
    path: '#',
    icon: AiTwotoneThunderbolt
  },
  {
    name: 'Open Source',
    path: '#',
    icon: BsBook
  }
];

const MenuContainer = () => {
  return (
    <Flex
      w="full"
      h="230px"
      justifyContent="center"
      alignItems="flex-start"
      p={{ base: 5, sm: 10 }}
    >
      <DropDownMenu />
    </Flex>
  );
};

// Ideally, only the DropDownMenu component should be used. The MenuContainer component is used to style the preview.
const DropDownMenu = () => {
  const menuProps = {
    bg: useColorModeValue('gray.200', 'gray.700'),
    color: useColorModeValue('blue.500', 'blue.200')
  };

  return (
    <Menu autoSelect={false} isLazy>
      {({ isOpen, onClose }) => (
        <>
          <MenuButton
            as={Button}
            variant="ghost"
            size="sm"
            px={3}
            py={1}
            lineHeight="inherit"
            fontSize="1em"
            fontWeight="normal"
            rounded="md"
            height="auto"
            _hover={{ color: 'blue.400', bg: menuProps.bg }}
          >
            <Flex alignItems="center">
              <Text>Links</Text>
              <Icon
                as={BiChevronDown}
                h={5}
                w={5}
                ml={1}
                transition="all .25s ease-in-out"
                transform={isOpen ? 'rotate(180deg)' : ''}
              />
            </Flex>
          </MenuButton>
          <MenuList
            zIndex={5}
            bg={useColorModeValue('rgb(255, 255, 255)', 'rgb(26, 32, 44)')}
            border="none"
            boxShadow={useColorModeValue(
              '2px 4px 6px 2px rgba(160, 174, 192, 0.6)',
              '2px 4px 6px 2px rgba(9, 17, 28, 0.6)'
            )}
          >
            {dropdownLinks.map((link, index) => (
              <MenuLink
                key={index}
                name={link.name}
                path={link.path}
                icon={link.icon}
                onClose={onClose}
              />
            ))}
          </MenuList>
        </>
      )}
    </Menu>
  );
};

interface MenuLinkProps {
  name: string;
  path: string;
  icon: IconType;
  onClose: () => void;
}

const MenuLink = ({ name, path, icon, onClose }: MenuLinkProps) => {
  return (
    <Link href={path} onClick={() => onClose()}>
      <MenuItem _hover={{ color: 'blue.400', bg: useColorModeValue('gray.200', 'gray.700') }}>
        <HStack>
          <Icon as={icon} size={18} color="blue.400" />
          <Text>{name}</Text>
        </HStack>
      </MenuItem>
    </Link>
  );
};

export default MenuContainer;

With shadow

import React from 'react';
import {
  Flex,
  Text,
  Link,
  Avatar,
  VStack,
  Menu,
  MenuDivider,
  MenuButton,
  MenuList,
  MenuItem,
  useColorModeValue
} from '@chakra-ui/react';

const MenuContainer = () => {
  return (
    <Flex
      w="full"
      h="350px"
      justifyContent={{ base: 'flex-start', sm: 'center' }}
      alignItems="flex-start"
      p={{ base: 5, sm: 10 }}
    >
      <DropDownMenu />
    </Flex>
  );
};

// Ideally, only the DropDownMenu component should be used. The MenuContainer component is used to style the preview.
const DropDownMenu = () => {
  return (
    <Menu isLazy>
      <MenuButton>
        <Avatar
          size="md"
          rounded="full"
          src={'https://avatars2.githubusercontent.com/u/37842853?v=4'}
        />
      </MenuButton>
      <MenuList
        zIndex={5}
        border="2px solid"
        borderColor={useColorModeValue('gray.700', 'gray.100')}
        boxShadow="4px 4px 0"
      >
        <Link href="https://dev.to/m_ahmad" _hover={{ textDecoration: 'none' }} isExternal>
          <MenuItem>
            <VStack justifyContent="start" alignItems="left">
              <Text fontWeight="500">Muhammad Ahmad</Text>
              <Text size="sm" color="gray.500" mt="0 !important">
                @m_ahmad
              </Text>
            </VStack>
          </MenuItem>
        </Link>
        <MenuDivider />
        <MenuItem>
          <Text fontWeight="500">Dashboard</Text>
        </MenuItem>
        <MenuItem>
          <Text fontWeight="500">Create Post</Text>
        </MenuItem>
        <MenuDivider />
        <MenuItem>
          <Text fontWeight="500">Sign Out</Text>
        </MenuItem>
      </MenuList>
    </Menu>
  );
};

export default MenuContainer;