changed the swipeable drawer to use a different variant when closed so the faded background doesn't linger

This commit is contained in:
Carter 2025-04-01 11:42:46 -06:00
parent 4c8664841f
commit 2c4aceb13c
4 changed files with 22 additions and 24 deletions

View file

@ -129,7 +129,6 @@ export default function Header(props: Props) {
<HeaderButtons hasTeams={hasTeams} team={team} user={user} /> <HeaderButtons hasTeams={hasTeams} team={team} user={user} />
</Box> </Box>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} /> <SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
{isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />} {isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}

View file

@ -14,7 +14,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
const { startNode, endNode, children, ...tabsProps } = props; const { startNode, endNode, children, ...tabsProps } = props;
const [selectedValue, setSelectedValue] = useState<any>(tabsProps.value); const [selectedValue, setSelectedValue] = useState<any>(tabsProps.value);
const initialChildren = React.Children.toArray(children); const initialChildren = React.Children.toArray(children);
// const [tabOrder, setTabOrder] = useState<number[]>([]);
const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
const [{ as, user }] = useGlobalState() const [{ as, user }] = useGlobalState()
@ -30,21 +29,20 @@ export default function DraggableTabs(props: DraggableTabsProps) {
// Get tab order from cache // Get tab order from cache
const [tabOrder, setTabOrder] = useState<number[]>(() => { const [tabOrder, setTabOrder] = useState<number[]>(() => {
const storedValue = localStorage.getItem(cacheKey); const storedValue = localStorage.getItem(cacheKey);
console.log(storedValue)
console.log(JSON.parse(storedValue!))
console.log(storedValue !== null)
return storedValue !== null ? JSON.parse(storedValue) : []; return storedValue !== null ? JSON.parse(storedValue) : [];
}); });
// save tab order to cache when it changes // save tab order to cache when it changes
useEffect(() => { useEffect(() => {
console.log(tabOrder) // console.log(initialChildren.length)
localStorage.setItem(cacheKey, JSON.stringify(tabOrder)); localStorage.setItem(cacheKey, JSON.stringify(tabOrder));
}, [tabOrder]); }, [tabOrder]);
useEffect(() => { useEffect(() => {
const newOrder = initialChildren.map((_, index) => index); const newOrder = initialChildren.map((_, index) => index);
if (tabOrder.length < 1) setTabOrder(newOrder); if (tabOrder.length < 1) setTabOrder(newOrder);
// const oddOnesOut = newOrder.filter(item => !tabOrder.includes(item))
// setTabOrder([...oddOnesOut, ...tabOrder])
tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
}, [initialChildren.length]); }, [initialChildren.length]);

View file

@ -238,7 +238,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton> </ListItemButton>
</Tooltip> </Tooltip>
)} )}
{(IsOmniAir || user.hasFeature("admin")) && ( {(IsOmniAir() || user.hasFeature("admin")) && (
<Tooltip title="Aviation Map" placement="right"> <Tooltip title="Aviation Map" placement="right">
<ListItemButton <ListItemButton
id="tour-aviation-map" id="tour-aviation-map"
@ -258,7 +258,8 @@ export default function SideNavigator(props: Props) {
return ( return (
<SwipeableDrawer <SwipeableDrawer
variant={width === "xs" || width === "sm" ? "temporary" : "permanent"} // variant={width === "xs" || width === "sm" ? "temporary" : "permanent"}
variant={!open ? "permanent" : width === "xs" || width === "sm" ? "temporary" : "permanent"}
classes={{ classes={{
paper: classNames( paper: classNames(
classes.sideMenu, classes.sideMenu,