header fixes

src/Header.tsx

@@ -7,27 +7,30 @@ import {
   Tooltip,
   Button,
   Box,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { useNavigate } from "react-router-dom";
+import { useAuth } from "../react-auth";
 
 interface HeaderProps {
   headerTitle: string;
-  isMobile: boolean;
-  onDrawerToggle: () => void;
-  onLogout: () => void;
-  username?: string;
+  onDrawerToggle?: () => void; // optional (only used where needed)
 }
 
 export default function Header({
   headerTitle,
-  isMobile,
   onDrawerToggle,
-  onLogout,
-  username,
 }: HeaderProps) {
   const navigate = useNavigate();
+  const { currentUser, logout } = useAuth();
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const isAuthenticated = !!currentUser;
 
   return (
     <AppBar
@@ -42,7 +45,8 @@ export default function Header({
       }}
     >
       <Toolbar>
-        {isMobile && (
+        {/* MOBILE MENU BUTTON */}
+        {isMobile && onDrawerToggle && (
           <IconButton
             color="inherit"
             edge="start"
@@ -53,29 +57,51 @@ export default function Header({
           </IconButton>
         )}
 
+        {/* TITLE */}
         <Typography
           variant="h6"
           noWrap
-          sx={{ flexGrow: 1, fontWeight: "bold" }}
+          sx={{ flexGrow: 1, fontWeight: "bold", cursor: "pointer" }}
+          onClick={() => navigate("/")}
         >
           {headerTitle}
         </Typography>
 
-        <Box sx={{ display: { xs: "none", sm: "flex" }, alignItems: "center", mr: 2 }}>
+        {/* AUTH SECTION */}
+        {isAuthenticated ? (
+          <>
+            <Box
+              sx={{
+                display: { xs: "none", sm: "flex" },
+                alignItems: "center",
+                mr: 2,
+              }}
+            >
+              <Button
+                color="inherit"
+                onClick={() => navigate("/admin/profile")}
+                sx={{ textTransform: "none", fontWeight: 500 }}
+              >
+                {currentUser.username}
+              </Button>
+            </Box>
+
+            <Tooltip title="Logout">
+              <IconButton color="inherit" onClick={logout}>
+                <LogoutIcon />
+              </IconButton>
+            </Tooltip>
+          </>
+        ) : (
           <Button
             color="inherit"
-            onClick={() => navigate("/admin/profile")}
-            sx={{ textTransform: "none", fontWeight: 500 }}
+            variant="outlined"
+            onClick={() => navigate("/admin")}
+            sx={{ textTransform: "none" }}
           >
-            {username}
+            Login
           </Button>
-        </Box>
-
-        <Tooltip title="Logout">
-          <IconButton color="inherit" onClick={onLogout}>
-            <LogoutIcon />
-          </IconButton>
-        </Tooltip>
+        )}
       </Toolbar>
     </AppBar>
   );