From d14062a72ecfbf5fff5ed1e3fad0320f472ebf61 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Mon, 16 Oct 2023 22:27:50 +0545
Subject: [PATCH] Fix project details map (#910)

* feat (projectDetails): map - for small screen, full screen map visible(only map visible)

* feat (projectDetails): map - footer added to the map

* fix (MobileFooter) - border top added

* feat (bottomSheet): bottomSheet component made for mobile device

* feat (projectDetails): activities - bottomSheet made for activities

* feat (projectDetails): project info - added bottom sheet for project information for small screen

* feat (projectDetails) - fmtm logo and back button added for small screen

* fix (Accordion): interface added to props

* feat/fix (projectDetails): projectDetails component projectOption section  splitted to projectOption component. projectOptions added for others bottomSheet

* fix (projectDetails): bottomSheet - converted css to tailwind css, converted dom manipulation to react states

* fix (projectDetails): map - mapcontrols button gap reduced for small screens

* fix (bottomSheet): fmtm logo move bottom sheet expand/contract

* fix (projectDetails): margins/paddings updated for mobile view

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 CONTRIBUTING.md                               |   1 +
 src/frontend/src/api/Project.js               |   1 +
 .../src/components/ActivitiesPanel.jsx        |   2 +-
 src/frontend/src/components/OpenLayersMap.jsx |  18 +-
 .../MobileActivitiesContents.tsx              |  27 ++
 .../ProjectDetails/MobileFooter.tsx           |  91 ++++
 .../MobileProjectInfoContent.tsx              |  31 ++
 .../ProjectDetails/ProjectOptions.tsx         | 161 +++++++
 .../src/components/common/Accordion.tsx       |  12 +-
 .../src/components/common/BottomSheet.tsx     | 110 +++++
 src/frontend/src/shared/AssetModules.js       |   6 +
 src/frontend/src/store/slices/ProjectSlice.ts |   4 +
 src/frontend/src/styles/home.scss             |   2 +-
 src/frontend/src/views/MainView.jsx           |  18 +-
 src/frontend/src/views/ProjectDetails.jsx     | 413 +++++++-----------
 15 files changed, 640 insertions(+), 257 deletions(-)
 create mode 100644 src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
 create mode 100644 src/frontend/src/components/ProjectDetails/MobileFooter.tsx
 create mode 100644 src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
 create mode 100644 src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
 create mode 100644 src/frontend/src/components/common/BottomSheet.tsx

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2eb27e340d..322f93b478 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -17,6 +17,7 @@ Right now, we are in the process of building the prototype. We warmly welcome yo
 Create pull requests (PRs) for changes that you think are needed. We would really appreciate your help!
 
 Skills with the following would be beneficial:
+
 - Python
 - FastAPI
 - Javascript
diff --git a/src/frontend/src/api/Project.js b/src/frontend/src/api/Project.js
index e0e5288e90..66a21d6c87 100755
--- a/src/frontend/src/api/Project.js
+++ b/src/frontend/src/api/Project.js
@@ -44,6 +44,7 @@ export const ProjectById = (url, existingProjectList, projectId) => {
             title: resp.project_info?.[0]?.name,
             location_str: resp.location_str,
             description: resp.project_info[0]?.description,
+            short_description: resp.project_info[0]?.short_description,
             num_contributors: resp.num_contributors,
             total_tasks: resp.total_tasks,
             tasks_mapped: resp.tasks_mapped,
diff --git a/src/frontend/src/components/ActivitiesPanel.jsx b/src/frontend/src/components/ActivitiesPanel.jsx
index f85cdfd6d7..f2ab3d369a 100755
--- a/src/frontend/src/components/ActivitiesPanel.jsx
+++ b/src/frontend/src/components/ActivitiesPanel.jsx
@@ -114,7 +114,7 @@ const ActivitiesPanel = ({ defaultTheme, state, params, map, view, mapDivPostion
   }, [taskDisplay, state, searchText]);
 
   return (
-    <CoreModules.Stack p={2.5} width={'100%'} spacing={2}>
+    <CoreModules.Stack width={'100%'} spacing={2} className="sm:fmtm-p-4">
       <CoreModules.Typography
         variant="h1"
         fontSize={defaultTheme.typography.htmlFontSize}
diff --git a/src/frontend/src/components/OpenLayersMap.jsx b/src/frontend/src/components/OpenLayersMap.jsx
index aad3c32eb1..55cf0f65dd 100755
--- a/src/frontend/src/components/OpenLayersMap.jsx
+++ b/src/frontend/src/components/OpenLayersMap.jsx
@@ -21,6 +21,8 @@ import Button from './common/Button';
 import { ProjectActions } from '../store/slices/ProjectSlice';
 import TaskSectionModal from './ProjectDetails/TaskSectionPopup';
 import VectorLayer from 'ol/layer/Vector';
+import WindowDimension from '../hooks/WindowDimension';
+
 let currentLocationLayer = null;
 const OpenLayersMap = ({
   defaultTheme,
@@ -40,6 +42,8 @@ const OpenLayersMap = ({
   const [currentLocLayer, setCurrentLocLayer] = useState(null);
   const dispatch = CoreModules.useAppDispatch();
   const taskModalStatus = CoreModules.useAppSelector((state) => state.project.taskModalStatus);
+  const { windowSize } = WindowDimension();
+
   function elastic(t) {
     return Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1;
   }
@@ -177,7 +181,9 @@ const OpenLayersMap = ({
         btnDiv.className = 'ol-unselectable ol-control';
         index == 0
           ? (btnDiv.style.top = `${(btnsPosition = btnsPosition + 2)}%`)
-          : (btnDiv.style.top = `${(btnsPosition = btnsPosition + 9)}%`);
+          : windowSize.width >= 640
+          ? (btnDiv.style.top = `${(btnsPosition = btnsPosition + 9)}%`)
+          : (btnDiv.style.top = `${(btnsPosition = btnsPosition + 6)}%`);
         btnDiv.appendChild(btn);
         var control = new Control({
           element: btnDiv,
@@ -322,13 +328,17 @@ const OpenLayersMap = ({
   }, [map, currentLocLayer]);
 
   return (
-    <CoreModules.Stack spacing={1} direction={'column'} className="fmtm-px-0 sm:fmtm-px-[1rem] fmtm-py-[1rem]">
+    <CoreModules.Stack spacing={1} direction={'column'} className="fmtm-px-0 sm:fmtm-px-[1rem] sm:fmtm-py-[1rem]">
       <CoreModules.Stack
         id="project-details-map"
         // style={{ border: `4px solid ${defaultTheme.palette.error.main}` }}
         justifyContent={'center'}
-        height={608}
-        className="fmtm-border-y-[4px] sm:fmtm-border-x-[4px] fmtm-border-primaryRed"
+        // height={608}
+        className={`${
+          windowSize.width <= 640
+            ? 'fmtm-h-[100vh]'
+            : 'fmtm-border-y-[4px] sm:fmtm-border-x-[4px] fmtm-border-primaryRed fmtm-h-[608px]'
+        }`}
       >
         <div ref={mapElement} id="map_container"></div>
         {/* <div id="popup" className="ol-popup">
diff --git a/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx b/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
new file mode 100644
index 0000000000..0dc1683b2c
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import ActivitiesPanel from '../ActivitiesPanel';
+import CoreModules from '../../shared/CoreModules';
+
+const MobileActivitiesContents = ({ map, mainView, mapDivPostion }) => {
+  const params = CoreModules.useParams();
+  const state = CoreModules.useAppSelector((state) => state.project);
+  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
+
+  return (
+    <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[10vh]">
+      <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
+        <ActivitiesPanel
+          params={params}
+          state={state.projectTaskBoundries}
+          defaultTheme={defaultTheme}
+          map={map}
+          view={mainView}
+          mapDivPostion={mapDivPostion}
+          states={state}
+        />
+      </CoreModules.Stack>
+    </div>
+  );
+};
+
+export default MobileActivitiesContents;
diff --git a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
new file mode 100644
index 0000000000..865441e783
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import AssetModules from '../../shared/AssetModules.js';
+import CoreModules from '../../shared/CoreModules';
+import { ProjectActions } from '../../store/slices/ProjectSlice';
+
+const MobileFooter = () => {
+  const dispatch = CoreModules.useAppDispatch();
+  const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
+
+  console.log(mobileFooterSelection, 'mobileFooterSelection');
+
+  const footerItem = [
+    {
+      id: 'explore',
+      title: 'Explore',
+      icon: (
+        <AssetModules.LocationOnIcon
+          className={`${
+            mobileFooterSelection === 'explore' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    {
+      id: 'projectInfo',
+      title: 'Project Info',
+      icon: (
+        <AssetModules.InfoIcon
+          className={`${
+            mobileFooterSelection === 'projectInfo' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    {
+      id: 'activities',
+      title: 'Activities',
+      icon: (
+        <AssetModules.TaskIcon
+          className={`${
+            mobileFooterSelection === 'activities' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    {
+      id: 'others',
+      title: 'Others',
+      icon: (
+        <AssetModules.MoreVertIcon
+          className={`${
+            mobileFooterSelection === 'others' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px]">
+      <div className="fmtm-w-full fmtm-grid fmtm-grid-cols-4 fmtm-bg-white  fmtm-pb-4 fmtm-pt-2 fmtm-gap-5 fmtm-px-2">
+        {footerItem.map((item) => (
+          <div
+            key={item.id}
+            onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item.id))}
+            className="fmtm-group fmtm-cursor-pointer"
+          >
+            <div
+              className={`fmtm-w-full fmtm-flex fmtm-justify-center fmtm-py-1 fmtm-rounded-3xl fmtm-mb-1 fmtm-duration-300 ${
+                mobileFooterSelection === item.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
+              }`}
+            >
+              <div>{item.icon}</div>
+            </div>
+            <div className="fmtm-flex fmtm-justify-center">
+              <p
+                className={`${
+                  mobileFooterSelection === item.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+                } fmtm-duration-300 fmtm-text-sm`}
+              >
+                {item.title}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MobileFooter;
diff --git a/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx b/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
new file mode 100644
index 0000000000..52972813f5
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import AssetModules from '../../shared/AssetModules';
+
+const MobileProjectInfoContent = ({ projectInfo }) => {
+  console.log('projectInfo', projectInfo);
+  return (
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-mb-[10vh]">
+      <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2">
+        <AssetModules.InfoIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
+        <p className="fmtm-text-2xl">Project Information</p>
+      </div>
+      <div className="fmtm-flex fmtm-gap-3">
+        <p className="fmtm-text-2xl fmtm-text-primaryRed">#{projectInfo?.id}</p>
+      </div>
+      <div className="fmtm-flex fmtm-gap-3">
+        <p className="fmtm-text-xl">Name: </p>
+        <p className="fmtm-text-xl">{projectInfo?.title}</p>
+      </div>
+      <div className="fmtm-flex fmtm-flex-col">
+        <p className="fmtm-text-xl">Short Description:</p>
+        <p className="fmtm-text-lg fmtm-text-grey-700">{projectInfo?.short_description}</p>
+      </div>
+      <div className="fmtm-flex fmtm-flex-col">
+        <p className="fmtm-text-xl">Description:</p>
+        <p className="fmtm-text-lg fmtm-text-grey-700">{projectInfo?.description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default MobileProjectInfoContent;
diff --git a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
new file mode 100644
index 0000000000..70814f7e25
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
@@ -0,0 +1,161 @@
+import Accordion from '../../components/common/Accordion';
+import React, { useState } from 'react';
+import CoreModules from '../../shared/CoreModules';
+import AssetModules from '../../shared/AssetModules';
+import environment from '../../environment';
+import { DownloadDataExtract, DownloadProjectForm } from '../../api/Project';
+import MapLegends from '../../components/MapLegends';
+
+const ProjectOptions = ({ setToggleGenerateModal }) => {
+  const dispatch = CoreModules.useAppDispatch();
+  const params = CoreModules.useParams();
+
+  const [toggleAction, setToggleAction] = useState(false);
+  const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading);
+  const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading);
+  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
+
+  const encodedId = params.id;
+  const decodedId = environment.decode(encodedId);
+
+  const handleDownload = (downloadType) => {
+    if (downloadType === 'form') {
+      dispatch(
+        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/download_form/${decodedId}/`, downloadType),
+      );
+    } else if (downloadType === 'geojson') {
+      dispatch(
+        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/${decodedId}/download_tasks`, downloadType),
+      );
+    }
+  };
+  const onDataExtractDownload = () => {
+    dispatch(
+      DownloadDataExtract(`${import.meta.env.VITE_API_URL}/projects/features/download/?project_id=${decodedId}`),
+    );
+  };
+  return (
+    <div className="fmtm-mt-4">
+      <div>
+        <div
+          className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-4 sm:fmtm-mx-7 fmtm-mb-2 ${
+            toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
+          }`}
+        >
+          <p className="fmtm-text-xl fmtm-italic">Project Options</p>
+          <div
+            className={
+              'fmtm-rounded-full fmtm-shadow-gray-400 fmtm-w-8 fmtm-h-8 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-lg fmtm-cursor-pointer'
+            }
+            onClick={() => setToggleAction(!toggleAction)}
+          >
+            <AssetModules.ArrowRightIcon
+              color=""
+              style={{ fontSize: 32 }}
+              className={`${toggleAction ? 'fmtm-rotate-90' : ''}`}
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
+          toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
+        }`}
+      >
+        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-2 sm:fmtm-ml-4">
+          <CoreModules.LoadingButton
+            onClick={() => handleDownload('form')}
+            sx={{ width: 'unset' }}
+            loading={downloadProjectFormLoading.type === 'form' && downloadProjectFormLoading.loading}
+            loadingPosition="end"
+            endIcon={<AssetModules.FileDownloadIcon />}
+            variant="contained"
+            color="error"
+          >
+            Form
+          </CoreModules.LoadingButton>
+          <CoreModules.LoadingButton
+            onClick={() => handleDownload('geojson')}
+            sx={{ width: 'unset' }}
+            loading={downloadProjectFormLoading.type === 'geojson' && downloadProjectFormLoading.loading}
+            loadingPosition="end"
+            endIcon={<AssetModules.FileDownloadIcon />}
+            variant="contained"
+            color="error"
+          >
+            Tasks
+          </CoreModules.LoadingButton>
+          <CoreModules.LoadingButton
+            onClick={() => onDataExtractDownload()}
+            sx={{ width: 'unset' }}
+            loading={downloadDataExtractLoading}
+            loadingPosition="end"
+            endIcon={<AssetModules.FileDownloadIcon />}
+            variant="contained"
+            color="error"
+            className="fmtm-truncate"
+          >
+            Data Extract
+          </CoreModules.LoadingButton>
+        </div>
+        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-2 sm:fmtm-ml-4 fmtm-gap-6">
+          <CoreModules.Link
+            to={`/projectInfo/${encodedId}`}
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'flex-end',
+              textDecoration: 'none',
+              marginRight: '15px',
+            }}
+            className="fmtm-w-fit"
+          >
+            <CoreModules.Button variant="contained" color="error">
+              ProjectInfo
+            </CoreModules.Button>
+          </CoreModules.Link>
+          <CoreModules.Button
+            onClick={() => setToggleGenerateModal(true)}
+            variant="contained"
+            color="error"
+            sx={{ width: '200px', mr: '15px' }}
+            endIcon={<AssetModules.BoltIcon />}
+            className="fmtm-truncate"
+          >
+            Generate MbTiles
+          </CoreModules.Button>
+          <CoreModules.Link
+            to={`/edit-project/project-details/${encodedId}`}
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'flex-end',
+              textDecoration: 'none',
+              marginRight: '15px',
+            }}
+            className="fmtm-w-fit"
+          >
+            <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate">
+              Edit Project
+            </CoreModules.Button>
+          </CoreModules.Link>
+        </div>
+        <div className="fmtm-px-1 sm:fmtm-hidden">
+          <Accordion
+            collapsed={true}
+            disableHeaderClickToggle
+            onToggle={() => {}}
+            header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
+            body={
+              <div className="fmtm-mt-4">
+                <MapLegends defaultTheme={defaultTheme} />
+              </div>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectOptions;
diff --git a/src/frontend/src/components/common/Accordion.tsx b/src/frontend/src/components/common/Accordion.tsx
index deadf63fad..a0e460d3bc 100644
--- a/src/frontend/src/components/common/Accordion.tsx
+++ b/src/frontend/src/components/common/Accordion.tsx
@@ -1,6 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import AssetModules from '../../shared/AssetModules';
 
+interface IAccordion {
+  collapsed?: boolean;
+  header: any;
+  body: any;
+  className?: string;
+  onToggle: any;
+  description?: string;
+  disableHeaderClickToggle?: boolean;
+}
+
 export default function Accordion({
   collapsed: isCollapsed,
   header,
@@ -9,7 +19,7 @@ export default function Accordion({
   onToggle,
   description,
   disableHeaderClickToggle,
-}) {
+}: IAccordion) {
   const [collapsed, setCollapsed] = useState(isCollapsed);
 
   useEffect(() => {
diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
new file mode 100644
index 0000000000..536a1a369f
--- /dev/null
+++ b/src/frontend/src/components/common/BottomSheet.tsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useRef, useState } from 'react';
+import FmtmLogo from '../../assets/images/hotLog.png';
+
+const BottomSheet = ({ body, onClose }) => {
+  const sheetContentRef: any = useRef(null);
+  const bottomSheetRef: any = useRef(null);
+  const logoRef: any = useRef(null);
+  const [startY, setStartY] = useState(0);
+  const [startHeight, setStartHeight] = useState(0);
+  const [currSheetHeight, setCurrSheetHeight] = useState(0);
+  const [show, setShow] = useState(true);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+
+  useEffect(() => {
+    setShow(true);
+    document.body.style.overflowY = 'hidden';
+    bottomSheetRef.current.style.height = `51vh`;
+    updateSheetHeight(50);
+  }, []);
+
+  const updateSheetHeight = (height) => {
+    if (sheetContentRef.current) {
+      sheetContentRef.current.style.height = `${height}vh`;
+      const top = sheetContentRef.current.getBoundingClientRect().top;
+      const logoHeight = logoRef.current.getBoundingClientRect().height;
+      logoRef.current.style.top = `${top - logoHeight}px`;
+    }
+    if (height === 100) {
+      setIsFullScreen(true);
+    } else {
+      setIsFullScreen(false);
+    }
+  };
+
+  const hideBottomSheet = () => {
+    setShow(false);
+
+    onClose();
+    document.body.style.overflowY = 'auto';
+  };
+
+  const dragStart = (e) => {
+    const pagesY = e.pageY || e.changedTouches[0].screenY;
+    setStartY(pagesY);
+    setStartHeight(parseInt(sheetContentRef.current.style.height));
+
+    setIsDragging(true);
+  };
+
+  const dragging = (e) => {
+    const delta = startY - (e.pageY || e.changedTouches[0].screenY);
+    const newHeight = startHeight + (delta / window.innerHeight) * 100;
+    bottomSheetRef.current.style.height = `100vh`;
+    updateSheetHeight(newHeight);
+  };
+
+  const dragStop = () => {
+    let sheetHeight;
+    bottomSheetRef.current.style.height = `${currSheetHeight + 1}vh`;
+
+    setIsDragging(false);
+    sheetHeight = parseInt(sheetContentRef.current.style.height);
+    setCurrSheetHeight(sheetHeight);
+
+    sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(100) : updateSheetHeight(50);
+  };
+
+  useEffect(() => {
+    dragStop();
+  }, [currSheetHeight]);
+
+  return (
+    <div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden">
+      <div
+        className={`bottom-sheet fmtm-fixed fmtm-w-full fmtm-left-0 fmtm-bottom-0 fmtm-flex fmtm-items-center fmtm-flex-col fmtm-justify-end fmtm-duration-100 fmtm-ease-linear ${
+          !show ? 'fmtm-opacity-0 fmtm-pointer-events-none' : 'fmtm-opacity-100 fmtm-pointer-events-auto'
+        }`}
+        ref={bottomSheetRef}
+      >
+        <div className={`fmtm-fixed fmtm-left-0`} ref={logoRef}>
+          <img src={FmtmLogo} alt="Hot Fmtm Logo" className="fmtm-ml-2 fmtm-z-10 fmtm-w-[5.2rem]  fmtm-mb-4" />
+        </div>
+        <div
+          ref={sheetContentRef}
+          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_10px_5px_rgba(0,0,0,0.1)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-py-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
+            !show ? 'fmtm-translate-y-[100%]' : 'fmtm-translate-y-[0%]'
+          } ${isDragging ? 'fmtm-transition-none' : ''} ${isFullScreen ? 'fmtm-rounded-none' : 'fmtm-rounded-t-2xl'}`}
+        >
+          <div className="header fmtm-flex fmtm-justify-center">
+            <div
+              className="drag-icon fmtm-cursor-grab fmtm-select-none fmtm-p-4 -fmtm-mt-4 fmtm-z-[9999]"
+              onMouseDown={dragStart}
+              onTouchStart={dragStart}
+              onMouseMove={dragging}
+              onTouchMove={dragging}
+              onMouseUp={dragStop}
+              onTouchEnd={dragStop}
+            >
+              <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full hover:fmtm-bg-primaryRed"></span>
+            </div>
+          </div>
+          <div className="body fmtm-overflow-y-scroll scrollbar fmtm-h-full fmtm-p-[1px]">{body}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BottomSheet;
diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
index 624f20cfb1..d16853f5d3 100755
--- a/src/frontend/src/shared/AssetModules.js
+++ b/src/frontend/src/shared/AssetModules.js
@@ -43,6 +43,9 @@ import {
   Settings as SettingsIcon,
   DriveFolderUpload as DriveFolderUploadIcon,
   KeyboardArrowUp as KeyboardArrowUpIcon,
+  Info as InfoIcon,
+  MoreVert as MoreVertIcon,
+  LocationOn as LocationOnIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
 import RedLockPng from '../assets/images/red-lock.png';
@@ -96,4 +99,7 @@ export default {
   SettingsIcon,
   DriveFolderUploadIcon,
   KeyboardArrowUpIcon,
+  InfoIcon,
+  MoreVertIcon,
+  LocationOnIcon,
 };
diff --git a/src/frontend/src/store/slices/ProjectSlice.ts b/src/frontend/src/store/slices/ProjectSlice.ts
index 04f80561fc..f853fc5296 100755
--- a/src/frontend/src/store/slices/ProjectSlice.ts
+++ b/src/frontend/src/store/slices/ProjectSlice.ts
@@ -19,6 +19,7 @@ const ProjectSlice = createSlice({
     downloadTilesLoading: false,
     downloadDataExtractLoading: false,
     taskModalStatus: false,
+    mobileFooterSelection: 'explore',
   },
   reducers: {
     SetProjectTaskBoundries(state, action) {
@@ -70,6 +71,9 @@ const ProjectSlice = createSlice({
     ToggleTaskModalStatus(state, action) {
       state.taskModalStatus = action.payload;
     },
+    SetMobileFooterSelection(state, action) {
+      state.mobileFooterSelection = action.payload;
+    },
   },
 });
 
diff --git a/src/frontend/src/styles/home.scss b/src/frontend/src/styles/home.scss
index 837407da91..4713afb356 100755
--- a/src/frontend/src/styles/home.scss
+++ b/src/frontend/src/styles/home.scss
@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: center;
   position: absolute;
-  right: 0;
+  right: 10px;
 }
 
 .container {
diff --git a/src/frontend/src/views/MainView.jsx b/src/frontend/src/views/MainView.jsx
index 3f7f8d8b0f..aa722f3f94 100755
--- a/src/frontend/src/views/MainView.jsx
+++ b/src/frontend/src/views/MainView.jsx
@@ -46,18 +46,28 @@ const MainView = () => {
       <CoreModules.Paper>
         <CoreModules.Container disableGutters={true} maxWidth={false}>
           <CoreModules.Stack sx={{ height: '100vh' }}>
-            {popupInParams !== 'true' && (
+            {popupInParams === 'true' || (location.pathname.includes('project_details') && windowSize.width <= 640) ? (
+              <div></div>
+            ) : (
               <div>
                 <MappingHeader />
                 <PrimaryAppBar />
               </div>
             )}
             <CoreModules.Stack
-              className={`mainview fmtm-py-[1.3rem] ${
-                location.pathname.includes('project_details') ? 'fmtm-px-0 sm:fmtm-px-[1.3rem]' : 'fmtm-px-[1.3rem]'
+              className={`mainview ${
+                location.pathname.includes('project_details')
+                  ? 'fmtm-px-0 sm:fmtm-px-[1.3rem] sm:fmtm-py-[1.3rem]'
+                  : 'fmtm-px-[1.3rem] fmtm-py-[1.3rem]'
               }`}
               sx={{
-                height: popupInParams ? '100vh' : windowSize.width <= 599 ? '90vh' : '92vh',
+                height: popupInParams
+                  ? '100vh'
+                  : location.pathname.includes('project_details') && windowSize.width <= 640
+                  ? '100vh'
+                  : windowSize.width <= 599
+                  ? '90vh'
+                  : '92vh',
                 overflow: 'auto',
                 // p: '1.3rem',
               }}
diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
index b544f4918c..6276baea7e 100755
--- a/src/frontend/src/views/ProjectDetails.jsx
+++ b/src/frontend/src/views/ProjectDetails.jsx
@@ -6,7 +6,7 @@ import MapDescriptionComponents from '../components/MapDescriptionComponents';
 import ActivitiesPanel from '../components/ActivitiesPanel';
 import OpenLayersMap from '../components/OpenLayersMap';
 import environment from '../environment';
-import { DownloadDataExtract, DownloadProjectForm, ProjectById } from '../api/Project';
+import { ProjectById } from '../api/Project';
 import { ProjectActions } from '../store/slices/ProjectSlice';
 import CustomizedSnackbar from '../utilities/CustomizedSnackbar';
 import { defaults } from 'ol/control/defaults';
@@ -22,22 +22,28 @@ import { HomeActions } from '../store/slices/HomeSlice';
 import CoreModules from '../shared/CoreModules';
 import AssetModules from '../shared/AssetModules';
 import GeoJSON from 'ol/format/GeoJSON';
+import FmtmLogo from '../assets/images/hotLog.png';
 
 import Overlay from 'ol/Overlay';
 import GenerateMbTiles from '../components/GenerateMbTiles';
 import { ProjectBuildingGeojsonService } from '../api/SubmissionService';
 import { get } from 'ol/proj';
 import { buildingStyle, basicGeojsonTemplate } from '../utilities/mapUtils';
-import Button from '../../src/components/common/Button';
-import Accordion from '../../src/components/common/Accordion';
 import MapLegends from '../components/MapLegends';
 import TaskSectionPopup from '../components/ProjectDetails/TaskSectionPopup';
 import DialogTaskActions from '../components/DialogTaskActions';
 import QrcodeComponent from '../components/QrcodeComponent';
+import MobileFooter from '../components/ProjectDetails/MobileFooter';
+import MobileActivitiesContents from '../components/ProjectDetails/MobileActivitiesContents';
+import BottomSheet from '../components/common/BottomSheet';
+import MobileProjectInfoContent from '../components/ProjectDetails/MobileProjectInfoContent';
+import { useNavigate } from 'react-router-dom';
+import ProjectOptions from '../components/ProjectDetails/ProjectOptions';
 
 const Home = () => {
   const dispatch = CoreModules.useAppDispatch();
   const params = CoreModules.useParams();
+  const navigate = useNavigate();
 
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const state = CoreModules.useAppSelector((state) => state.project);
@@ -57,9 +63,8 @@ const Home = () => {
   const decodedId = environment.decode(encodedId);
   const { windowSize, type } = WindowDimension();
   const { y } = OnScroll(map, windowSize.width);
-  const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading);
-  const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading);
   const projectBuildingGeojson = CoreModules.useAppSelector((state) => state.project.projectBuildingGeojson);
+  const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
   const [toggleAction, setToggleAction] = useState(false);
 
   //snackbar handle close funtion
@@ -278,263 +283,179 @@ const Home = () => {
 
   TasksLayer(map, mainView, featuresLayer);
 
-  const handleDownload = (downloadType) => {
-    if (downloadType === 'form') {
-      dispatch(
-        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/download_form/${decodedId}/`, downloadType),
-      );
-    } else if (downloadType === 'geojson') {
-      dispatch(
-        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/${decodedId}/download_tasks`, downloadType),
-      );
-    }
-  };
-  const onDataExtractDownload = () => {
-    dispatch(
-      DownloadDataExtract(`${import.meta.env.VITE_API_URL}/projects/features/download/?project_id=${decodedId}`),
-    );
-  };
-
   return (
-    <CoreModules.Stack spacing={2}>
+    <div>
       {/* Customized Modal For Generate Tiles */}
-      <GenerateMbTiles
-        toggleGenerateModal={toggleGenerateModal}
-        setToggleGenerateModal={setToggleGenerateModal}
-        projectInfo={state.projectInfo}
-      />
+      <div>
+        <GenerateMbTiles
+          toggleGenerateModal={toggleGenerateModal}
+          setToggleGenerateModal={setToggleGenerateModal}
+          projectInfo={state.projectInfo}
+        />
 
-      {/* Home snackbar */}
-      <CustomizedSnackbar
-        duration={stateSnackBar.duration}
-        open={stateSnackBar.open}
-        variant={stateSnackBar.variant}
-        message={stateSnackBar.message}
-        handleClose={handleClose}
-      />
+        {/* Home snackbar */}
+        <CustomizedSnackbar
+          duration={stateSnackBar.duration}
+          open={stateSnackBar.open}
+          variant={stateSnackBar.variant}
+          message={stateSnackBar.message}
+          handleClose={handleClose}
+        />
+      </div>
 
       {/* Top project details heading medium dimension*/}
-      <CoreModules.Stack
-        sx={{ display: { md: 'flex', xs: 'none' } }}
-        direction="column"
-        justifyContent="center"
-        spacing={5}
-        alignItems={'center'}
-      >
-        <CoreModules.Stack
-          direction={'row'}
-          p={2}
-          spacing={2}
-          divider={
-            <CoreModules.Divider
-              sx={{ backgroundColor: defaultTheme.palette.grey['main'] }}
-              orientation="vertical"
-              flexItem
-            />
-          }
-        >
-          <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-            <AssetModules.LocationOn color="error" style={{ fontSize: 22 }} />
-            <CoreModules.Typography variant="h1">{state.projectInfo.title}</CoreModules.Typography>
-          </CoreModules.Stack>
-
-          <CoreModules.Stack>
-            <CoreModules.Typography variant="h4" fontSize={defaultTheme.typography.fontSize}>
-              {`#${state.projectInfo.id}`}
-            </CoreModules.Typography>
-          </CoreModules.Stack>
-
-          <CoreModules.Stack mt={'5%'}>
-            <CoreModules.Typography
-              variant="h4"
-              fontSize={defaultTheme.typography.fontSize}
-              color={defaultTheme.palette.warning['main']}
-            >
-              {state.projectInfo.priority_str}
-            </CoreModules.Typography>
-          </CoreModules.Stack>
-        </CoreModules.Stack>
-      </CoreModules.Stack>
-
-      {/* project Details Title */}
-      <CoreModules.Stack sx={{ display: { xs: 'flex', md: 'none' } }} spacing={2}>
-        <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-          <AssetModules.LocationOn color="error" style={{ marginTop: '1.5%', fontSize: 22 }} />
-          <CoreModules.Typography variant="caption">{state.projectInfo.title}</CoreModules.Typography>
-        </CoreModules.Stack>
-
-        <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-          <CoreModules.Typography variant="h1" fontSize={defaultTheme.typography.fontSize}>
-            {`#${state.projectInfo.id}`}
-          </CoreModules.Typography>
-        </CoreModules.Stack>
-
-        <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-          <CoreModules.Typography
-            variant="h1"
-            fontSize={defaultTheme.typography.fontSize}
-            color={defaultTheme.palette.warning['main']}
-          >
-            {state.projectInfo.priority_str}
-          </CoreModules.Typography>
-        </CoreModules.Stack>
-      </CoreModules.Stack>
-
-      {/* Center description and map */}
-      <CoreModules.Stack direction={'column'} spacing={1}>
-        <MapDescriptionComponents defaultTheme={defaultTheme} state={state} type={type} />
+      {windowSize.width >= 640 && (
         <div>
-          <div
-            className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-7 fmtm-mb-2 ${
-              toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
-            }`}
+          <CoreModules.Stack
+            sx={{ display: { md: 'flex', xs: 'none' } }}
+            direction="column"
+            justifyContent="center"
+            spacing={5}
+            alignItems={'center'}
           >
-            <p className="fmtm-text-xl fmtm-italic">Project Options</p>
-            <div
-              className={
-                'fmtm-rounded-full fmtm-shadow-gray-400 fmtm-w-8 fmtm-h-8 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-lg fmtm-cursor-pointer'
+            <CoreModules.Stack
+              direction={'row'}
+              p={2}
+              spacing={2}
+              divider={
+                <CoreModules.Divider
+                  sx={{ backgroundColor: defaultTheme.palette.grey['main'] }}
+                  orientation="vertical"
+                  flexItem
+                />
               }
-              onClick={() => setToggleAction(!toggleAction)}
             >
-              <AssetModules.ArrowRightIcon
-                color=""
-                style={{ fontSize: 32 }}
-                className={`${toggleAction ? 'fmtm-rotate-90' : ''}`}
-              />
-            </div>
-          </div>
+              <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+                <AssetModules.LocationOn color="error" style={{ fontSize: 22 }} />
+                <CoreModules.Typography variant="h1">{state.projectInfo.title}</CoreModules.Typography>
+              </CoreModules.Stack>
+
+              <CoreModules.Stack>
+                <CoreModules.Typography variant="h4" fontSize={defaultTheme.typography.fontSize}>
+                  {`#${state.projectInfo.id}`}
+                </CoreModules.Typography>
+              </CoreModules.Stack>
+
+              <CoreModules.Stack mt={'5%'}>
+                <CoreModules.Typography
+                  variant="h4"
+                  fontSize={defaultTheme.typography.fontSize}
+                  color={defaultTheme.palette.warning['main']}
+                >
+                  {state.projectInfo.priority_str}
+                </CoreModules.Typography>
+              </CoreModules.Stack>
+            </CoreModules.Stack>
+          </CoreModules.Stack>
+          {/* project Details Title */}
+          <CoreModules.Stack sx={{ display: { xs: 'flex', md: 'none' } }} spacing={2}>
+            <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+              <AssetModules.LocationOn color="error" style={{ marginTop: '1.5%', fontSize: 22 }} />
+              <CoreModules.Typography variant="caption">{state.projectInfo.title}</CoreModules.Typography>
+            </CoreModules.Stack>
+
+            <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+              <CoreModules.Typography variant="h1" fontSize={defaultTheme.typography.fontSize}>
+                {`#${state.projectInfo.id}`}
+              </CoreModules.Typography>
+            </CoreModules.Stack>
+
+            <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+              <CoreModules.Typography
+                variant="h1"
+                fontSize={defaultTheme.typography.fontSize}
+                color={defaultTheme.palette.warning['main']}
+              >
+                {state.projectInfo.priority_str}
+              </CoreModules.Typography>
+            </CoreModules.Stack>
+          </CoreModules.Stack>
         </div>
-        <div
-          className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
-            toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
-          }`}
-        >
-          <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-4">
-            <CoreModules.LoadingButton
-              onClick={() => handleDownload('form')}
-              sx={{ width: 'unset' }}
-              loading={downloadProjectFormLoading.type === 'form' && downloadProjectFormLoading.loading}
-              loadingPosition="end"
-              endIcon={<AssetModules.FileDownloadIcon />}
-              variant="contained"
-              color="error"
-            >
-              Form
-            </CoreModules.LoadingButton>
-            <CoreModules.LoadingButton
-              onClick={() => handleDownload('geojson')}
-              sx={{ width: 'unset' }}
-              loading={downloadProjectFormLoading.type === 'geojson' && downloadProjectFormLoading.loading}
-              loadingPosition="end"
-              endIcon={<AssetModules.FileDownloadIcon />}
-              variant="contained"
-              color="error"
-            >
-              Tasks
-            </CoreModules.LoadingButton>
-            <CoreModules.LoadingButton
-              onClick={() => onDataExtractDownload()}
-              sx={{ width: 'unset' }}
-              loading={downloadDataExtractLoading}
-              loadingPosition="end"
-              endIcon={<AssetModules.FileDownloadIcon />}
-              variant="contained"
-              color="error"
-              className="fmtm-truncate"
-            >
-              Data Extract
-            </CoreModules.LoadingButton>
-          </div>
-          <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-4 fmtm-gap-6">
-            <CoreModules.Link
-              to={`/projectInfo/${encodedId}`}
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'flex-end',
-                textDecoration: 'none',
-                marginRight: '15px',
-              }}
-              className="fmtm-w-fit"
-            >
-              <CoreModules.Button variant="contained" color="error">
-                ProjectInfo
-              </CoreModules.Button>
-            </CoreModules.Link>
-            <CoreModules.Button
-              onClick={() => setToggleGenerateModal(true)}
-              variant="contained"
-              color="error"
-              sx={{ width: '200px', mr: '15px' }}
-              endIcon={<AssetModules.BoltIcon />}
-              className="fmtm-truncate"
-            >
-              Generate MbTiles
-            </CoreModules.Button>
-            <CoreModules.Link
-              to={`/edit-project/project-details/${encodedId}`}
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'flex-end',
-                textDecoration: 'none',
-                marginRight: '15px',
-              }}
-              className="fmtm-w-fit"
-            >
-              <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate">
-                Edit Project
-              </CoreModules.Button>
-            </CoreModules.Link>
-          </div>
-          <div className="fmtm-px-1 sm:fmtm-hidden">
-            <Accordion
-              collapsed={true}
-              disableHeaderClickToggle
-              onToggle={() => {}}
-              header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
-              body={
-                <div className="fmtm-mt-4">
-                  <MapLegends defaultTheme={defaultTheme} />
-                </div>
-              }
-            />
+      )}
+
+      {/* Center description and map */}
+      <CoreModules.Stack direction={'column'} spacing={1}>
+        {windowSize.width >= 640 && (
+          <div>
+            <MapDescriptionComponents defaultTheme={defaultTheme} state={state} type={type} />
+            <ProjectOptions setToggleGenerateModal={setToggleGenerateModal} />
           </div>
-        </div>
+        )}
 
         {/* <ProjectMap /> */}
         {params?.id && (
-          <OpenLayersMap
-            key={params.id}
-            defaultTheme={defaultTheme}
-            stateDialog={stateDialog}
-            params={params}
-            state={state}
-            taskId={taskId}
-            top={top}
-            featuresLayer={featuresLayer}
-            map={map}
-            mainView={mainView}
-            mapElement={mapElement}
-            environment={environment}
-            windowType={type}
-          />
+          <div className="fmtm-relative sm:fmtm-static">
+            <OpenLayersMap
+              key={params.id}
+              defaultTheme={defaultTheme}
+              stateDialog={stateDialog}
+              params={params}
+              state={state}
+              taskId={taskId}
+              top={top}
+              featuresLayer={featuresLayer}
+              map={map}
+              mainView={mainView}
+              mapElement={mapElement}
+              environment={environment}
+              windowType={type}
+            />
+            <div
+              className="fmtm-absolute fmtm-top-4 fmtm-left-4 fmtm-bg-white fmtm-rounded-full fmtm-p-1 hover:fmtm-bg-red-50 fmtm-duration-300 fmtm-border-[1px] sm:fmtm-hidden fmtm-cursor-pointer"
+              onClick={() => navigate('/')}
+            >
+              <AssetModules.ArrowBackIcon className="fmtm-text-grey-800" />
+            </div>
+            {mobileFooterSelection === 'projectInfo' && (
+              <BottomSheet
+                body={<MobileProjectInfoContent projectInfo={state.projectInfo} />}
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
+            {mobileFooterSelection === 'activities' && (
+              <BottomSheet
+                body={<MobileActivitiesContents map={map} view={mainView} mapDivPostion={y} />}
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
+            {mobileFooterSelection === 'explore' && (
+              <div className="fmtm-absolute fmtm-bottom-[5.8rem] sm:fmtm-hidden">
+                <img src={FmtmLogo} alt="Hot Fmtm Logo" className="fmtm-ml-2 fmtm-z-10 fmtm-w-[5.2rem]" />
+              </div>
+            )}
+            {mobileFooterSelection === 'others' && (
+              <BottomSheet
+                body={
+                  <div className="fmtm-mb-[10vh]">
+                    <ProjectOptions setToggleGenerateModal={setToggleGenerateModal} />
+                  </div>
+                }
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
+
+            <MobileFooter />
+          </div>
         )}
       </CoreModules.Stack>
 
-      {/* project Details Tabs */}
-      <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
-        {/* <BasicTabs listOfData={panelData} /> */}
-        <ActivitiesPanel
-          params={params}
-          state={state.projectTaskBoundries}
-          defaultTheme={defaultTheme}
-          map={map}
-          view={mainView}
-          mapDivPostion={y}
-          states={state}
-        />
-      </CoreModules.Stack>
+      {windowSize.width >= 640 && (
+        <div>
+          {/* project Details Tabs */}
+          <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
+            {/* <BasicTabs listOfData={panelData} /> */}
+            <ActivitiesPanel
+              params={params}
+              state={state.projectTaskBoundries}
+              defaultTheme={defaultTheme}
+              map={map}
+              view={mainView}
+              mapDivPostion={y}
+              states={state}
+            />
+          </CoreModules.Stack>
+        </div>
+      )}
       {featuresLayer != undefined && (
         <TaskSectionPopup
           body={
@@ -545,7 +466,7 @@ const Home = () => {
           }
         />
       )}
-    </CoreModules.Stack>
+    </div>
   );
 };