ConstThe 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.
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="SEARCH" iconPosition="start" />
<Tab icon={<HistoryIcon />} label="HISTORY" iconPosition="start" />
<Tab icon={<SettingsIcon />} label="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}>
<SettingsPanelFull />
</TabPanel>
</div>
</Drawer>
);
};
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 localTabPanel.