Collapsing and Expanding Side Panels in React

Question

I apologize is this is a very simple task this is really my first time transitioning to react.

I have an existing application built with js/css/html that I am attempting to shift over to react. It has a full length horizontal side panel that is open by default, when the window is shrunk beyond a point it collapses with a hamburger icon, and expands again when the window is resized larger. Fairly easily done with media queries in css.

A perfect example is https://purecss.io/layouts/side-menu/ (note the side menu) This is exactly what the current app does.

I'm struggling to do this in react. I can build a side panel that is collapsible (https://reactjsexample.com/react-side-nav-component/) and mofify it for my needs, but I cannot figure out how to set it up so it collapses and expands by itself. I understand I can set it up react to use media queries, however I figured there was likely a more efficient way.

Any advice of good libraries to use, or examples would be greatly appreciated.

Thanks for the advise Jure, I did just end up using media queries. — Shawn
– Shawn, Commented Jan 16, 2020 at 17:47
For anyone who encounters a similar issue, I used media queries and also property (isActive). When the media query fires or when a hamburger button is clicked it changes the isActive property to false which though css makes the side panel visible or not. The hamburger button sets it via on v-on:click method — Shawn
– Shawn, Commented Feb 6, 2020 at 15:30

alistair · Accepted Answer · 2020-01-14 22:50:38Z

You could do something like this:

const Component = props => { const [windowWidth, setWindowWidth] = useState(0) useEffect(() => { window.addEventListener('resize', updateWindowDimensions) updateWindowDimensions() return () => window.removeEventListener('resize', updateWindowDimensions) }, []) useEffect(() => { if (windowWidth < 500) { closeModal() return } openModal() }, [windowWidth]) updateWindowDimensions() { setWindowWidth(window.innerWidth) } }

Collectives™ on Stack Overflow

Collapsing and Expanding Side Panels in React

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related