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

Feat/improve mobile display (#843)

Browse Source 
* Ok 1

* Finished

* Fix PR

* Fix PR

* Fix desktop

* Fix

* Fix absolute listen click outside

* console.log

* Fix according to code review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-23 19:53:35 +02:00
committed by GitHub
parent 742791bd92
commit 21d5133564
45 changed files with 464 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
front/src/modules/ui/navbar/components/NavCollapseButton.tsx
View File

@ -1,14 +1,16 @@
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { useIsMobile } from '@/ui/hooks/useIsMobile';
import {
IconLayoutSidebarLeftCollapse,
IconLayoutSidebarRightCollapse,
} from '@/ui/icon';
import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
import { navbarIconSize } from '../constants';
const CollapseButton = styled.button`
align-items: center;
background: inherit;
border: 0;
@ -25,46 +27,33 @@ const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
justify-content: center;
padding: 0;
user-select: none;
width: 32px;
${(props) =>
props.hideOnDesktop &&
`@media (min-width: ${MOBILE_VIEWPORT}px) {
display:none;
}
`}
`;
type CollapseButtonProps = {
hideIfOpen?: boolean;
hideIfClosed?: boolean;
hideOnDesktop?: boolean;
direction?: 'left' | 'right';
};
export default function NavCollapseButton({
hideIfOpen,
hideOnDesktop,
direction = 'left',
}: CollapseButtonProps) {
const [isNavOpen, setIsNavOpen] = useRecoilState(isNavbarOpenedState);
const iconSize = useIsMobile()
? navbarIconSize.mobile
: navbarIconSize.desktop;
return (
<>
{isNavOpen && !hideIfOpen && (
<CollapseButton
onClick={() => setIsNavOpen(!isNavOpen)}
hideOnDesktop={hideOnDesktop}
>
<IconLayoutSidebarLeftCollapse size={16} />
{direction === 'left' ? (
<CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<IconLayoutSidebarLeftCollapse size={iconSize} />
</CollapseButton>
)}
{!isNavOpen && (
<CollapseButton
onClick={() => setIsNavOpen(!isNavOpen)}
hideOnDesktop={hideOnDesktop}
>
<IconLayoutSidebarRightCollapse size={16} />
) : (
<CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<IconLayoutSidebarRightCollapse size={iconSize} />
</CollapseButton>
)}
</>