Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+
+import { PagePanel } from './PagePanel';
+
+type RightDrawerContainerProps = {
+  children: ReactNode;
+};
+
+const StyledMainContainer = styled.div`
+  background: ${({ theme }) => theme.background.noisy};
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+  min-height: 0;
+  padding: ${({ theme }) => theme.spacing(0, 3)};
+  width: 100%;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding-left: ${({ theme }) => theme.spacing(3)};
+    padding-bottom: 0;
+  }
+`;
+
+type LeftContainerProps = {
+  isRightDrawerOpen?: boolean;
+};
+
+const StyledLeftContainer = styled.div<LeftContainerProps>`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+export const RightDrawerContainer = ({
+  children,
+}: RightDrawerContainerProps) => (
+  <StyledMainContainer>
+    <StyledLeftContainer>
+      <PagePanel>{children}</PagePanel>
+    </StyledLeftContainer>
+    <RightDrawer />
+  </StyledMainContainer>
+);