Skip to content

Commit

Permalink
Merge pull request #308 from RaiDevX8/RaiDevX8-feat/navbar
Browse files Browse the repository at this point in the history 
 Adds functionality to align the **Login** and **Theme Switcher** buttons to the right  #304
  • Loading branch information
@Trisha-tech
Trisha-tech authored Oct 5, 2024
2 parents 833d798 + 1a4d370 commit 8d35da8
Showing 1 changed file with 68 additions and 78 deletions.
146 changes: 68 additions & 78 deletions client/src/Components/NavBar/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const MenuContainer = styled('div')({
display: 'flex',
alignItems: 'center',
gap: '10px',
marginLeft: 'auto', // Move the menu items to the end (right-aligned)
});

const MobileMenu = styled('div')(({ open }) => ({
Expand All @@ -53,7 +54,6 @@ const MobileMenu = styled('div')(({ open }) => ({

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

function Navbar({ darkMode, toggleDarkMode }) {
Expand Down Expand Up @@ -92,93 +92,83 @@ function Navbar({ darkMode, toggleDarkMode }) {
<IconButton component={Link} to="/">
<Logo src={logo} alt="Logo" />
</IconButton>
<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>
{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={userLoggedIn ? "#" : "/login"}
onClick={userLoggedIn ? handleLogout : null}
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
>
{userLoggedIn ? "Logout" : "Login"}
</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' }} />}>

{/* Desktop or Mobile Menu */}
{isMobile ? (
<>
{/* Theme Switcher on the left side of the hamburger icon */}
<IconButton onClick={toggleDarkMode} style={{ marginRight: '10px' }}>
<img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
</IconButton>

<MobileMenuButton onClick={handleMenuClick}>
<MenuIcon sx={{ fontSize: '2rem' }} />
</MobileMenuButton>

<MobileMenu open={openMenu}>
{/* Menu Items */}
<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' }} />}>
<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' }} />}>
<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' }} />}>
<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' }} />}>
<StyledButton color="inherit" component={Link} to="/orders" startIcon={<ShoppingBagIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
Orders
</StyledButton>
</MenuContainer>
)}
</div>

{/* Login inside the menu */}
<StyledButton
color="inherit"
component={Link}
to={userLoggedIn ? "#" : "/login"}
onClick={userLoggedIn ? handleLogout : null}
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
fullWidth
>
{userLoggedIn ? "Logout" : "Login"}
</StyledButton>
</MobileMenu>
</>
) : (
<MenuContainer>
<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>

{/* Move these two to the end */}
<IconButton onClick={toggleDarkMode} style={{ marginLeft: 'auto', marginRight: '10px' }}>
<img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
</IconButton>
<StyledButton
color="inherit"
component={Link}
to={userLoggedIn ? "#" : "/login"}
onClick={userLoggedIn ? handleLogout : null}
startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
>
{userLoggedIn ? "Logout" : "Login"}
</StyledButton>
</MenuContainer>
)}
</Toolbar>
</StyledAppBar>
);
Expand Down

0 comments on commit 8d35da8

Please sign in to comment.