UI Improvement in Sidebar menu

**Description:**
When viewing the interface on smaller devices (such as phones or small tablets), the sidebar menu remains fully expanded instead of collapsing into a hamburger-style navigation menu. This causes layout issues and makes the UI difficult to navigate on mobile screens.

**Expected Behavior:**
- On small screen widths (e.g., below 768px), the sidebar should automatically collapse into a hamburger icon (☰).
- Tapping the hamburger icon should expand or collapse the sidebar navigation.
- The rest of the page (content area) should remain fully visible and responsive.

**Actual Behavior:**
- The sidebar stays fully visible on small screens.
- It overlaps or takes too much space, reducing readability of the main content area.

**Screenshot:**

**Possible Solution:**
- Implement responsive CSS using media queries (e.g., @media (max-width: 768px)) to hide the sidebar and show a hamburger button.
- Use JavaScript or a CSS framework (like Tailwind, Bootstrap, or custom logic) to toggle the sidebar visibility.