// Snippet — merge this into the existing src/layouts/DashboardLayout/index.tsx.
// Do NOT overwrite the file; add the imports and the avatarPopoverContent prop.

import { useLocation, useNavigate } from 'react-router-dom';
import { IconLogout } from '@material-hu/icons/tabler';
import Button from '@material-hu/components/design-system/Buttons/Button';
import { useAuth } from '../../providers/AuthContext';

export const DashboardLayout = ({ children }: DashboardLayoutProps) => {
  const { pathname } = useLocation();
  const { clearToken } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    clearToken();
    void navigate('/login', { replace: true });
  };

  // ... existing code ...

  return (
    // ... existing JSX ...
    <HomeHeader
      // ... existing props ...
      avatarPopoverContent={
        <Button
          variant="text"
          startIcon={<IconLogout />}
          onClick={handleLogout}
        >
          Log out
        </Button>
      }
    />
    // ...
  );
};
