Enhance Sidebar Responsiveness and Content Adjustment

[pandeysubash404]

This pull request introduces enhancements to the sidebar functionality and responsiveness for the Terms page. The following changes have been implemented:

1. Addition of Sidebar Component (/components/Toc.vue):

   • Created a new Toc.vue component that generates a table of contents based on h1 headers in the document.
   • The sidebar includes open and close functionality with appropriate buttons to toggle its visibility.
   • The sidebar's visibility state is managed with a ref in Vue's composition API.
   • Active link highlighting based on scroll position.

2. Modifications to Terms Page (/pages/terms.vue):

   • Integrated the new Toc.vue component into the Terms and Conditions page.
   • Adjusted the layout to include the sidebar alongside the terms content.
   • Added dynamic class binding to adjust the margin of the terms content based on the sidebar's visibility state.
   • Ensured the terms content adjusts its margin-left to 0 when the sidebar is closed and 20vw when open.
   • Improved responsiveness for different screen sizes, ensuring the sidebar behaves correctly on mobile devices.

3. CSS Adjustments:

   • Updated styles to include transitions for smooth margin adjustments when toggling the sidebar.
   • Included media queries to handle sidebar and content layout on smaller screens.

Conclusion:
This update ensures a more responsive and user-friendly experience for users navigating the Terms and Conditions page, with a dynamically adjusting sidebar and content layout. The changes enhance the usability on both large screens and mobile devices.