1259/add compact view in opportunities (#2182)

* icons added

* recoil family state added for checking compact view in each card

* recoil state added for toggle button. Wether compact view show or not

* menu item modifed for right side content

* compact view toggle added in dropdown options

* dropdown width increased because compact view text was  overflowing

* compact view added in boardcard

* new animation added for in and out

* compact view enabled state added

* old state deleted

* sizes added in toggle component

* removed extra added code form navigation

* toggle size added in menuitem toggle

* MenuItemToggle added instead of MenuItemNavigate

* Compact view improved

front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx

@@ -1,15 +1,19 @@
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { Toggle } from '@/ui/input/components/Toggle';
+import { Toggle, ToggleSize } from '@/ui/input/components/Toggle';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
+import {
+  StyledMenuItemBase,
+  StyledMenuItemRightContent,
+} from '../internals/components/StyledMenuItemBase';
 
 type MenuItemToggleProps = {
   LeftIcon?: IconComponent;
   toggled: boolean;
   text: string;
-  className: string;
+  className?: string;
   onToggleChange?: (toggled: boolean) => void;
+  toggleSize?: ToggleSize;
 };
 
 export const MenuItemToggle = ({
@@ -18,6 +22,7 @@ export const MenuItemToggle = ({
   toggled,
   className,
   onToggleChange,
+  toggleSize,
 }: MenuItemToggleProps) => {
   const handleOnClick = () => {
     onToggleChange?.(!toggled);
@@ -26,7 +31,13 @@ export const MenuItemToggle = ({
   return (
     <StyledMenuItemBase className={className} onClick={handleOnClick}>
       <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
-      <Toggle value={toggled} onChange={onToggleChange} />
+      <StyledMenuItemRightContent>
+        <Toggle
+          value={toggled}
+          onChange={onToggleChange}
+          toggleSize={toggleSize}
+        />
+      </StyledMenuItemRightContent>
     </StyledMenuItemBase>
   );
 };