LiteFarmOrg · antsgar · Mar 28, 2025 · Mar 11, 2025 · Mar 13, 2025 · Mar 13, 2025
@@ -25,23 +25,42 @@ export enum DesktopDrawerVariants {
   MODAL = 'modal',
 }
 
-interface DrawerProps {
+type CommonDrawerProps = {
   title: NonNullable<string | React.ReactNode>;
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
   buttonGroup?: React.ReactNode;
   fullHeight?: boolean;
-  desktopVariant?: DesktopDrawerVariants;
   addBackdrop?: boolean;
   classes?: {
     modal?: string;
     drawerBackdrop?: string;
     drawerHeader?: string;
     drawerContent?: string;
-    drawerContainer?: string;
+    drawerContainer?: string; // applied to all drawers
+    desktopSideDrawerContainer?: string;
   };
-}
+};
+
+type DrawerProps = CommonDrawerProps &
+  (
+    | {
+        desktopVariant?: DesktopDrawerVariants.DRAWER | DesktopDrawerVariants.MODAL;
+        desktopSideDrawerDirection?: never;
+        isCompactSideMenu?: never;
+      }
+    | {
+        desktopVariant: DesktopDrawerVariants.SIDE_DRAWER;
+        desktopSideDrawerDirection?: 'right';
+        isCompactSideMenu?: never;
+      }
+    | {
+        desktopVariant: DesktopDrawerVariants.SIDE_DRAWER;
+        desktopSideDrawerDirection: 'left';
+        isCompactSideMenu: boolean;
+      }
+  );
 
 const Drawer = ({
   title,
@@ -55,14 +74,19 @@ const Drawer = ({
     drawerHeader: '',
     drawerContent: '',
     drawerContainer: '',
+    desktopSideDrawerContainer: '',
   },
   fullHeight,
   desktopVariant = DesktopDrawerVariants.MODAL,
+  desktopSideDrawerDirection = 'right',
+  isCompactSideMenu,
   addBackdrop = true,
 }: DrawerProps) => {
   const theme = useTheme();
   const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
 
+  const isDesktopSideDrawer = isDesktop && desktopVariant === DesktopDrawerVariants.SIDE_DRAWER;
+
   return isDesktop && desktopVariant === DesktopDrawerVariants.MODAL && isOpen ? (
     <ModalComponent
       className={classes.modal}
@@ -88,13 +112,17 @@ const Drawer = ({
       <div
         className={clsx(
           styles.drawer,
-          isDesktop && desktopVariant === DesktopDrawerVariants.SIDE_DRAWER
-            ? styles.sideDrawer
-            : styles.bottomDrawer,
+          isDesktopSideDrawer ? styles.sideDrawer : styles.bottomDrawer,
+          isDesktopSideDrawer && styles[desktopSideDrawerDirection],
+          desktopSideDrawerDirection === 'left' && isCompactSideMenu
+            ? styles.withCompactSideMenu
+            : styles.withExpandedSideMenu,
           fullHeight && styles.fullHeight,
           isOpen ? styles.openD : '',
           classes.drawerContainer,
+          isDesktopSideDrawer && classes.desktopSideDrawerContainer,
         )}
+        inert={!isOpen ? '' : null}
       >
         <div className={clsx(styles.header, classes.drawerHeader)}>
           <div className={styles.title}>{title}</div>

@@ -38,7 +38,6 @@
   position: fixed;
   transition: all 0.2s ease-in-out;
   background-color: var(--White);
-  border-top-left-radius: 10px;
   padding: 16px;
   z-index: 1110;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
@@ -54,29 +53,58 @@
 }
 
 .bottomDrawer {
-  bottom: -100%;
+  border-radius: 4px 4px 0 0;
   left: 0;
   right: 0;
-  border-top-right-radius: 10px;
   margin: auto;
+}
+
+.sideDrawer {
+  top: var(--global-navbar-height);
+  max-height: calc(100vh - var(--global-navbar-height));
+}
+
+.right {
+  border-radius: 4px 0 0 4px;
+}
+
+.left {
+  border-radius: 0 4px 4px 0;
+}
+
+// Drawer opening properties
+.drawer.bottomDrawer {
+  bottom: -100%;
 
   &.openD {
     bottom: 0;
   }
 }
 
-.sideDrawer {
-  top: var(--global-navbar-height);
-  max-height: calc(100vh - var(--global-navbar-height));
+.sideDrawer.right {
   right: -100%;
-  border-bottom-left-radius: 10px;
-  width: 416px;
 
   &.openD {
     right: 0;
   }
 }
 
+.sideDrawer.left.withExpandedSideMenu {
+  left: -100%;
+
+  &.openD {
+    left: var(--global-side-menu-width);
+  }
+}
+
+.sideDrawer.left.withCompactSideMenu {
+  left: -100%;
+
+  &.openD {
+    left: var(--global-compact-side-menu-width);
+  }
+}
+
 .header {
   display: flex;
   justify-content: space-between;

@@ -50,7 +50,6 @@ export const WithPageTitle = ({
     <ClickAwayListener onClickAway={onClickAway} mouseEvent="onMouseDown" touchEvent="onTouchStart">
       <div>
         <Layout>
-          {/* @ts-expect-error */}
           <MultiStepPageTitle
             title={title}
             onGoBack={onGoBack}

@@ -96,6 +96,7 @@ export default function PureMapFooter({
         filterSettings={filterSettings}
         availableFilterSettings={availableFilterSettings}
         onMenuItemClick={onFilterMenuClick}
+        isCompactSideMenu={isCompactSideMenu}
       />
       <MapDrawer
         key={'add'}
@@ -104,6 +105,7 @@ export default function PureMapFooter({
         drawerDefaultHeight={window.innerHeight - 156}
         headerTitle={t('FARM_MAP.MAP_FILTER.ADD_TITLE')}
         onMenuItemClick={onAddMenuClick}
+        isCompactSideMenu={isCompactSideMenu}
       />
     </TourProviderWrapper>
   );

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -6,18 +8,22 @@ import { colors, DefaultThemeProvider } from '../../assets/theme';
 import PropTypes from 'prop-types';
 import { Main } from '../Typography';
 import styles from './styles.module.scss';
+import Icon from '../Icons';
+
 export default function MapDrawerMenuItem({
   onClick,
   isFilterMenuItem,
   isFiltered,
   children,
   name,
 }) {
+  const { t } = useTranslation();
+
   return (
     <DefaultThemeProvider>
       <ListItem
         button
-        style={{ backgroundColor: isFiltered ? '#F3F6FB' : 'white' }}
+        className={clsx(isFiltered ? styles.filteredItem : styles.menuItem)}
         onClick={onClick}
       >
         <ListItemIcon>{children}</ListItemIcon>
@@ -29,7 +35,10 @@ export default function MapDrawerMenuItem({
         {isFilterMenuItem ? (
           <EyeToggleIcon isFiltered={isFiltered} />
         ) : (
-          <span className={styles.plusIcon}>+</span>
+          <div className={styles.plusAdd}>
+            <Icon iconName={'PLUS_CIRCLE'} className={styles.plusIcon} />
+            {t('common:ADD')}
+          </div>
         )}
       </ListItem>
     </DefaultThemeProvider>

@@ -23,7 +23,7 @@ import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { locationEnum } from '../../containers/Map/constants';
 import MapDrawerMenuItem from './MapDrawerMenuItem';
-import Drawer from '../Drawer';
+import Drawer, { DesktopDrawerVariants } from '../Drawer';
 import styles from './styles.module.scss';
 
 export default function MapDrawer({
@@ -33,6 +33,7 @@ export default function MapDrawer({
   filterSettings,
   availableFilterSettings,
   headerTitle,
+  isCompactSideMenu,
 }) {
   const { t } = useTranslation();
 
@@ -200,9 +201,8 @@ export default function MapDrawer({
         )}
 
         {!!areaImgDict.length && (
-          <Label className={styles.label}>
+          <Label className={clsx(styles.label, !!filterSettings && styles.sectionLabelPadding)}>
             {t('FARM_MAP.MAP_FILTER.AREAS')}
-            <span className={styles.labelDivider} />
           </Label>
         )}
         {areaImgDict.map(({ key, name, icon }) => {
@@ -220,10 +220,11 @@ export default function MapDrawer({
         })}
 
         {!!lineImgDict.length && (
-          <Label className={styles.label}>
-            {t('FARM_MAP.MAP_FILTER.LINES')}
-            <span className={styles.labelDivider} />
-          </Label>
+          <>
+            <Label className={clsx(styles.label, styles.sectionLabelPadding)}>
+              {t('FARM_MAP.MAP_FILTER.LINES')}
+            </Label>
+          </>
         )}
         {lineImgDict.map(({ key, name, icon }) => (
           <MapDrawerMenuItem
@@ -238,9 +239,8 @@ export default function MapDrawer({
         ))}
 
         {!!pointImgDict.length && (
-          <Label className={styles.label}>
+          <Label className={clsx(styles.label, styles.sectionLabelPadding)}>
             {t('FARM_MAP.MAP_FILTER.POINTS')}
-            <span className={styles.labelDivider} />
           </Label>
         )}
         {pointImgDict.map(({ key, name, icon }) => (
@@ -264,7 +264,14 @@ export default function MapDrawer({
         data-cy="map-drawer"
         title={headerTitle}
         isOpen={showMapDrawer}
+        desktopVariant={DesktopDrawerVariants.SIDE_DRAWER}
+        desktopSideDrawerDirection="left"
+        isCompactSideMenu={isCompactSideMenu}
+        addBackdrop={false}
         onClose={() => setShowMapDrawer(false)}
+        classes={{
+          desktopSideDrawerContainer: styles.sideDrawerContainer,
+        }}
       >
         {list()}
       </Drawer>

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-.headerContentContainer  {
+.headerContentContainer {
   padding-bottom: 8px;
 }
 
@@ -34,19 +34,48 @@
 }
 
 .label {
-  height: 24px;
+  color: var(--Colors-Neutral-Neutral-600);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
 }
 
-.labelDivider {
-  display: inline-block;
-  border-top: 1px solid;
-  width: calc(100% - 80px);
-  transform: translate(11px, -3px);
-  color: #C4C4C4;
+.sectionLabelPadding {
+  padding-top: 32px;
+}
+
+// MapDrawerMenuItem.jsx
+.menuItem {
+  background-color: white;
+  &:hover {
+    background-color: var(--Colors-Primary-Primary-teal-50);
+  }
+}
+
+.filteredItem {
+  background-color: #f3f6fb;
+}
+
+.plusAdd {
+  display: flex;
+  padding: 2px;
+  align-items: center;
+  gap: 4px;
+
+  color: var(--Colors-Primary-Primary-teal-700);
+  font-weight: 600;
+  line-height: 24px;
 }
 
 .plusIcon {
-  color: var(--teal700);
-  font-size: 42px;
-  line-height: 16px;
+  background-color: transparent;
+}
+
+// Drawer
+.sideDrawerContainer {
+  top: calc(
+    var(--global-navbar-height) + var(--global-map-header-height) - 1px /* sm gap without adjust */
+  );
+  max-height: calc(100vh - var(--global-navbar-height) - var(--global-map-header-height));
+  min-width: 432px;
 }
@@ -16,7 +16,7 @@ import { matchPath } from 'react-router-dom';
 import useExpandable from '../../Expandable/useExpandableItem';
 import { ReactComponent as Logo } from '../../../assets/images/middle_logo.svg';
 import { useGetMenuItems } from '../../../hooks/useGetMenuItems';
-import Drawer, { DesktopDrawerVariants } from '../../Drawer';
+import Drawer from '../../Drawer';
 import { ReactComponent as CollapseMenuIcon } from '../../../assets/images/nav/collapse-menu.svg';
 import styles from './styles.module.scss';
 import { getLanguageFromLocalStorage } from '../../../util/getLanguageFromLocalStorage';
@@ -235,7 +235,6 @@ const PureSideMenu = ({
         isOpen={isDrawerOpen}
         onClose={onDrawerClose}
         fullHeight
-        desktopVariant={DesktopDrawerVariants.DRAWER}
         classes={{
           drawerContainer: styles.drawerContainer,
           drawerHeader: styles.drawerHeader,

@@ -27,7 +27,7 @@ export function CancelButton({ onCancel, showConfirmCancelModal, setShowConfirmC
   );
 }
 
-CancelButton.PropTypes = {
+CancelButton.propTypes = {
   onCancel: PropTypes.func,
   showConfirmCancelModal: PropTypes.bool,
   setShowConfirmCancelModal: PropTypes.func,