Skip to content

Commit

Permalink
Refactor NavBar component and add welcome message to Home component
Browse files Browse the repository at this point in the history
  • Loading branch information
@amandaguan-ag
amandaguan-ag committed Apr 2, 2024
1 parent 7088106 commit 6af7745
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 121 deletions.
243 changes: 123 additions & 120 deletions src/components/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,84 +77,85 @@ export function NavBar() {
>
SwiftShop
</Typography>
{/* nav links for larger screens */}
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
<NavLink to="/" className="Nav-link">
<Button sx={{ my: 2, color: 'white', display: 'block' }}>
Home
</Button>
</NavLink>
<NavLink to="/list" className="Nav-link">
<Button sx={{ my: 2, color: 'white', display: 'block' }}>
List
</Button>
</NavLink>
<NavLink to="/manage-list" className="Nav-link">
<Button sx={{ my: 2, color: 'white', display: 'block' }}>
Manage List
</Button>
</NavLink>
</Box>
{user && (
<>
{/* nav links for larger screens */}
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
<NavLink to="/" className="Nav-link">
<Button sx={{ my: 2, color: 'white', display: 'block' }}>
Home
</Button>
</NavLink>
<NavLink to="/list" className="Nav-link">
<Button sx={{ my: 2, color: 'white', display: 'block' }}>
List
</Button>
</NavLink>
<NavLink to="/manage-list" className="Nav-link">
<Button sx={{ my: 2, color: 'white', display: 'block' }}>
Manage List
</Button>
</NavLink>
</Box>

{/* app logo for small screens */}
<SvgIcon
sx={{
fontSize: '20px',
display: { xs: 'flex', md: 'none' },
mr: 1,
}}
>
<svg
height="200px"
width="200px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 290.87 290.87"
xmlSpace="preserve"
fill="#000"
transform="scale(-1 1)"
stroke="#000"
strokeWidth={0.00290873}
>
<g fill="#010002">
<path d="M44.268 139.532L44.268 79.35 44.268 41.049 93.507 90.294z" />
<path d="M0 73.384L32.334 41.049 32.334 73.384z" />
<path d="M149.583 249.824L113.508 213.748 149.583 181.843z" />
<path d="M103.066 202.799L47.216 153.823 160.968 48.77 290.873 48.77z" />
</g>
</svg>
</SvgIcon>
<Typography
variant="h5"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
sx={{
mr: 2,
display: { xs: 'flex', md: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
SwiftShop
</Typography>
<Box
sx={{
flexGrow: 1,
flexDirection: 'row',
display: { xs: 'flex', md: 'none' },
justifyContent: 'end',
}}
>
{!!user && (
<Typography>
Signed in as {user.displayName} <SignOutButton />
{/* app logo for small screens */}
<SvgIcon
sx={{
fontSize: '20px',
display: { xs: 'flex', md: 'none' },
mr: 1,
}}
>
<svg
height="200px"
width="200px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 290.87 290.87"
xmlSpace="preserve"
fill="#000"
transform="scale(-1 1)"
stroke="#000"
strokeWidth={0.00290873}
>
<g fill="#010002">
<path d="M44.268 139.532L44.268 79.35 44.268 41.049 93.507 90.294z" />
<path d="M0 73.384L32.334 41.049 32.334 73.384z" />
<path d="M149.583 249.824L113.508 213.748 149.583 181.843z" />
<path d="M103.066 202.799L47.216 153.823 160.968 48.77 290.873 48.77z" />
</g>
</svg>
</SvgIcon>
<Typography
variant="h5"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
sx={{
mr: 2,
display: { xs: 'flex', md: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
SwiftShop
</Typography>
)}
</Box>
<Box
sx={{
flexGrow: 1,
flexDirection: 'row',
display: { xs: 'flex', md: 'none' },
justifyContent: 'end',
}}
>
<Typography>Signed in as {user.displayName}</Typography>
<SignOutButton />
</Box>
</>
)}
{/* nav links for smaller screens */}

{/* username and signin/signout button for larger screens */}
Expand Down Expand Up @@ -184,55 +185,57 @@ export function NavBar() {

{/* username and signin/signout button for smaller screens */}
</Container>
<Paper
sx={{
display: { xs: 'flex', md: 'none' },
justifyContent: 'space-around',
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
zIndex: 1,
backgroundColor: '#003780',
color: '#fdeecd',
}}
elevation={3}
>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
{user && (
<Paper
sx={{
width: '100%',
display: { xs: 'flex', md: 'none' },
justifyContent: 'space-around',
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
zIndex: 1,
backgroundColor: '#003780',
color: '#fdeecd',
}}
elevation={3}
>
<BottomNavigationAction
label="Home"
icon={<HomeIcon fontSize="large" />}
component={NavLink}
to="/"
sx={{ color: '#fdeecd' }}
/>
<BottomNavigationAction
label="List"
icon={<ChecklistIcon fontSize="large" />}
component={NavLink}
to="/list"
sx={{ color: '#fdeecd' }}
/>
<BottomNavigationAction
label="About"
icon={<InfoIcon fontSize="large" />}
component={NavLink}
to="/manage-list"
sx={{ color: '#fdeecd' }}
/>
</BottomNavigation>
</Paper>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
sx={{
width: '100%',
backgroundColor: '#003780',
color: '#fdeecd',
}}
>
<BottomNavigationAction
label="Home"
icon={<HomeIcon fontSize="large" />}
component={NavLink}
to="/"
sx={{ color: '#fdeecd' }}
/>
<BottomNavigationAction
label="List"
icon={<ChecklistIcon fontSize="large" />}
component={NavLink}
to="/list"
sx={{ color: '#fdeecd' }}
/>
<BottomNavigationAction
label="About"
icon={<InfoIcon fontSize="large" />}
component={NavLink}
to="/manage-list"
sx={{ color: '#fdeecd' }}
/>
</BottomNavigation>
</Paper>
)}
</AppBar>
);
}
Expand Down
13 changes: 12 additions & 1 deletion src/views/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import './Home.css';
import { SingleList } from '../components/SingleList';
import { useEffect, useState, useRef } from 'react';
import { createList } from '../api/firebase';
import { InputLabel, Input, Box, Button, Stack, Grid } from '@mui/material';
import {
InputLabel,
Input,
Box,
Button,
Stack,
Grid,
Typography,
} from '@mui/material';
import { SignInButton } from '../api/useAuth';

export function Home({ data, setListPath, userEmail, userId }) {
Expand Down Expand Up @@ -55,6 +63,9 @@ export function Home({ data, setListPath, userEmail, userId }) {
boxSizing: 'border-box',
}}
>
<Typography variant="h4" component="h1" gutterBottom>
Welcome to Swift Shop! Sign in with below button to shop.
</Typography>
<SignInButton />
</Box>
) : (
Expand Down

0 comments on commit 6af7745

Please sign in to comment.