making sidebar and navbar responsive in mobile screens in react

so basically sidebar and navbar is both different components in my code i have navbar.jsx and sidebar.jsx and both are being called under student.jsx … now on mobile screens i want that the sidebar also gets into that hamburger icon in the navbar when on mobile screens and that user can navigate different pages such as dashboard counselling etc when clicked on the icon which contains the sidebar and its different pages

i tried to hide the sidebar in mobile screen my putting the css display none in mobile screens and tried using usestate hook and toggle logic but i cant put the sidebar in the navbar and i want them to be different just in mobile screens they should be together this is what its looking like right now