[Bug] UI/Frontend Responsiveness Issue on Small Viewports

[ZarrarPeshimam]

Describion
The website's layout is not adequately responsive on small mobile viewports. The navigation sidebar (containing menu items like "Ethical Hacking," "Python for Ethical Hacking," etc.) occupies a disproportionate amount of the screen width, causing the main content area ("Tutorial," "Available Courses") to be severely compressed and almost unreadable.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://hacking-tutorial.vercel.app
2. Open Developer Tools (F12 or Ctrl+Shift+I / Cmd+Option+I).
3. Switch to Device Emulation Mode (Toggle device toolbar).
4. Select a small mobile device preset, such as 'iPhone SE' or set a custom width under 400px.
5. See error: The main content is squeezed into a very narrow column next to the sidebar.

Expected behavior
On small mobile viewports, the layout should prioritize the main content. The expected behavior is for the navigation sidebar to either:

1. Collapse into a hamburger menu that opens on demand.
2. Move above or below the main content area, allowing the main content to use the full screen width.

Screenshots

Additional context
The issue stems from a lack of, or incorrect, media queries that define a mobile-specific layout. The current layout appears to be a fixed-width desktop/tablet layout scaled down, resulting in poor user experience on smaller screens.

---

@amandewatnitrr, please consider assigning this issue to me as part of hacktober.

[amandewatnitrr]

@ZarrarPeshimam assigned to you. For any query keep in communication with @HarzhMehta

[HarzhMehta]

Hey @ZarrarPeshimam , could you just wait till tomorrow afternoon ? I'm working on a new sidebar and home page where the content is directly mapped from md files into the website. So the sidebar and its content wl change (currently it's written manually).... maybe you could make a nice UI and I can integrate the same into my code once you're done. Let me know if anything is req
Thanks!

[Dhruvmax]

@amandewatnitrr can you assign this task to me?

[ZarrarPeshimam]

@HarzhMehta,
Thanks for the clarification! I'll hold off on the responsiveness fix for now and look forward to your structural update tomorrow.

I can focus on creating a cleaner, modern, and more user-friendly frontend look-and-feel for the time being that you can then integrate into your new component structure (new sidebar, content mapping, etc.).

I would like to clarify first what exactly you want me to do, as per the instructions I would be going as follows,
CSS/Styling: I can work on the actual CSS/Tailwind/styled-components for the new components (Sidebar, Home Page, Lesson Page), implementing a new visual theme.

Let me know which way you'd like to proceed!

[HarzhMehta]

Hey @ZarrarPeshimam please coordinate with @Dhruvmax regarding this, i'll push prev UI with fixed folder str in sometime after which you can work on its UI. Please keep an eye on #72 #52 #60 #63 .
@amandewatnitrr I'll push the readme logic with the old folder str in 2-3 hrs, after that the above 4-5 issues could work on fixing the UI.