admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Expand on right drawer (#769)

Browse Source 
Ok
This commit is contained in:
Lucas Bordeau
2023-07-20 00:00:50 +02:00
committed by GitHub
parent 3336e6960d
commit c8065f82e8
13 changed files with 103 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
front/src/modules/ui/right-drawer/components/RightDrawerTopBarCloseButton.tsx
View File

@ -1,42 +1,19 @@
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { IconChevronsRight } from '@/ui/icon/index';
import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
const StyledButton = styled.button`
align-items: center;
background: none;
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
cursor: pointer;
display: flex;
flex-direction: row;
height: 24px;
padding: 3px;
transition: ${({ theme }) => theme.clickableElementBackgroundTransition};
width: 24px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
}
svg {
color: ${({ theme }) => theme.font.color.tertiary};
}
`;
import { IconButton } from '../../button/components/IconButton';
import { useRightDrawer } from '../hooks/useRightDrawer';
export function RightDrawerTopBarCloseButton() {
const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
const { closeRightDrawer } = useRightDrawer();
function handleButtonClick() {
setIsRightDrawerOpen(false);
closeRightDrawer();
}
return (
<StyledButton onClick={handleButtonClick}>
<IconChevronsRight size={16} />
</StyledButton>
<IconButton
icon={<IconChevronsRight size={16} />}
onClick={handleButtonClick}
/>
);
}