Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design A New "Logo" and A "Favicon" for The Website #248

Merged
merged 4 commits into from
Aug 9, 2024
Merged

Design A New "Logo" and A "Favicon" for The Website #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c9630a
Update Favicon.ico
MastanSayyad Aug 8, 2024
2ccc535
Create Logo.png
MastanSayyad Aug 8, 2024
63b1461
Update NavBar.jsx
MastanSayyad Aug 8, 2024
579f93d
Update
MastanSayyad Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified client/public/favicon.ico
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Online Book Sales</title>
<style>
.circle {
position: absolute;
Expand Down
202 changes: 116 additions & 86 deletions client/src/Components/NavBar/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { AppBar, Toolbar, Typography, IconButton, Button, useMediaQuery, useTheme, styled } from '@mui/material';
import React, { useState } from 'react';
import { AppBar, Toolbar, IconButton, Button, useMediaQuery, useTheme, styled } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import StoreIcon from '@mui/icons-material/Store';
Expand All @@ -12,11 +12,18 @@ import { useAuth } from '../../Context/AuthContext';
import { useToast } from "../../Context/ToastContext";
import sunIcon from '../../assets/sun.png'; // Adjust the path as necessary
import moonIcon from '../../assets/moon.png'; // Adjust the path as necessary
import logo from '../../assets/Logo.png'; // Adjust the path as necessary

const StyledAppBar = styled(AppBar)({
backgroundColor: '#002147', // Adjust color to your preference
});

const Logo = styled('img')({
width: '220px',
height: 'auto',
marginRight: 'auto',
});

const StyledButton = styled(Button)({
fontSize: '1rem', // Adjust font size
'&:hover': {
Expand All @@ -25,6 +32,30 @@ const StyledButton = styled(Button)({
},
});

const MenuContainer = styled('div')({
display: 'flex',
alignItems: 'center',
gap: '10px',
});

const MobileMenu = styled('div')(({ open }) => ({
display: open ? 'flex' : 'none',
flexDirection: 'column',
position: 'absolute',
top: '64px', // Adjust based on AppBar height
right: '0',
backgroundColor: '#002147',
width: '100%',
padding: '10px',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)',
zIndex: 1000, // Ensure it appears above other content
}));

const MobileMenuButton = styled(IconButton)({
fill: '#fff', // Adjust color as needed
marginLeft: '-13px', // Adjust for proper alignment
});

function Navbar({ darkMode, toggleDarkMode }) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
Expand Down Expand Up @@ -55,101 +86,100 @@ function Navbar({ darkMode, toggleDarkMode }) {

return (
<StyledAppBar position="sticky">
<Toolbar>
<Typography variant="h6" component={Link} to="/" sx={{ flexGrow: 1, fontSize: '1.5rem' }}>
Book4u
</Typography>
<IconButton onClick={toggleDarkMode} style={{ marginRight: '10px' }}>
<img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
<Toolbar style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<IconButton component={Link} to="/">
<Logo src={logo} alt="Logo" />
</IconButton>
{isMobile ? (
<IconButton
edge="start"
color="inherit"
aria-label="menu"
onClick={handleMenuClick}
>
<MenuIcon sx={{ fontSize: '2rem' }} />
<div style={{ display: 'flex', alignItems: 'center' }}>
<IconButton onClick={toggleDarkMode} style={{ marginRight: '10px' }}>
<img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
</IconButton>
) : (
<div className='flex gap-4'>
<StyledButton
color="inherit"
component={Link}
to={userLoggedIn ? "#" : "/login"}
onClick={userLoggedIn ? handleLogout : null}
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
>
{userLoggedIn ? "Logout" : "Login"}
</StyledButton>
{userLoggedIn && (
{isMobile ? (
<>
<MobileMenuButton onClick={handleMenuClick}>
<MenuIcon sx={{ fontSize: '2rem' }} />
</MobileMenuButton>
<MobileMenu open={openMenu}>
<StyledButton
color="inherit"
component={Link}
to={userLoggedIn ? "#" : "/login"}
onClick={userLoggedIn ? handleLogout : null}
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
fullWidth
>
{userLoggedIn ? "Logout" : "Login"}
</StyledButton>
{userLoggedIn && (
<StyledButton
color="inherit"
component={Link}
to="/profile"
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
fullWidth
>
Profile
</StyledButton>
)}
<StyledButton color="inherit" component={Link} to="/" startIcon={<HomeIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Home
</StyledButton>
<StyledButton color="inherit" component={Link} to="/shop" startIcon={<StoreIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Shop
</StyledButton>
<StyledButton color="inherit" component={Link} to="/wishlist" startIcon={<FavoriteIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Wishlist
</StyledButton>
<StyledButton color="inherit" component={Link} to="/cart" startIcon={<ShoppingCartIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Cart
</StyledButton>
<StyledButton color="inherit" component={Link} to="/orders" startIcon={<ShoppingBagIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Orders
</StyledButton>
</MobileMenu>
</>
) : (
<MenuContainer>
<StyledButton
color="inherit"
component={Link}
to="/profile"
to={userLoggedIn ? "#" : "/login"}
onClick={userLoggedIn ? handleLogout : null}
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
>
Profile
{userLoggedIn ? "Logout" : "Login"}
</StyledButton>
)}
<StyledButton color="inherit" component={Link} to="/" startIcon={<HomeIcon sx={{ fontSize: '1.5rem' }} />}>
Home
</StyledButton>
<StyledButton color="inherit" component={Link} to="/shop" startIcon={<StoreIcon sx={{ fontSize: '1.5rem' }} />}>
Shop
</StyledButton>
<StyledButton color="inherit" component={Link} to="/wishlist" startIcon={<FavoriteIcon sx={{ fontSize: '1.5rem' }} />}>
Wishlist
</StyledButton>
<StyledButton color="inherit" component={Link} to="/cart" startIcon={<ShoppingCartIcon sx={{ fontSize: '1.5rem' }} />}>
Cart
</StyledButton>
<StyledButton color="inherit" component={Link} to="/orders" startIcon={<ShoppingBagIcon sx={{ fontSize: '1.5rem' }} />}>
Orders
</StyledButton>
</div>
)}
</Toolbar>
{/* Conditional rendering for the mobile menu */}
{isMobile && (
<div style={{ display: openMenu ? 'block' : 'none' }}>
<StyledButton
color="inherit"
component={Link}
to={userLoggedIn ? "#" : "/login"}
onClick={userLoggedIn ? handleLogout : null}
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
fullWidth
>
{userLoggedIn ? "Logout" : "Login"}
</StyledButton>
{userLoggedIn && (
<StyledButton
color="inherit"
component={Link}
to="/profile"
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
fullWidth
>
Profile
</StyledButton>
{userLoggedIn && (
<StyledButton
color="inherit"
component={Link}
to="/profile"
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
>
Profile
</StyledButton>
)}
<StyledButton color="inherit" component={Link} to="/" startIcon={<HomeIcon sx={{ fontSize: '1.5rem' }} />}>
Home
</StyledButton>
<StyledButton color="inherit" component={Link} to="/shop" startIcon={<StoreIcon sx={{ fontSize: '1.5rem' }} />}>
Shop
</StyledButton>
<StyledButton color="inherit" component={Link} to="/wishlist" startIcon={<FavoriteIcon sx={{ fontSize: '1.5rem' }} />}>
Wishlist
</StyledButton>
<StyledButton color="inherit" component={Link} to="/cart" startIcon={<ShoppingCartIcon sx={{ fontSize: '1.5rem' }} />}>
Cart
</StyledButton>
<StyledButton color="inherit" component={Link} to="/orders" startIcon={<ShoppingBagIcon sx={{ fontSize: '1.5rem' }} />}>
Orders
</StyledButton>
</MenuContainer>
)}
<StyledButton color="inherit" component={Link} to="/shop" startIcon={<StoreIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Shop
</StyledButton>
<StyledButton color="inherit" component={Link} to="/wishlist" startIcon={<FavoriteIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Wishlist
</StyledButton>
<StyledButton color="inherit" component={Link} to="/cart" startIcon={<ShoppingCartIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Cart
</StyledButton>
<StyledButton color="inherit" component={Link} to="/orders" startIcon={<ShoppingBagIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Orders
</StyledButton>
</div>
)}
</Toolbar>
</StyledAppBar>
);
}

export default Navbar;
export default Navbar;
Binary file added client/src/assets/Logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading