diff --git a/src/qqq/components/horseshoe/NavBar.tsx b/src/qqq/components/horseshoe/NavBar.tsx index bcd1e07..24e3f94 100644 --- a/src/qqq/components/horseshoe/NavBar.tsx +++ b/src/qqq/components/horseshoe/NavBar.tsx @@ -25,6 +25,7 @@ import Autocomplete from "@mui/material/Autocomplete"; import Icon from "@mui/material/Icon"; import IconButton from "@mui/material/IconButton"; import ListItemIcon from "@mui/material/ListItemIcon"; +import {Theme} from "@mui/material/styles"; import TextField from "@mui/material/TextField"; import Toolbar from "@mui/material/Toolbar"; import React, {useContext, useEffect, useRef, useState} from "react"; @@ -225,6 +226,19 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]); + /////////////////////////////////////////////////////////////////////////////////////////////// + // set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears // + /////////////////////////////////////////////////////////////////////////////////////////////// + const navbarRowRight = (theme: Theme, {isMini}: any) => + { + return { + [theme.breakpoints.down("md")]: { + display: "none", + }, + ...navbarRow(theme, isMini) + } + }; + return ( {isMini ? null : ( - navbarRow(theme, {isMini})}> + navbarRowRight(theme, {isMini})}> {renderHistory()}