Fix layout of navbar at various different widths. (#41)

* Fix layout of navbar at various different widths.
* Remove dead space between buttons.
* Remove space before menu when no logo.
* User component hide names when extra small

Flxes #35

Author: akademy

changelog.md

@@ -4,10 +4,14 @@ SciReactUI Changelog
 [vNext] - date
 --------------------
 
+### Added
+- Breadcrumbs takes object for total control over names and links 
+
 ### Fixed
-- Stopped flicker between themes when starting an app in dark mode.
+- Stopped flicker between colour modes when starting an app in dark mode.
 - Footer links stopped from moving on hover when only showing links.
-- Footer links now correctly center horizontally.
+- Footer links now correctly center horizontally, if needed.
+- NavBar positions items correctly in multiple screen widths.
 
 ### Changed
 - Footer links now align with copyright when there is no logo.

src/components/ColourSchemeButton.tsx

@@ -18,6 +18,7 @@ const ColourSchemeButton = (props: IconButtonProps) => {
       sx={{
         height: 35,
         width: 35,
+        marginLeft: "10px !important",
         borderRadius: "5px",
         backgroundColor: theme.palette.primary.light,
         color: theme.palette.primary.contrastText,

src/components/Navbar.stories.tsx

@@ -5,6 +5,7 @@ import { NavLink, NavLinks, Navbar } from "./Navbar";
 
 import logoImageDark from "../public/generic/logo-dark.svg";
 import logoImageLight from "../public/generic/logo-light.svg";
+import { ColourSchemeButton } from "./ColourSchemeButton";
 
 const meta: Meta<typeof Navbar> = {
   title: "SciReactUI/Navigation/Navbar",
@@ -39,6 +40,7 @@ export const All: Story = {
         user={{ name: "Name", fedid: "FedID" }}
         color={"white"}
       />,
+      <ColourSchemeButton key="colourScheme" />,
     ],
     logo: "theme",
   },

src/components/Navbar.tsx

@@ -2,11 +2,11 @@
 import {
   Box,
   BoxProps,
+  Container,
   Drawer,
   LinkProps,
   Link,
   IconButton,
-  Paper,
   Stack,
   useTheme,
 } from "@mui/material";
@@ -39,12 +39,11 @@ const NavLink = ({ children, ...props }: LinkProps) => {
           borderBottom: "solid 4px",
         },
         textDecoration: "none",
-        px: 2,
-        bgcolor: { md: "none" },
         alignItems: "center",
         display: "flex",
-        borderTop: "4px solid transparent",
+        padding: "13px 3px 0",
         borderBottom: "4px solid transparent",
+        backgroundColor: { md: "none" },
         color: theme.palette.primary.contrastText,
       }}
       {...props}
@@ -67,6 +66,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
           color: theme.palette.primary.contrastText,
           display: { md: "none" },
           order: -1,
+          marginLeft: "0 !important",
           "&:hover": { filter: "brightness(90%);" },
         }}
         size={"small"}
@@ -80,6 +80,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
         sx={{
           height: "100%",
           display: { xs: "none", md: "flex" },
+          marginLeft: "0 !important",
         }}
         component="nav"
         spacing={4}
@@ -122,19 +123,21 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
   }
 
   return (
-    <Box top="0" zIndex={1} width="100%" {...props}>
-      <Paper
-        sx={{
-          display: "flex",
-          backgroundColor: theme.vars.palette.primary.main,
-          px: { xs: "1rem", md: "7.5vw" },
-          height: 50,
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderRadius: 0,
-        }}
-      >
+    <Box
+      top="0"
+      zIndex={1}
+      width="100%"
+      height="50px"
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderRadius: 0,
+        backgroundColor: theme.vars.palette.primary.main,
+      }}
+      {...props}
+    >
+      <Container maxWidth="lg" sx={{ height: "100%" }}>
         <Stack
           direction="row"
           spacing={8}
@@ -146,6 +149,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
                 maxWidth="5rem"
                 sx={{
                   "&:hover": { filter: "brightness(80%);" },
+                  marginRight: { xs: "0", md: "50px" },
                 }}
               >
                 <ImageColorSchemeSwitch image={logo} />
@@ -154,7 +158,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
           ) : null}
           {children}
         </Stack>
-      </Paper>
+      </Container>
     </Box>
   );
 };

src/components/User.tsx

@@ -61,6 +61,7 @@ const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => {
               border: "none",
               cursor: "pointer",
               minWidth: 0,
+              marginLeft: "10px !important",
               "&:hover": {
                 opacity: 0.8,
               },
@@ -79,7 +80,12 @@ const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => {
                   }}
                 />
               )}
-              <div style={{ padding: 10 }}>
+              <Box
+                sx={{
+                  padding: "5px",
+                  display: { xs: "none", sm: "block" },
+                }}
+              >
                 <Typography
                   fontSize="0.75rem"
                   textTransform="none"
@@ -100,7 +106,7 @@ const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => {
                     {user.fedid}
                   </Typography>
                 )}
-              </div>
+              </Box>
             </Stack>
           </Button>
           {onLogout && (