Make background darker when sidebar is open in React Typescript-CodePudding

I'm trying to customize a sidebar using react-pro-sidebar with React Typescript. The sidebar looks fine but I cannot make the other part of the screen darker colored when the sidebar is opened.

Also, I would like to make the button that opens/closes the sidebar as a separate button. Is it possible in this case?

Here is a working sandbox of my code so far: https://codesandbox.io/s/sleepy-lichterman-qqpp5?file=/src/App.tsx

And the same code put here:

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;

CodePudding user response：

You could just use a fixed positioned div for that. I edited your example here: https://codesandbox.io/s/kind-babycat-cg872

I added a button and an overlay div to the sidebar:

<button onClick={handleChange}>click me</button>
// <ProSidebar ...
<div
    className={`overlay ${!isChecked ? 'visible' : ''}`}
    onClick={handleChange}
/>

and added some css:

button {
    position: relative;
    z-index: 1;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.overlay.visible {
    right: 0;
    bottom: 0;
    opacity: 1;
    transition: opacity 0.4s;
}