Use an MUI accordion for the sidebar collapsing sections

ProjectMirador · Nov 28, 2023 · a4a32b8 · a4a32b8
1 parent ea70a21
commit a4a32b8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js
@@ -2,6 +2,9 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDownSharp';
 import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
@@ -20,16 +23,6 @@ export class CollapsibleSection extends Component {
   /** */
   constructor(props) {
     super(props);
-
-    this.state = { open: true };
-    this.toggleSection = this.toggleSection.bind(this);
-  }
-
-  /** */
-  toggleSection() {
-    const { open } = this.state;
-
-    this.setState({ open: !open });
   }
 
   /**
@@ -39,31 +32,18 @@ export class CollapsibleSection extends Component {
     const {
       children, id, label, t,
     } = this.props;
-    const { open } = this.state;
 
     return (
-      <>
-        <StyledContainer sx={{ padding: 0 }}>
-          <Typography
-            sx={{ alignSelf: 'center', cursor: 'pointer' }}
-            id={id}
-            onClick={this.toggleSection}
-            variant="overline"
-            component="h4"
-          >
+      <Accordion id={id} elevation={0} defaultExpanded onChange={this.toggleSection} disableGutters square variant="compact">
+        <AccordionSummary id={`${id}-header`} aria-controls={`${id}-content`} aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })} expandIcon={open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}>
+          <Typography variant="overline" component="h4">
             {label}
           </Typography>
-          <MiradorMenuButton
-            aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })}
-            aria-expanded={open}
-            sx={{ padding: 0 }}
-            onClick={this.toggleSection}
-          >
-            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-          </MiradorMenuButton>
-        </StyledContainer>
-        {open && children}
-      </>
+        </AccordionSummary>
+        <AccordionDetails>
+          {children}
+        </AccordionDetails>
+      </Accordion>
     );
   }
 }

diff --git a/src/config/settings.js b/src/config/settings.js
@@ -176,6 +176,25 @@ export default {
           },
         },
       },
+      MuiAccordion: {
+        variants: [
+          {
+            props: { variant: 'compact' },
+            style: {
+              '& .MuiAccordionSummary-root': {
+                minHeight: 'unset',
+                padding: 0,
+              },
+              '& .MuiAccordionSummary-content': {
+                margin: 0,
+              },
+              '& .MuiAccordionDetails-root': {
+                padding: 0,
+              },
+            },
+          },
+        ],
+      },
       MuiButtonBase: {
         defaultProps: {
           disableTouchRipple: true,