How can I prevent the content from being pushed when the sidebar is opened in JavaScript and CSS? I want to make it independent

I'm struggling with making the sidebar independent of the main content when it's opened. I've included the CSS and JavaScript code below. Can someone provide assistance with this?

function ExpandDrawer() {
    const drawerContent = document.querySelector(".drawerContent");
    drawerContent.classList.toggle("active");
}
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}

.drawerLayer {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  float: right;
  z-index: 2;
}

.container {
  position: relative;
}

.container .drawerContent {
  position: relative;
  width: 80px;
  height: 420px;
  background: rgb(0,125,187);
  background: linear-gradient(161deg, rgba(0,125,187,1) 0%, rgba(112,188,224,1) 100%);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

.container .drawerContent.active {
  width: 300px;
  overflow-y: scroll;
}

.toggle {
  position: absolute;
  top: calc(50% - 85px);
  left: -20px;
  width: 20px;
  height: 32px;
  background: rgb(0,125,187);
  background: linear-gradient(161deg, rgba(0,125,187,1) 0%, rgba(112,188,224,1) 100%);
  cursor: pointer;
  border: 1px solid rgba(0,125,187,1);
  border-radius: 64px 0 0 64px;
  justify-content: center;
  align-items: center;
}

.toggle:before {
  content: '\e909';
  font-family: "font-awesome";
  height: 100%;
  width: 100%;
  line-height: 30px;
  position: absolute;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  color: rgba(112,188,224,1);
}

.toggle.active:before {
  content: '\e909';
}
<center>
    <h1>This is a heading</h1>
    <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka
        dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd
    .</p>
    <div class="container drawerLayer">
        <div class="drawerContent">
           <h3>Hi</h3>
        </div>
        <div class="toggle" onClick="ExpandDrawer()">
        </div>
    </div>
    <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka
        dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd
    .</p>
</center>

Would appreciate any help with this issue.

javascripthtmlcsssidebar

Answer №1

It would be a good idea to set position: absolute in order to remove it from the normal flow of document elements.

function ExpandDrawer() {
  const drawerContent = document.querySelector(".drawerContent");
  drawerContent.classList.toggle("active");
}
body {
  background-color: powderblue;
}

h1 {
  color: blue;
}

p {
  color: red;
}

.drawerLayer {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  float: right;
  z-index: 2;
}

.container {
  position: absolute;
  right: 0;
}

.container .drawerContent {
  position: relative;
  width: 80px;
  height: 420px;
  background: rgb(0, 125, 187);
  background: linear-gradient(161deg, rgba(0, 125, 187, 1) 0%, rgba(112, 188, 224, 1) 100%);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

.container .drawerContent.active {
  width: 300px;
  overflow-y: scroll;
}

.toggle {
  position: absolute;
  top: calc(50% - 85px);
  left: -20px;
  width: 20px;
  height: 32px;
  background: rgb(0, 125, 187);
  background: linear-gradient(161deg, rgba(0, 125, 187, 1) 0%, rgba(112, 188, 224, 1) 100%);
  cursor: pointer;
  border: 1px solid rgba(0, 125, 187, 1);
  border-radius: 64px 0 0 64px;
  justify-content: center;
  align-items: center;
}

.toggle:before {
  content: '\e909';
  font-family: "font-awesome";
  height: 100%;
  width: 100%;
  line-height: 30px;
  position: absolute;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  color: rgba(112, 188, 224, 1);
}

.toggle.active:before {
  content: '\e909';
}
<center>
  <h1>This is a heading</h1>
  <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd .
  </p>
  <div class="container drawerLayer">
    <div class="drawerContent">
      <h3>Hi</h3>
    </div>
    <div class="toggle" onClick="ExpandDrawer()">
    </div>
  </div>
  <p>This is a paragraphhsdgaghdhagsd asdasgdjhasgdhsagdjsagdgsa ajhdkjashdkjashdkjahjdkhasd ajhdjkashdkjahdkdjashdjkahkjdhajkdhkjshdjka dvjadjagjhdgajdghagdjagdgahd ajdjagdasgjdgahd .
  </p>
</center>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?

After creating both the desktop and mobile versions of my website, I have a question. How can I determine whether a visitor is using a mobile phone or a PC when they come to my website? Specifically, if a visitor accesses my website through a mobile devic ...

csshtmlwindows-mobileuser-agent

Transmit an audio buffer to the client for direct download without the need for server storage

As part of my project, I am developing a text-to-speech feature utilizing the technology of IBM Watson API. With the assistance of the code snippet below, I have successfully managed to acquire the .wav file after conversion onto my server. textToSpeech ...

javascriptnode.jsexpress

React - Issue with Input event handling when utilizing both onChange and onKeyDown functions

I was attempting to create a feature similar to a multi-select, where users could either choose a value from a list or enter a new value. The selected value should be added to an array when the user presses the enter key. To monitor changes in the input ...

javascriptreactjs

Facing issues with integrating Mixpanel with NestJS as the tracking function cannot be located

While utilizing mixpanel node (yarn add mixpanel) in conjunction with NestJS, I have encountered an issue where only the init function is recognized. Despite calling this function, I am unable to invoke the track function and receive the error message: Ty ...

javascriptnode.jstypescriptnestjsmixpanel

What are the steps to converting one grid to another solely with the use of Bootstrap utilities?

https://i.sstatic.net/SuGiM.png I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure: <div className="row"> <div className=&q ...

htmlcsstwitter-bootstrapbootstrap-4

How can I display table rows along with their child table rows in Angular?

Is there a way to display API data in a table using Angular? The table should have collapsible rows with nested child rows. This is the JSON file structure: { "collapse1": [ { "name": "Soil", "budget": 12345, "child": [ { ...

javascripthtmlangulartypescript

Using Javascript to update text content by utilizing `innerText` property instead of checking if it is

How can I selectively use Javascript to replace the specific word "Rindan" in the text below, but not if it appears within an attribute such as img alt=="Rindan"? I only want to replace instances of the word "Rindans" when it is part of the inner text an ...

javascript

Transforming an Excel document into JSON format: inspection of JSON code structure

Looking to transform Excel data into JSON format, but unsure if the current structure will be ideal for processing with D3.js. Planning to incorporate this JSON file within D3.js for visualization purposes. Here's a snippet of the Excel file: In the ...

javascriptsqljsonexceld3.js

How can we include identical item names within a single JavaScript object?

My attempt at achieving the desired result involves creating an object like this: var obj = {id: id, items: "asdf", items: "sdff", test: varTest}; However, I face a challenge where I need to dynamically add two elements with the same name 'items&apo ...

javascriptjqueryjsonobject

PHP: Dynamically adjust image size from database to fit different screen sizes

Managing a website with various categories means each category has its own assigned image stored in the database. So, when a product from a specific category like bikes or chairs is displayed on the website, the corresponding image needs to be retrieved an ...

phphtml

Determining the number of words in every line within a textarea

I am looking to determine the number of words per line in a textarea. The width of the textarea is variable. Check out this code snippet that calculates the number of rows: http://jsfiddle.net/2tcygj9e/ ...

javascriptjquery

Discover the art of concurrently listening to both an event and a timer in JavaScript

Upon loading the page, a timer with an unpredictable duration initiates. I aim to activate certain actions when the countdown ends and the user presses a button. Note: The action will only commence if both conditions are met simultaneously. Note 2: To cl ...

javascripthtml

Execute button click automatically upon page loading in AngularJS

I'm trying to figure out how to automatically trigger a button click on an AngularJS page when the page loads based on a querystring value. In a traditional asp.net web forms page, I could easily handle this scenario by calling Button1_Click(sender,e) ...

javascripthtmlangularjsbuttonclick

Incorporate Arabic typography into the React Material Theme

My goal is to utilize the Noto Sans Arabic font within my React material UI theme. Everything seems to be functioning correctly, including overrides. Despite consulting the React Material UI documentation and attempting to follow similar steps as outlined ...

htmlcssreactjsmaterial-ui

JavaScript malfunctioning on Chrome

Displayed on the page is a table that lists user details. When the Edit Button is clicked, it allows for the row to be edited. The code provided below works in IE but does not show any response in Chrome. I am looking to make the site compatible with bot ...

javascriptgoogle-chrome

Understanding fluid design concept

Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...

cssliquid-layout

Tips for extracting only the filename from chokidar instead of the entire file path

I am trying to capture the filename that has been changed, removed, or renamed, but I am currently receiving the full file path. Question: How can I extract only the filename when it is changed, instead of working with the entire file path? This is what ...

javascriptnode.js

Utilizing Conditional Logic to Create a Dynamic Menu

I have a navigation menu on my website that is divided into two sections. There is a left panel and a right panel which slide in from the side when their respective buttons are clicked, covering the browser window. The functionality of sliding in the pan ...

javascripttoggleconditional-statements

The Express API will only provide the initial key-value pair of an object in the response

I'm working on fetching nested data objects. Although I can successfully retrieve the object data in the console, I encounter an issue when attempting to access this data using return res.json(imageObject). Instead of retrieving all key-value pairs of ...

javascriptexpress

"Enhancing User Experience with Hover States in Nested React Menus

I have created a nested menu in the following code. My goal is to dynamically add a selected class name to the Nav.Item element when hovering, and remove it only when another Nav.Item is hovered over. I was able to achieve this using the onMouseOver event. ...

javascriptreactjstypescriptnext.jsevent-bubbling