[MPDX-7815] Make coaching sidebar collapsible

pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.tsx

@@ -1,8 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useMemo, useState } from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
 import { sortBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { ReportContactFilterSetInput } from 'pages/api/graphql-rest.page.generated';
@@ -19,10 +17,6 @@ import { getQueryParam } from 'src/utils/queryParam';
 import { useContactFiltersQuery } from '../../contacts/Contacts.generated';
 import { ContactsPage } from '../../contacts/ContactsPage';
 
-const PartnerGivingAnalysisReportPageWrapper = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.common.white,
-}));
-
 // The order here is also the sort order and the display order
 const reportFilters = [
   'designation_account_id',
@@ -96,48 +90,46 @@ const PartnerGivingAnalysisReportPage: React.FC = () => {
         </title>
       </Head>
       {accountListId ? (
-        <PartnerGivingAnalysisReportPageWrapper>
-          <SidePanelsLayout
-            isScrollBox={true}
-            leftPanel={
-              isNavListOpen && filtersLoading ? (
-                <Loading loading />
-              ) : (
-                <FilterPanel
-                  filters={filterGroups}
-                  defaultExpandedFilterGroups={new Set(['Report Filters'])}
-                  savedFilters={[]}
-                  selectedFilters={activeFilters}
-                  onClose={() => setNavListOpen(false)}
-                  onSelectedFiltersChanged={setActiveFilters}
-                />
-              )
-            }
-            leftOpen={isNavListOpen}
-            leftWidth="290px"
-            mainContent={
-              <PartnerGivingAnalysisReport
-                accountListId={accountListId}
-                activeFilters={activeFilters}
-                isNavListOpen={isNavListOpen}
-                onNavListToggle={handleNavListToggle}
-                onSelectContact={handleSelectContact}
-                title={t('Partner Giving Analysis')}
-                contactFilters={debouncedFilters}
-                contactDetailsOpen={!!selectedContactId}
+        <SidePanelsLayout
+          isScrollBox={true}
+          leftPanel={
+            isNavListOpen && filtersLoading ? (
+              <Loading loading />
+            ) : (
+              <FilterPanel
+                filters={filterGroups}
+                defaultExpandedFilterGroups={new Set(['Report Filters'])}
+                savedFilters={[]}
+                selectedFilters={activeFilters}
+                onClose={() => setNavListOpen(false)}
+                onSelectedFiltersChanged={setActiveFilters}
               />
-            }
-            rightPanel={
-              selectedContactId ? (
-                <ContactsPage>
-                  <ContactsRightPanel onClose={() => handleSelectContact('')} />
-                </ContactsPage>
-              ) : undefined
-            }
-            rightOpen={typeof selectedContactId !== 'undefined'}
-            rightWidth="60%"
-          />
-        </PartnerGivingAnalysisReportPageWrapper>
+            )
+          }
+          leftOpen={isNavListOpen}
+          leftWidth="290px"
+          mainContent={
+            <PartnerGivingAnalysisReport
+              accountListId={accountListId}
+              activeFilters={activeFilters}
+              isNavListOpen={isNavListOpen}
+              onNavListToggle={handleNavListToggle}
+              onSelectContact={handleSelectContact}
+              title={t('Partner Giving Analysis')}
+              contactFilters={debouncedFilters}
+              contactDetailsOpen={!!selectedContactId}
+            />
+          }
+          rightPanel={
+            selectedContactId ? (
+              <ContactsPage>
+                <ContactsRightPanel onClose={() => handleSelectContact('')} />
+              </ContactsPage>
+            ) : undefined
+          }
+          rightOpen={typeof selectedContactId !== 'undefined'}
+          rightWidth="60%"
+        />
       ) : (
         <Loading loading />
       )}