Hiding Side Nav in Hamburger Menu - css

Question

I have a sidebar, that I would like to collpase on mobile devices, and only be accessed on mobile using a hamburger menu
Using React, what is the best way for me to do so? Would this still be media queriers, or is there an alternate way that would make this type of configuration more seamless?
Please note that I only want the sidebar to collapse on mobile. I do not want to give the user the ability to collpase the sidebar when viewed on desktop.
Sidebar.Js
const sidebarNavItems = [
{
display: 'Home',
to: '/'
},
{
display: 'Blog',
to: 'Blog/'
},
{
display: 'Contact Us',
to: '/contact-us/'
},
{
display: 'Sign Up',
to: '/sign-up/'
},
{
display: 'Login',
to: '/sign-in/'
},
]
const Sidebar = () => {
const [activeIndex, setActiveIndex] = useState(0);
const [stepHeight, setStepHeight] = useState(0);
const sidebarRef = useRef();
const indicatorRef = useRef();
const location = useLocation();
useEffect(() => {
setTimeout(() => {
const sidebarItem = sidebarRef.current.querySelector('.sidebar__menu__item');
indicatorRef.current.style.height = `${sidebarItem.clientHeight}px`;
setStepHeight(sidebarItem.clientHeight);
}, 50);
}, []);
// change active index
useEffect(() => {
const curPath = window.location.pathname.split('/')[1];
const activeItem = sidebarNavItems.findIndex(item => item.section === curPath);
setActiveIndex(curPath.length === 0 ? 0 : activeItem);
}, [location]);
return (
<div className='sidebar'>
<div className="sidebar__logo">
<div><img src = {Logo} alt='Logo'className='Logo' /></div>
</div>
<div ref={sidebarRef} className="sidebar__menu">
<div
ref={indicatorRef}
className="sidebar__menu__indicator"
style={{
transform: `translateX(-50%) translateY(${activeIndex * stepHeight}px)`
}}
></div>
{
sidebarNavItems.map((item, index) => (
<Link to={item.to} key={index}>
<div className={`sidebar__menu__item ${activeIndex === index ? 'active' : ''}`}>
<div className="sidebar__menu__item__icon">
{item.icon}
</div>
<div className="sidebar__menu__item__text">
{item.display}
</div>
</div>
</Link>
))
}
</div>
</div>);
};
Here is the Sidebar.CSS
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 20vw;
background-color: #fff;
}
.sidebar__logo {
display: grid;
place-items: center;
margin-bottom: 5vh;
}
.sidebar__menu {
position: relative;
}
.sidebar__menu__item {
display: flex;
align-items: center;
place-content: flex-start;
padding: 1rem 3rem;
font-size: 1.25rem;
font-weight: 500;
color: #555;
transition: color 0.3s ease-in-out;
}
.sidebar__menu__item.active {
color: #fff;
}
.sidebar__menu__item__icon {
margin-right: 1rem;
}
.sidebar__menu__item__icon i {
font-size: 1.75rem;
}
.sidebar__menu__indicator {
position: absolute;
top: 0;
left: 50%;
width: calc(100% - 40px);
border-radius: 5px;
background-color: #FD954E;
z-index: -1;
transform: translateX(-50%);
transition: 0.3s ease-in-out;
}