4778 multi select field front implement multi select type (#4887)

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -20,6 +20,7 @@ const StyledInnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: ${() => (useIsMobile() ? `100%` : '348px')};
+  overflow-x: hidden;
 `;
 
 const StyledIntermediateContainer = styled.div`

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx

@@ -0,0 +1,41 @@
+import { Tag } from '@/ui/display/tag/components/Tag';
+import {
+  Checkbox,
+  CheckboxShape,
+  CheckboxSize,
+} from '@/ui/input/components/Checkbox';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
+
+import {
+  StyledMenuItemBase,
+  StyledMenuItemLeftContent,
+} from '../internals/components/StyledMenuItemBase';
+
+type MenuItemMultiSelectTagProps = {
+  selected: boolean;
+  className?: string;
+  onClick?: () => void;
+  color: ThemeColor;
+  text: string;
+};
+
+export const MenuItemMultiSelectTag = ({
+  color,
+  selected,
+  className,
+  onClick,
+  text,
+}: MenuItemMultiSelectTagProps) => {
+  return (
+    <StyledMenuItemBase onClick={onClick} className={className}>
+      <Checkbox
+        size={CheckboxSize.Small}
+        shape={CheckboxShape.Squared}
+        checked={selected}
+      />
+      <StyledMenuItemLeftContent>
+        <Tag color={color} text={text} />
+      </StyledMenuItemLeftContent>
+    </StyledMenuItemBase>
+  );
+};