Login menu has been improved.

Author: zcomert

day-15/bs-store/src/components/adminAppbar/AdminAppbar.js

@@ -15,6 +15,7 @@ import AdbIcon from "@mui/icons-material/Adb";
 import { Link } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import ThemeMenu from "../theme/ThemeMenu";
+import { useSelector } from "react-redux";
 
 const pages = ["Books", "Categories", "Authors"];
 const paths = [
@@ -25,6 +26,8 @@ const paths = [
 const settings = ["Profile", "Account", "Dashboard", "Logout"];
 
 const AdminAppbar = () => {
+  const { authItems } = useSelector((state) => state.auth);
+
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
   const navigate = useNavigate();
@@ -133,53 +136,52 @@ const AdminAppbar = () => {
                 {page}
               </Button>
             ))}
-            
-          </Box>
-          <Box>
-            
           </Box>
+          <Box></Box>
+
+          {authItems?.isLogin && (
+            <Box sx={{ flexGrow: 0 }}>
+              <Tooltip title='Open settings'>
+                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                  <Avatar alt='Remy Sharp' src='/static/images/avatar/2.jpg' />
+                </IconButton>
+              </Tooltip>
+              <Menu
+                sx={{ mt: "45px" }}
+                id='menu-appbar'
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+              >
+                {settings.map((setting) => (
+                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                    <Typography textAlign='center'>{setting}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+          )}
 
-          <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title='Open settings'>
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar alt='Remy Sharp' src='/static/images/avatar/2.jpg' />
-              </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: "45px" }}
-              id='menu-appbar'
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
-              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign='center'>{setting}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
-            
-          </Box>
           <ThemeMenu />
+
           <div>
-          <Button
-              key="login"
+            <Button
+              key='login'
               onClick={() => navigate("/auth/login")}
               sx={{ my: 2, color: "white", display: "block" }}
-              >Login</Button>
+            >
+              Login
+            </Button>
           </div>
-
-          
-
         </Toolbar>
       </Container>
     </AppBar>

day-15/bs-store/src/store/initialValues/authItems.js

@@ -5,4 +5,5 @@ export const authItems = {
   lastName: "",
   accessToken: "",
   refreshToken: "",
+  isLogin:false
 };

day-15/bs-store/src/store/reducers/authReducer.js

@@ -13,7 +13,8 @@ function authReducer(state={}, { type, payload }) {
       return {
         ...state,
         authItems:{
-          ...payload
+          ...payload,
+          isLogin:true
         }
       };