From 35b4506bd2fd6ddeb9f2226a708e929364f3fff9 Mon Sep 17 00:00:00 2001
From: Charan Rai <122370376+RaiDevX8@users.noreply.github.com>
Date: Sat, 5 Oct 2024 16:11:14 +0530
Subject: [PATCH 1/2] Feat : moved theme switcher and login to right side

---
 client/src/Components/NavBar/NavBar.jsx | 112 +++++++++++-------------
 1 file changed, 53 insertions(+), 59 deletions(-)

diff --git a/client/src/Components/NavBar/NavBar.jsx b/client/src/Components/NavBar/NavBar.jsx
index c538e746..d098b504 100644
--- a/client/src/Components/NavBar/NavBar.jsx
+++ b/client/src/Components/NavBar/NavBar.jsx
@@ -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 }) => ({
@@ -53,7 +54,7 @@ const MobileMenu = styled('div')(({ open }) => ({
 
 const MobileMenuButton = styled(IconButton)({
   fill: '#fff', // Adjust color as needed
-  marginLeft: '-13px', // Adjust for proper alignment
+  marginLeft: 'auto', // Move the menu icon to the end in mobile view
 });
 
 function Navbar({ darkMode, toggleDarkMode }) {
@@ -90,62 +91,22 @@ 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>
+        
+        {/* Desktop or Mobile Menu */}
+        {isMobile ? (
+          <>
+            <MobileMenuButton onClick={handleMenuClick}>
+              <MenuIcon sx={{ fontSize: '2rem' }} />
+            </MobileMenuButton>
+            <MobileMenu open={openMenu}>
+              {/* Menu Items */}
               <StyledButton
                 color="inherit"
                 component={Link}
                 to={userLoggedIn ? "#" : "/login"}
                 onClick={userLoggedIn ? handleLogout : null}
                 startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}
+                fullWidth
               >
                 {userLoggedIn ? "Logout" : "Login"}
               </StyledButton>
@@ -155,28 +116,61 @@ function Navbar({ darkMode, toggleDarkMode }) {
                   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' }} />}>
+              <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>
+            </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>
   );

From 1a4d37078a924a6881a7895447f909fc9498d0ae Mon Sep 17 00:00:00 2001
From: Charan Rai <122370376+RaiDevX8@users.noreply.github.com>
Date: Sat, 5 Oct 2024 16:20:42 +0530
Subject: [PATCH 2/2] feat : moved theme switcher and login button to right
 side

---
 client/src/Components/NavBar/NavBar.jsx | 42 +++++++++++--------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/client/src/Components/NavBar/NavBar.jsx b/client/src/Components/NavBar/NavBar.jsx
index d098b504..e00b73b4 100644
--- a/client/src/Components/NavBar/NavBar.jsx
+++ b/client/src/Components/NavBar/NavBar.jsx
@@ -54,7 +54,6 @@ const MobileMenu = styled('div')(({ open }) => ({
 
 const MobileMenuButton = styled(IconButton)({
   fill: '#fff', // Adjust color as needed
-  marginLeft: 'auto', // Move the menu icon to the end in mobile view
 });
 
 function Navbar({ darkMode, toggleDarkMode }) {
@@ -95,32 +94,17 @@ function Navbar({ darkMode, toggleDarkMode }) {
         {/* 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={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>
@@ -136,6 +120,18 @@ function Navbar({ darkMode, toggleDarkMode }) {
               <StyledButton color="inherit" component={Link} to="/orders" startIcon={<ShoppingBagIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
                 Orders
               </StyledButton>
+
+              {/* 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>
           </>
         ) : (
@@ -155,7 +151,7 @@ function Navbar({ darkMode, toggleDarkMode }) {
             <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' }} />