Estoy tratando de personalizar una barra lateral usando react-pro-sidebar con React + Typescript. La barra lateral se ve bien, pero no puedo oscurecer la otra parte de la pantalla cuando se abre la barra lateral.

Además, me gustaría hacer que el botón que abre/cierra la barra lateral sea un botón separado. ¿Es posible en este caso?

Aquí hay un entorno limitado de trabajo de mi código hasta ahora: https://codesandbox.io/s/sleepy-lichterman-qqpp5?file=/src/App.tsx

Y el mismo código puesto aquí:

 import * as React from "react"; import { useEffect, useState } from "react"; import { ProSidebar, Menu, MenuItem, SubMenu } from "react-pro-sidebar"; import "react-pro-sidebar/dist/css/styles.css"; export interface SidebarProps { onChange?: (event: React.MouseEvent, isChecked?: boolean) => void; isCheckedInitial: boolean; } export function Sidebar({ onChange, isCheckedInitial, ...rest }: SidebarProps) { const [isChecked, setCheckedState] = useState(isCheckedInitial); useEffect(() => { setCheckedState(isCheckedInitial); }, [isCheckedInitial]); const handleChange = (event: React.MouseEvent) => { setCheckedState(!isChecked); onChange && onChange(event, isChecked); }; return ( <ProSidebar collapsed={isChecked}> <Menu iconShape="square"> <MenuItem onClick={handleChange}>click </MenuItem> <SubMenu title="Top 1"> <MenuItem>Sub menu</MenuItem> <MenuItem>Sub menu</MenuItem> <MenuItem>Sub menu</MenuItem> </SubMenu> <SubMenu title="Top 2"> <MenuItem>Sub menu</MenuItem> <MenuItem>Sub menu</MenuItem> <MenuItem>Sub menu</MenuItem> </SubMenu> <SubMenu title="Top 3"> <MenuItem>Sub menu</MenuItem> <MenuItem>Sub menu</MenuItem> <MenuItem>Sub menu</MenuItem> </SubMenu> </Menu> </ProSidebar> ); } export default Sidebar;