react css sidebar wont close for small window size

Question

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

Answer 1

You want the :checked value of your input to determine the current expanded state of you sidebar.
At the same time, you want the size of the viewport to determine the same state.

This means you have to find a way to allow the size of the viewport to set the :checked value of the checkbox.

The bad news is you can't change or set the value of a checkbox using CSS alone.

The good news is it can be done using JavaScript. And you can link it to a media query.

Here's how to do it in React:

  // define media query:
  const mediaQuery = window.matchMedia("(min-width: 42rem)");

  // track query state (if it applies or not)
  const [query, setQuery] = React.useState(mediaQuery);

  // keep query state updated (+ cleanup)
  React.useEffect(() => {
    mediaQuery.addListener(setQuery);
    return () => mediaQuery.removeListener(setQuery);
  }, [mediaQuery]);

  // track sidebar expanded state
  const [expanded, setExpanded] = React.useState(query.matches);

  // update checkbox value when the query state changes
  React.useEffect(() => {
    setExpanded(query.matches);
  }, [query]);

  // everything else stays the same 
  // (except binding the expanded state to the checkbox)

See it working: https://jsfiddle.net/websiter/td9rgcpq/

Answer 2

You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the behavior of the sidebar based on the screen size.

@media (max-width: 600px) { 

*This is for phones, for example (you might need to find more accurate pixel counts)*

}

@media (min-width: 601px) { 

*This is for laptops, for example (you might need to find more accurate pixel counts)*

}

Answer 3

When I worked on my answer, I realized that the requirements were not clear to me.

What do you want to have on a big screen? I can think of two different options.

1. The sidebar is not shown when you open the page. Instead, it appears with animation when you press the toggle button.
2. The sidebar is visible when you open the page and disappears when you press a toggle button. Should it appear with animation on page load?

And in both cases, you do not want the sidebar on the small screen.

I still do not understand the following requirement.

I can have my sidebar start expanded if the user is viewing the page on say a desktop monitor dimensions?

When a user opens the page on the big screen, what should it look like? What is the initial state of the sidebar on the big screen? Do you want the sidebar to open with animation on page load?

Anyway, please find my suggestion below.

Main idea

The sidebar becomes visible when they check the #sidebar-checkbox checkbox. I suggest limiting this behaviour to only large enough screens. In other words, we bind the checkbox state with the sidebar visibility only for big screens.

On small screens sidebar is always hidden because we place the rules under the media query for the big screens.

1. Initially hidden but appears when toggled

The code speaks for itself.

@media (min-width: 30em) {
  #sidebar-checkbox:checked + .sidebar {
    z-index: 10;
    visibility: visible;
  }

  #sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .wrap, #sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(0rem);
      -ms-transform: translateX(0rem);
          transform: translateX(0rem);
  }

  #sidebar-checkbox:checked ~ .wrap {
  -webkit-transform: translateX(14rem);
      -ms-transform: translateX(14rem);
          transform: translateX(14rem);
  }
}

I think we also should show the label for the checkbox only on big screens. But I do not want to mess with your styles too much and try to make the minimal working change.

2. Initially shown on the big screen

We must replace the :checked selector with the :not(:checked) selector. In this case, the sidebar is visible by default on the big screen.

We can also show animation for the sidebar sliding from left to right on the page load. You might find some explanation in the answer to the question 'css3 transition animation on load?'.

Please check the updated JSFiddle with the suggestions for the second case.

Please let me know if I have got your requirements right.