QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add iconButton to open dot menu

Browse Source
This commit is contained in:
darin.kelkhoff
2024-06-06 10:25:25 -05:00
parent 40bd83cd96
commit 826bed4537
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/qqq/components/horseshoe/NavBar.tsx
View File

@ -19,16 +19,15 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Popper, InputAdornment} from "@mui/material";
import {Popper, InputAdornment, Box} from "@mui/material";
import AppBar from "@mui/material/AppBar";
import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import TextField from "@mui/material/TextField";
import Toolbar from "@mui/material/Toolbar";
import React, {useContext, useEffect, useState} from "react";
import React, {useContext, useEffect, useRef, useState} from "react";
import {useLocation, useNavigate} from "react-router-dom";
import QContext from "QContext";
import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
@ -45,7 +44,8 @@ interface Props
isMini?: boolean;
}
interface HistoryEntry {
interface HistoryEntry
{
id: number;
path: string;
label: string;
@ -64,7 +64,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const route = useLocation().pathname.split("/").slice(1);
const navigate = useNavigate();
const {pageHeader} = useContext(QContext);
const {pageHeader, setDotMenuOpen} = useContext(QContext);
useEffect(() =>
{
@ -99,7 +99,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const options = [] as any;
history.entries.reverse().forEach((entry, index) =>
options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
)
);
setHistory(options);
// Remove event listener on cleanup
@ -111,7 +111,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const goToHistory = (path: string) =>
{
navigate(path);
}
};
function buildHistoryEntries()
{
@ -119,7 +119,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const options = [] as any;
history.entries.reverse().forEach((entry, index) =>
options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName})
)
);
setHistory(options);
}
@ -138,7 +138,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
goToHistory(value.path);
}
setAutocompleteValue(null);
}
};
const CustomPopper = function (props: any)
{
@ -146,8 +146,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
{...props}
style={{whiteSpace: "nowrap", width: "auto"}}
placement="bottom-end"
/>)
}
/>);
};
const renderHistory = () =>
{
@ -184,7 +184,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
)}
/>
);
}
};
// Styles for the navbar icons
const iconsStyle = ({
@ -221,7 +221,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
}
return (routeToLabel(route));
}
};
const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
@ -242,9 +242,14 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
</Box>
{isMini ? null : (
<Box sx={(theme) => navbarRow(theme, {isMini})}>
<Box pr={0} mr={-2}>
<Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}>
{renderHistory()}
</Box>
<Box mt={"-1rem"}>
<IconButton size="small" disableRipple color="inherit" onClick={() => setDotMenuOpen(true)}>
<Icon sx={iconsStyle} fontSize="small">search</Icon>
</IconButton>
</Box>
</Box>
)}
</Toolbar>