fix: sidebar not appearing for certain width #281 (#282)

## Description

This PR fixes the issue related to the sidebar.

## Screenshots


https://user-images.githubusercontent.com/88369802/234557778-1c1726da-885a-43cb-a27a-066136cb2657.mov

## Checklist

Please review and check off the following items before submitting your
PR:

 <!-- If yes then add 'x' into '[ ]'  -->

- [x] I have tested my changes to ensure they work as expected
- [ ] I have included documentation for any new features or changes
- [x] I have formatted my code according to the project's style
guidelines
- [ ] I have written tests for any new features or changes
- [x] I have run the project's test suite and verified that all tests
pass
- [ ] I have updated the README and any other relevant documentation
- [x] I have checked for any spelling or grammatical errors

src/components/Navbar.jsx

@@ -113,14 +113,14 @@ const Navbar = () => {
           </ul>
         </div>
         <Drawer
+          className="block md:hidden"
           variant="temporary"
           open={mobileOpen}
           onClose={handleDrawerToggle}
           ModalProps={{
             keepMounted: true, // Better open performance on mobile.
           }}
           sx={{
-            display: { xs: "block", sm: "none" },
             "& .MuiDrawer-paper": { boxSizing: "border-box", width: "56%" },
           }}
         >