| /* |
| * 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 { |
| IconButton, |
| Flex, |
| useColorModeValue, |
| Text, |
| FlexProps, |
| } from '@chakra-ui/react'; |
| import { FiMenu } from 'react-icons/fi'; |
| |
| interface MobileProps extends FlexProps { |
| onOpen: () => void; |
| } |
| |
| const MobileNav = ({ onOpen }: MobileProps) => ( |
| <Flex |
| ml={{ base: 0, md: 60 }} |
| px={{ base: 4, md: 24 }} |
| height="20" |
| alignItems="center" |
| bg={useColorModeValue('white', 'gray.900')} |
| borderBottomWidth="1px" |
| borderBottomColor={useColorModeValue('gray.200', 'gray.700')} |
| justifyContent="flex-start" |
| display={{ base: 'flex', md: 'none' }} |
| > |
| <IconButton |
| variant="outline" |
| onClick={onOpen} |
| aria-label="open menu" |
| icon={<FiMenu />} |
| /> |
| |
| <Text fontSize="2xl" ml="8" fontWeight="bold"> |
| EventMesh |
| </Text> |
| </Flex> |
| ); |
| |
| export default MobileNav; |