style navbar and adjust spacing

mykovasyl · Mar 31, 2023 · ed4a87e · ed4a87e
1 parent 9118dc6
commit ed4a87e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 33 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -207,7 +207,7 @@ function App() {
           anchor='left'
           open={open}
         >
-          <DrawerHeader>
+          <DrawerHeader sx={{ height: 80 }}>
             <IconButton onClick={handleDrawerClose}>
               {theme.direction === "ltr" ? (
                 <ChevronLeftIcon />

diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
@@ -16,32 +16,24 @@ function NavBar() {
     <List>
       {currentUser.id ? (
         <>
-          <ListItem disablePadding>
+          <ListItem disablePadding as={Link} to='/'>
             <ListItemButton>
-              <ListItemText>
-                <Link to='/'>Home</Link>
-              </ListItemText>
+              <ListItemText>Home</ListItemText>
             </ListItemButton>
           </ListItem>
-          <ListItem disablePadding>
+          <ListItem disablePadding as={Link} to='/randomrecipe'>
             <ListItemButton>
-              <ListItemText>
-                <Link to='/randomrecipe'>Random Recipe</Link>
-              </ListItemText>
+              <ListItemText>Random Recipe</ListItemText>
             </ListItemButton>
           </ListItem>
-          <ListItem disablePadding>
+          <ListItem disablePadding as={Link} to='/recipebook'>
             <ListItemButton>
-              <ListItemText>
-                <Link to='/recipebook'>Your Recipe Book</Link>
-              </ListItemText>
+              <ListItemText>Your Recipe Book</ListItemText>
             </ListItemButton>
           </ListItem>
-          <ListItem disablePadding>
+          <ListItem disablePadding as={Link} to='/recipeform'>
             <ListItemButton>
-              <ListItemText>
-                <Link to='/recipeform'>Add Recipe</Link>
-              </ListItemText>
+              <ListItemText>Add Recipe</ListItemText>
             </ListItemButton>
           </ListItem>
           <Divider />
@@ -57,14 +49,14 @@ function NavBar() {
         </>
       ) : (
         <>
-          <ListItem disablePadding>
+          <ListItem disablePadding as={Link} to='/randomrecipe'>
             <ListItemButton>
               <ListItemText>
                 <Link to='/login'>Log In</Link>
               </ListItemText>
             </ListItemButton>
           </ListItem>
-          <ListItem disablePadding>
+          <ListItem disablePadding as={Link} to='/randomrecipe'>
             <ListItemButton>
               <ListItemText>
                 <Link to='/signup'>Sign Up</Link>