search

localsend / website

https://localsend.org
Apache License 2.0
73 stars 63 forks source link

Enhance Sidebar Responsiveness and Content Adjustment #65

Open pandeysubash404 opened 5 months ago

pandeysubash404 commented 5 months ago

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.