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

changed navigation logic of side navigator to make sur ebackground goes away

Browse source
This commit is contained in:
Carter 2025-03-24 10:19:00 -06:00
parent 85bfcce921
commit 9ac8958ff4
4 changed files with 67 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/app/Header.tsx
View file

@ -1,16 +1,14 @@
import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
import { Menu } from "@mui/icons-material";
// import classNames from "classnames";
import { makeStyles } from "@mui/styles";
import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
// import { Link } from "react-router-dom";
import { useThemeType } from "../hooks/useThemeType";
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 { useState } from "react";
import BottomNavigator from "navigation/BottomNavigator";
const useStyles = makeStyles((theme: Theme) => ({
@ -87,53 +85,54 @@ interface Props {
export default function Header(props: Props) {
// const { sideIsOpen, openSide, toggleTheme } = props;
const { toggleTheme } = props;
const themeType = useThemeType();
const classes = useStyles()
const isMobile = useMobile();
// const { sideIsOpen, openSide, toggleTheme } = props;
const { toggleTheme } = props;
const themeType = useThemeType();
const classes = useStyles()
const isMobile = useMobile();
const [{ user, team }] = useGlobalState();
const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
const [{ user, team }] = useGlobalState();
const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
const [navOpen, setNavOpen] = useState(false)
const [navOpen, setNavOpen] = useState(false)
return (
<React.Fragment>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar disableGutters className={classes.toolbar}>
<Box className={classes.buttonContainer}>
{!isMobile && (
<IconButton
color="inherit"
aria-label="Open side menu"
onClick={() => {setNavOpen(true)}}
style={{ color: getSignatureAccentColour() }}
className={classes.button}>
<Menu />
</IconButton>
)}
</Box>
<Box flexGrow={1} marginLeft={0.5}>
{!hideLogo() && (
<div className={classes.logoContainer}>
<img
className={classes.HeaderLogo}
src={themeType === "light" ? getDarkLogo() : getLightLogo()}
alt={import.meta.env.REACT_APP_WEBSITE_TITLE}
/>
</div>
)}
</Box>
<Box className={classes.appBarRight}>
<UserMenu toggleTheme={toggleTheme} />
<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
</Box>
</Toolbar>
return (
<>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar disableGutters className={classes.toolbar}>
<Box className={classes.buttonContainer}>
{!isMobile && (
<IconButton
color="inherit"
aria-label="Open side menu"
onClick={() => {setNavOpen(true)}}
style={{ color: getSignatureAccentColour() }}
className={classes.button}
>
<Menu />
</IconButton>
)}
</Box>
<Box flexGrow={1} marginLeft={0.5}>
{!hideLogo() && (
<div className={classes.logoContainer}>
<img
className={classes.HeaderLogo}
src={themeType === "light" ? getDarkLogo() : getLightLogo()}
alt={import.meta.env.REACT_APP_WEBSITE_TITLE}
/>
</div>
)}
</Box>
<Box className={classes.appBarRight}>
<UserMenu toggleTheme={toggleTheme} />
<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>
)
</AppBar>
<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
{isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}
</>
)
}