| /* |
| * 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. |
| */ |
| |
| /* eslint-disable react/jsx-props-no-spreading */ |
| import React, { FC, ReactNode } from 'react'; |
| import { |
| Box, |
| useColorModeValue, |
| Drawer, |
| DrawerContent, |
| useDisclosure, |
| } from '@chakra-ui/react'; |
| import Menus from './Menus'; |
| import MenusMobile from './MenusMobile'; |
| |
| const Sidebar: FC<{ children: ReactNode }> = ({ children }) => { |
| const { isOpen, onOpen, onClose } = useDisclosure(); |
| return ( |
| <> |
| <Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}> |
| <Menus |
| display={{ base: 'none', md: 'block' }} |
| onClose={() => onClose} |
| /> |
| <MenusMobile onOpen={onOpen} /> |
| <Box ml={{ base: 0, md: 60 }} p="4"> |
| {children} |
| </Box> |
| </Box> |
| <Drawer |
| autoFocus={false} |
| isOpen={isOpen} |
| placement="left" |
| onClose={onClose} |
| returnFocusOnClose={false} |
| onOverlayClick={onClose} |
| size="full" |
| > |
| <DrawerContent> |
| <Menus onClose={onClose} /> |
| </DrawerContent> |
| </Drawer> |
| </> |
| ); |
| }; |
| |
| export default Sidebar; |