milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add drawer to experimental layout

Browse source
This commit is contained in:
Bill Thornton 2022-11-28 16:39:13 -05:00
parent bf62e7a15d
commit 27776d57fc
15 changed files with 977 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/apps/experimental/components/tabs/AppTabs.tsx
View file

@ -2,12 +2,21 @@ import { Theme } from '@mui/material/styles';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import useMediaQuery from '@mui/material/useMediaQuery';
import React, { FC, useCallback } from 'react';
import { debounce } from 'lodash-es';
import React, { FC, useCallback, useEffect } from 'react';
import { Route, Routes, useLocation, useSearchParams } from 'react-router-dom';
import TabRoutes, { getDefaultTabIndex } from './tabRoutes';
const AppTabs: FC = () => {
interface AppTabsParams {
isDrawerOpen: boolean
}
const handleResize = debounce(() => window.dispatchEvent(new Event('resize')), 100);
const AppTabs: FC<AppTabsParams> = ({
isDrawerOpen
}) => {
const isBigScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
const location = useLocation();
const [ searchParams, setSearchParams ] = useSearchParams();
@ -18,6 +27,12 @@ const AppTabs: FC = () => {
parseInt(searchParamsTab, 10) :
getDefaultTabIndex(location.pathname, libraryId);
// HACK: Force resizing to workaround upstream bug with tab resizing
// https://github.com/mui/material-ui/issues/24011
useEffect(() => {
handleResize();
}, [ isDrawerOpen ]);
const onTabClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
event.preventDefault();