CE-798 turn off fixed navbar; move pageHeader from Breadcrumbs to NavBar

CE-798 turn off fixed navbar; move pageHeader from Breadcrumbs to NavBar

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
                </Link>
             ))}
          </MuiBreadcrumbs>
-         <MDTypography
-            pt={1}
-            textTransform="capitalize"
-            variant="h3"
-            color={light ? "white" : "dark"}
-            noWrap
-         >
-            {pageHeader}
-         </MDTypography>
       </Box>
    );
 }

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
       >
          <Toolbar sx={navbarContainer}>
             <Box color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
-               <IconButton
-                  size="small"
-                  disableRipple
-                  color="inherit"
-                  sx={navbarMobileMenu}
-                  onClick={handleMiniSidenav}
-               >
+               <IconButton size="small" disableRipple color="inherit" sx={navbarMobileMenu} onClick={handleMiniSidenav}>
                   <Icon sx={iconsStyle} fontSize="large">menu</Icon>
                </IconButton>
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
             </Box>
             {isMini ? null : (
                <Box sx={(theme) => navbarRow(theme, {isMini})}>
-                  <Box pr={0} mr={-2} mt={-4}>
+                  <Box pr={0} mr={-2}>
                      {renderHistory()}
                   </Box>
                </Box>
             )}
          </Toolbar>
+         {
+            pageHeader &&
+            <Box display="flex" justifyContent="space-between">
+               <MDTypography pt={1} textTransform="capitalize" variant="h3" color={light ? "white" : "dark"} noWrap>
+                  {pageHeader}
+               </MDTypography>
+            </Box>
+         }
       </AppBar>
    );
 }

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",

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 (
-      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 200px)"}}>
+      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 2rem)"}}>
          <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (

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",