Make background darker when sidebar is open in React + Typescript

Question

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;

Jeshken · Accepted Answer · 2021-11-09 11:57:17Z

2

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;
}

edited Nov 9, 2021 at 11:57

answered Nov 9, 2021 at 11:25

Jeshken

2652 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leo Messi Over a year ago

thanks for the answer, it solves the problem with the darker background. related to the separate button, it isn't what is expected, is it possible to hide all the sidebar when the button is set on 'closed'? Something like this example (bootsnipp.com/snippets/y3O1) but with the button being fixed above it and visible all the time.

Jeshken Over a year ago

The sidebar component supports a collapsedWidth property. I updated the codesandbox link accordingly so that the sidebar collapses down to 0px.

Collectives™ on Stack Overflow

Make background darker when sidebar is open in React + Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related