Untitled

const Dashboard = () => {
  const navi = useNavigate();
  const [isLoggedIn, setLoggedIn] = useState(() => sessionStorage.getItem('isLoggedIn') === 'true');
  const [isHamburgerOpen, setHamburgerOpen] = useState(false);

  const handleImageChange = async (e) => {
    // ... (unchanged)
  };

  const handleLogout = () => {
    navi('/');
    sessionStorage.removeItem('isLoggedIn');
  };

  const toggleHamburger = () => {
    setHamburgerOpen(!isHamburgerOpen);
  };

  useEffect(() => {
    if (!isLoggedIn) {
      navi('/');
    }
  }, [isLoggedIn, navi]);

  return (
    <>
      <header className="dashboard-header">
        <div className="dashboard-hamburger" onClick={toggleHamburger}>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <nav className={`dashboard-nav ${isHamburgerOpen ? 'open' : ''}`}>
          <div className="dashboard-nav-left">
            <Button variant="contained" onClick={() => navi('/Dashboard')}>
              Dashboard
            </Button>
            <input type="file" onChange={handleImageChange} multiple className="dashboard-upload-input" />
            <Button variant="contained" onClick={() => navi('/FetchImage')}>
              Images
            </Button>
          </div>
          <div className="dashboard-nav-right">
            <p className="dashboard-welcome-message">Welcome !!!!! {sessionStorage.getItem('name')}</p>
            <Button variant="contained" onClick={handleLogout}>
              Logout
            </Button>
          </div>
        </nav>
      </header>

      <body className="dashbody">
        <h1 className="app-name">Weather APP</h1>
        <Button variant="contained" onClick={() => navi('/Weatherdata')}>
          Weather Search
        </Button>
      </body>
    </>
  );
};

export default Dashboard;
Editor is loading...