如何防止汉堡菜单侧边栏溢出大小？

Question

I have a hamburger-like menu on the right side that can bring sidebar from right to the left just like this slide example .

The problem is that the sidebar takes a extra space although it's hidden (before clicking menu) and when it comes out the extra space has been occupied by the sidebar.

It looks like body tag is forced to be extended by the sidebar that is not my intention.

I want the sidebar to come out the edge of the right side instead of taking extra space when hidden and takes that space when appeared.

Here's my code below:

const Sidebar = styled.div<SidebarProps>`
  position: absolute;
  background: rgb(65, 65, 65);
  top: 3.6rem;
  right: 0;
  border: 1px solid red;
  width: 19.2rem;
  height: 100%;
  z-index: 99;
  padding: 2.65rem 1.4rem;
  overflow-y: hidden;
  transform: ${(props) =>
    props.slideOn ? "translateX(0)" : "translateX(100%)"};
  transition: transform 0.3s ease-in-out;
  opacity: ${(props) => (props.slideOn ? 1 : 0)};
`;

Thanks in advance.

Answer 1

This might be a dumb way to do it, but could you set the container's width to something like:

container {
    max-width: 100vw;
    overflow-x: hidden;
}

Answer 2

Well I think it can work for you. It is a way to do following.

.container {
  display: none;
  overflow-x: hidden;
}