Remove space before menu when no logo.

Also, make User hide names when extra small

Author: akademy

src/components/Navbar.tsx

@@ -80,6 +80,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
         sx={{
           height: "100%",
           display: { xs: "none", md: "flex" },
+          marginLeft: "0 !important",
         }}
         component="nav"
         spacing={4}
@@ -148,6 +149,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
                 maxWidth="5rem"
                 sx={{
                   "&:hover": { filter: "brightness(80%);" },
+                  marginRight: { xs: "0", md: "50px" },
                 }}
               >
                 <ImageColorSchemeSwitch image={logo} />

src/components/User.tsx

@@ -80,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"
@@ -101,7 +106,7 @@ const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => {
                     {user.fedid}
                   </Typography>
                 )}
-              </div>
+              </Box>
             </Stack>
           </Button>
           {onLogout && (