Javascript resize div width with calc

Question

I'm running into an error with a javascript code I'm working on. I'm trying to make a collapsible sidebar. Whenever the user is hovering over the bar, the sidebar should be 280px wide and the main content should be calc(100vw-280px). Alternatively, whenever the user is NOT hovering over the bar, the sidebar should be 80px wide and the main content should be calc(100vw-80px).

This seems simple enough, but the #content div is not resizing whenever the function runs. The only thing I can figure is that javascript does not play friendly with calc but there could be something else I'm overlooking too in the CSS or with default values. I'm including all of the code just to be safe. Any help is appreciated!!

var mini = true;

function toggleSidebar() {
  if (mini) {
    document.getElementById("rightbar").style.width = "280px";
    document.getElementById("content").style.width = "calc(100vw-280px)";
    this.mini = false;
  } else {
    document.getElementById("rightbar").style.width = "80px";
    document.getElementById("content").style.width = "calc(100vw-80px)";
    this.mini = true;
  }
}

body {margin: 0; background-color: #F2F2F2;}

.topbar {
  z-index: 10;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 56px;
  font-size: x-large;
  background-color: #5B7042;
  border-bottom: 4px solid #3F5328}

#rightbar {
  z-index: 1;
  position: fixed;
  top: 60px; right: 0%;
  width: 80px; height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: 0.5s;
  color: #412A1B;
  border-left: 2px solid darkgray}

#content {
  display: grid;
  position: fixed;
  top: 60px; left: 0;
  width: calc(100vw - 80px);
  height: calc(100vh - 60px);
  padding: 32px;
  box-sizing: border-box;
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr 300px; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 20px 40px; 
  grid-template-areas: 
    "hello hello"
    "announce tasks"
    "announce tasks"
    "announce streak";}

  .hello {
    grid-area: hello;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 3em;
    color: #3F5328}

.announce {
  overflow: scroll;
  grid-area: announce}

.tasks {
  padding: 20px;
  grid-area: tasks;
  text-align: center;}

.something {grid-area: something}

.streak {
  grid-area: streak;
  font-size: 52px;
  font-weight: 800}

.module {
  background-color: white;
  border-radius: 6px;
  box-shadow: 3px 4px #CECECE}

table {width: 100%}

td {
  padding: 10px 20px;
  border-bottom: 1px solid lightgray;}

td .msg {
  font-size: 20px;
  line-height: 1.5}

.posted {
  display: grid;
  grid-template-columns: 42px 2fr 1fr;  
  grid-template-areas: 
    "pic author timestamp"}

.posted .img {grid-area: pic}

.posted .author {
  grid-area: author;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 16px;}

.posted .timestamp {
  grid-area: timestamp;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: gray;
  font-size: 16px}

.pic{
  width: 25px;
  clip-path: circle();}

<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>

<div class='topbar'></div>

<div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div>

<div id='content'>
  <div class='hello'>Hi, John.</div>
  <div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div>
  <div class='module streak center'>🔥 32</div>
  <div class='module announce'>
    <table>
      <tr>
        <td>
          <span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span>
          <div class='posted'>
            <span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span>
            <span class='author'>Mr. Dansby</span>
            <span class='timestamp'>33m ago</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <span class='msg'>Have a great fall break!</span>
          <div class='posted'>
            <img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
            <span class='author'>Mr. Dansby</span>
            <span class='timestamp'>1d ago</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span>
          <div class='posted'>
            <img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
            <span class='author'>Mr. Dansby</span>
            <span class='timestamp'>3d ago</span>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

calc is a bit persnickety about whitespace.. Specifically, the operator in the calc equation must have a space on either side. I updated your calc JS setting lines from something like this...

document.getElementById("content").style.width = "calc(100vw-280px)";

...to include the whitespace:

document.getElementById("content").style.width = "calc(100vw - 280px)";

...and it seems closer to what I think you're looking for; see the snippet below:

var mini = true;

function toggleSidebar() {
  if (mini) {
    document.getElementById("rightbar").style.width = "280px";
    document.getElementById("content").style.width = "calc(100vw - 280px)";
    this.mini = false;
  } else {
    document.getElementById("rightbar").style.width = "80px";
    document.getElementById("content").style.width = "calc(100vw - 80px)";
    this.mini = true;
  }
}

body {margin: 0; background-color: #F2F2F2;}

.topbar {
  z-index: 10;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 56px;
  font-size: x-large;
  background-color: #5B7042;
  border-bottom: 4px solid #3F5328}

#rightbar {
  z-index: 1;
  position: fixed;
  top: 60px; right: 0%;
  width: 80px; height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: 0.5s;
  color: #412A1B;
  border-left: 2px solid darkgray}

#content {
  display: grid;
  position: fixed;
  top: 60px; left: 0;
  width: calc(100vw - 80px);
  height: calc(100vh - 60px);
  padding: 32px;
  box-sizing: border-box;
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr 300px; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 20px 40px; 
  grid-template-areas: 
    "hello hello"
    "announce tasks"
    "announce tasks"
    "announce streak";}

  .hello {
    grid-area: hello;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 3em;
    color: #3F5328}

.announce {
  overflow: scroll;
  grid-area: announce}

.tasks {
  padding: 20px;
  grid-area: tasks;
  text-align: center;}

.something {grid-area: something}

.streak {
  grid-area: streak;
  font-size: 52px;
  font-weight: 800}

.module {
  background-color: white;
  border-radius: 6px;
  box-shadow: 3px 4px #CECECE}

table {width: 100%}

td {
  padding: 10px 20px;
  border-bottom: 1px solid lightgray;}

td .msg {
  font-size: 20px;
  line-height: 1.5}

.posted {
  display: grid;
  grid-template-columns: 42px 2fr 1fr;  
  grid-template-areas: 
    "pic author timestamp"}

.posted .img {grid-area: pic}

.posted .author {
  grid-area: author;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 16px;}

.posted .timestamp {
  grid-area: timestamp;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: gray;
  font-size: 16px}

.pic{
  width: 25px;
  clip-path: circle();}

<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>

<div class='topbar'></div>

<div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div>

<div id='content'>
  <div class='hello'>Hi, John.</div>
  <div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div>
  <div class='module streak center'>🔥 32</div>
  <div class='module announce'>
    <table>
      <tr>
        <td>
          <span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span>
          <div class='posted'>
            <span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span>
            <span class='author'>Mr. Dansby</span>
            <span class='timestamp'>33m ago</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <span class='msg'>Have a great fall break!</span>
          <div class='posted'>
            <img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
            <span class='author'>Mr. Dansby</span>
            <span class='timestamp'>1d ago</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span>
          <div class='posted'>
            <img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
            <span class='author'>Mr. Dansby</span>
            <span class='timestamp'>3d ago</span>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>