Expand collapse menu using react pro-sidebar

Question

i have created an expand collapse menu using react pro sidebar.and this is default view

but i expect

collapse view as default

Code

import React from "react";
import { Sidebar, Menu, MenuItem, useProSidebar } from "react-pro-sidebar";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined";
import ContactsOutlinedIcon from "@mui/icons-material/ContactsOutlined";
import ReceiptOutlinedIcon from "@mui/icons-material/ReceiptOutlined";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import { Link } from "react-router-dom";
import logo from '../../images/awb_logo.svg';
import PeopleIcon from '@mui/icons-material/People';
import Person3Icon from '@mui/icons-material/Person3';
import BusinessIcon from '@mui/icons-material/Business';
import EscalatorWarningIcon from '@mui/icons-material/EscalatorWarning';
import PostAddIcon from '@mui/icons-material/PostAdd';
import "../../css/newstyle.scss";
function MySidebar() {
  
  const { collapseSidebar, isCollapsed } = useProSidebar();
  const [isExpanded, setIsExpanded] = React.useState(true);
  function handleToggle() {
    if (isCollapsed) {
      collapseSidebar(false);
      setIsExpanded(true);
    } else {
      collapseSidebar(true);
      setIsExpanded(false);
    }
  }
  return (
    <div id="app" style={({ height: "100vh" }, { display: "flex" })}>
   <Sidebar style={{ height: "100vh" }} collapsed={!isExpanded}>
      <Menu>
        <MenuItem
          icon={<MenuOutlinedIcon />}
          onClick={() => {
            collapseSidebar();
          }}
          style={{ textAlign: "center" }}
        >
          {" "}
         
        </MenuItem>

        <MenuItem  icon={<PeopleIcon />} hide-label>Home</MenuItem>
        <MenuItem icon={<Person3Icon />} hide-label>Team</MenuItem>
        <MenuItem icon={<BusinessIcon />} hide-label>Contacts</MenuItem>
        <MenuItem icon={<EscalatorWarningIcon /> }hide-label>Profile</MenuItem>
        <MenuItem icon={<PostAddIcon />} hide-label>FAQ</MenuItem>
      
      </Menu>
    </Sidebar>
    
  </div>
  );
}

export default MySidebar;

Any help would be appreciated

Answer 1

In the Sidebar tag, you need to add new prop called defaultCollapsed and set it to true.

<Sidebar style={{ height: "100vh" }} defaultCollapsed={true} collapsed={!isExpanded}>