Feat/improve mobile display (#843)

* 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

View File

@ -0,0 +1,29 @@
import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/hooks/useIsMobile';
import { leftNavbarWidth } from '../constants';
import NavBackButton from './NavBackButton';
import NavItemsContainer from './NavItemsContainer';
type OwnProps = {
children: React.ReactNode;
backButtonTitle: string;
};
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
padding-top: ${({ theme }) => theme.spacing(2)};
width: ${({ theme }) => (useIsMobile() ? '100%' : leftNavbarWidth.desktop)};
`;
export default function SubMenuNavbar({ children, backButtonTitle }: OwnProps) {
return (
<StyledContainer>
<NavBackButton title={backButtonTitle} />
<NavItemsContainer>{children}</NavItemsContainer>
</StyledContainer>
);
}