diff --git a/src/qqq/components/horseshoe/Breadcrumbs.tsx b/src/qqq/components/horseshoe/Breadcrumbs.tsx index 79e5720..cc396bd 100644 --- a/src/qqq/components/horseshoe/Breadcrumbs.tsx +++ b/src/qqq/components/horseshoe/Breadcrumbs.tsx @@ -70,7 +70,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element } const routes: string[] | any = route.slice(0, -1); - const {pageHeader, pathToLabelMap, branding} = useContext(QContext); + const {pathToLabelMap, branding} = useContext(QContext); const fullPathToLabel = (fullPath: string, route: string): string => { @@ -149,15 +149,6 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element ))} - - {pageHeader} - ); } diff --git a/src/qqq/components/horseshoe/NavBar.tsx b/src/qqq/components/horseshoe/NavBar.tsx index 1669564..f2aefb4 100644 --- a/src/qqq/components/horseshoe/NavBar.tsx +++ b/src/qqq/components/horseshoe/NavBar.tsx @@ -22,12 +22,10 @@ import {Popper, InputAdornment} from "@mui/material"; import AppBar from "@mui/material/AppBar"; import Autocomplete from "@mui/material/Autocomplete"; -import Badge from "@mui/material/Badge"; 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 Menu from "@mui/material/Menu"; import TextField from "@mui/material/TextField"; import Toolbar from "@mui/material/Toolbar"; import React, {useContext, useEffect, useState} from "react"; @@ -35,6 +33,7 @@ import {useLocation, useNavigate} from "react-router-dom"; import QContext from "QContext"; import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs"; import {navbar, navbarContainer, navbarRow, navbarMobileMenu, recentlyViewedMenu,} from "qqq/components/horseshoe/Styles"; +import MDTypography from "qqq/components/legacy/MDTypography"; import {setTransparentNavbar, useMaterialUIController, setMiniSidenav} from "qqq/context"; import HistoryUtils from "qqq/utils/HistoryUtils"; @@ -65,6 +64,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element const route = useLocation().pathname.split("/").slice(1); const navigate = useNavigate(); + const {pageHeader} = useContext(QContext); + useEffect(() => { // Setting the navbar type @@ -234,25 +235,27 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element > navbarRow(theme, {isMini})}> - + menu {isMini ? null : ( navbarRow(theme, {isMini})}> - + {renderHistory()} )} + { + pageHeader && + + + {pageHeader} + + + } ); } diff --git a/src/qqq/components/horseshoe/Styles.ts b/src/qqq/components/horseshoe/Styles.ts index c9c87c1..5e56745 100644 --- a/src/qqq/components/horseshoe/Styles.ts +++ b/src/qqq/components/horseshoe/Styles.ts @@ -66,12 +66,12 @@ function navbar(theme: Theme | any, ownerState: any) return color; }, top: absolute ? 0 : pxToRem(12), - minHeight: pxToRem(75), + minHeight: "auto", display: "grid", alignItems: "center", borderRadius: borderRadius.xl, - paddingTop: pxToRem(8), - paddingBottom: pxToRem(8), + paddingTop: pxToRem(0), + paddingBottom: pxToRem(0), paddingRight: absolute ? pxToRem(8) : 0, paddingLeft: absolute ? pxToRem(16) : 0, @@ -85,7 +85,7 @@ function navbar(theme: Theme | any, ownerState: any) "& .MuiToolbar-root": { display: "flex", justifyContent: "space-between", - alignItems: "center", + alignItems: "flex-start", [breakpoints.up("sm")]: { minHeight: "auto", @@ -99,10 +99,10 @@ const navbarContainer = ({breakpoints}: Theme): any => ({ flexDirection: "column", alignItems: "flex-start", justifyContent: "space-between", + padding: "0 !important", [breakpoints.up("md")]: { flexDirection: "row", - alignItems: "center", paddingTop: "0", paddingBottom: "0", }, @@ -152,6 +152,7 @@ const navbarDesktopMenu = ({breakpoints}: Theme) => ({ }); const recentlyViewedMenu = ({breakpoints}: Theme) => ({ + marginTop: "-0.5rem", "& .MuiInputLabel-root": { color: colors.gray.main, fontWeight: "500", diff --git a/src/qqq/components/misc/RecordSidebar.tsx b/src/qqq/components/misc/RecordSidebar.tsx index 25b6ac3..fffa5fa 100644 --- a/src/qqq/components/misc/RecordSidebar.tsx +++ b/src/qqq/components/misc/RecordSidebar.tsx @@ -41,7 +41,7 @@ interface Props QRecordSidebar.defaultProps = { light: false, - stickyTop: "110px", + stickyTop: "1rem", }; interface SidebarEntry @@ -76,7 +76,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P return ( - + { sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => ( diff --git a/src/qqq/context/index.tsx b/src/qqq/context/index.tsx index e7ea69b..4e1ed7d 100644 --- a/src/qqq/context/index.tsx +++ b/src/qqq/context/index.tsx @@ -116,7 +116,7 @@ function MaterialUIControllerProvider({children}: { children: ReactNode }): JSX. whiteSidenav: false, sidenavColor: "info", transparentNavbar: true, - fixedNavbar: true, + fixedNavbar: false, openConfigurator: false, direction: "ltr", layout: "dashboard",