ChemPal Documentation - v1.7.0
    Preparing search index...

    Variable DrawerSystemConst

    DrawerSystem: FC = ...

    The right-hand slide-out drawer hosting the Search, History, and Settings tabs. Driven by appContext.drawerTab: opens when a tab is selected, closes on backdrop click, and renders the matching panel via the local TabPanel.

    The drawer element; an empty (closed) drawer when no tab is active.

    // Mounted once near the app root; visibility is controlled via app context.
    <DrawerSystem />
    // appContext.setDrawerTab(DRAWER_INDEX.SETTINGS) opens it to the Settings tab.

    Source

    const DrawerSystem: FC = () => {
      const appContext = useAppContext();
      const [expandedAccordion, setExpandedAccordion] = useState<string | false>('search-availability');

      const handleTabChange = (_event: SyntheticEvent, newValue: DRAWER_INDEX) => {
        appContext.setDrawerTab(newValue);
        // Reset accordion when switching tabs
        if (newValue === DRAWER_INDEX.SEARCH) {
          setExpandedAccordion('search-availability');
        } else if (newValue === DRAWER_INDEX.SETTINGS) {
          setExpandedAccordion('settings-general');
        } else {
          setExpandedAccordion(false);
        }
      };

      const handleAccordionChange =
        (panel: string) => (_event: SyntheticEvent, isExpanded: boolean) => {
          setExpandedAccordion(isExpanded ? panel : false);
        };

      return (
        <Drawer
          anchor="right"
          open={appContext.drawerTab !== DRAWER_INDEX.CLOSED}
          onClose={() => appContext.setDrawerTab(DRAWER_INDEX.CLOSED)}
          variant="temporary"
        >
          <div className={styles['drawer-container']}>
            {appContext.drawerTab !== DRAWER_INDEX.CLOSED && (
              <Tabs
                value={appContext.drawerTab ?? DRAWER_INDEX.CLOSED}
                onChange={handleTabChange}
                variant="fullWidth"
                className={styles['drawer-tabs']}
              >
                <Tab icon={<SearchIcon />} label={i18n('drawer_tab_search')} iconPosition="start" />
                <Tab icon={<HistoryIcon />} label={i18n('drawer_tab_history')} iconPosition="start" />
                <Tab icon={<SettingsIcon />} label={i18n('drawer_tab_settings')} iconPosition="start" />
              </Tabs>
            )}

            <TabPanel value={appContext.drawerTab ?? DRAWER_INDEX.CLOSED} index={DRAWER_INDEX.SEARCH}>
              <DrawerSearchPanel
                expandedAccordion={expandedAccordion}
                onAccordionChange={handleAccordionChange}
              />
            </TabPanel>

            <TabPanel value={appContext.drawerTab ?? DRAWER_INDEX.CLOSED} index={DRAWER_INDEX.HISTORY}>
              <HistoryPanel />
            </TabPanel>

            <TabPanel value={appContext.drawerTab ?? DRAWER_INDEX.CLOSED} index={DRAWER_INDEX.SETTINGS}>
              <SettingsPanel />
            </TabPanel>
          </div>
        </Drawer>
      );
    };

    Settings

    Member Visibility