brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

moved the side and bottom navigator out of the navigation container and into the header to stop the wildcard pages from re-rendering/loading whenever the navigator drawer is opened

Browse source
This commit is contained in:
csawatzky 2025-01-21 15:09:38 -06:00
parent 38e0bcb33c
commit f891e4c29b
3 changed files with 14 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/app/Header.tsx
View file

@ -9,6 +9,9 @@ import UserMenu from "../user/UserMenu";
import { useMobile } from "hooks";
import HeaderButtons from "./HeaderButtons";
import { useGlobalState } from "providers";
import SideNavigator from "navigation/SideNavigator";
import React, { useState } from "react";
import BottomNavigator from "navigation/BottomNavigator";
const useStyles = makeStyles((theme: Theme) => ({
appBar: {
@ -77,8 +80,6 @@ const useStyles = makeStyles((theme: Theme) => ({
interface Props {
toggleTheme: () => void;
sideIsOpen: boolean;
openSide: () => void;
// teams: Team[];
// setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
}
@ -86,7 +87,7 @@ interface Props {
export default function Header(props: Props) {
// const { sideIsOpen, openSide, toggleTheme } = props;
const { openSide, toggleTheme } = props;
const { toggleTheme } = props;
const themeType = useThemeType();
const classes = useStyles()
const isMobile = useMobile();
@ -94,7 +95,10 @@ export default function Header(props: Props) {
const [{ user, team }] = useGlobalState();
const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
const [navOpen, setNavOpen] = useState(false)
return (
<React.Fragment>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar disableGutters className={classes.toolbar}>
<Box className={classes.buttonContainer}>
@ -102,7 +106,7 @@ export default function Header(props: Props) {
<IconButton
color="inherit"
aria-label="Open side menu"
onClick={openSide}
onClick={() => {setNavOpen(true)}}
style={{ color: getSignatureAccentColour() }}
className={classes.button}>
<Menu />
@ -125,6 +129,10 @@ export default function Header(props: Props) {
<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
</Box>
</Toolbar>
</AppBar>
<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
{isMobile && <BottomNavigator openSide={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}
</React.Fragment>
)
}