react css sidebar wont close for small window size

I have a react sidebar with pure css for expand/collapse animations that I really like. Except for that by default, every time I open my page / jsfiddle in this case, the sidebar will always be closed by default.

https://jsfiddle.net/martinradio/x1dz80a6/2/

I've collected all the @media queries in my css file, and have changed it so when the window is big, the sidebar turns yellow. if the window becomes small, the sidebar gets colored red.

My sidebar expand/collapse logic is pure css, I want my sidebar to collapse if the window is too small (sidebar color = red), can I add a .sidebar value to collapse the sidebar?

/* ----------------------
@media queries
 ---------------------- */

/* if screen is big: show sidebar */
@media (min-width: 30em) {
  .sidebar {
    background:yellow;
    color:yellow;
  }
}

/* if screen is too small: hide sidebar */
@media (max-width: 31em) {
  .sidebar {
  background:red;
  color:red;
  }
  /* add something here to toggle sidebar as higgen */
}

is there a way, that by adding css, I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions? But keep the sidebar hidden for smaller browser windows such as mobile

from react css sidebar wont close for small window size