Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: made the sidebar fixed and the content scrollable #1536

Conversation

abdulmalikyusuf
Copy link
Contributor

Description

Closes #1286

This PR implements a layout where the main content or surrounding interface of the website remains static, while the content section within each icon allows users to scroll up and down. The side navigation bar or navbar icon remains highlighted as users scroll within the content sections. Additionally, the mobile view is adjusted to ensure that the highlight is removed when scrolling down and is restored when scrolling up, preventing users from getting lost.

Changes proposed

What were you told to do?

Implement a layout that keeps the main content static while allowing the content within each icon to be scrollable, and maintain the highlighted icon in the sidebar or navbar during scrolling.

What did you do?

  • Implemented a fixed layout for the main content, ensuring that the sidebar or navbar remains static.
  • Enabled smooth scrolling within the content sections under each icon, allowing users to navigate up and down without affecting the main content's position.
  • Added functionality to maintain the highlight on the corresponding icon in the sidebar or navbar during scrolling within the content sections.
  • Tested the implementation across different screen sizes and orientations to ensure the layout adapts correctly and maintains usability.

Check List (Check all the applicable boxes)

🚨Please review the contribution guideline for this repository.

  • My code follows the code style of this project.
  • This PR does not contain plagiarized content.
  • The title and description of the PR are clear and explain the approach.
  • I am making a pull request against the dev branch (left side).
  • My commit message style matches our requested structure.
  • My code additions will fail neither code linting checks nor unit tests.
  • I am only making changes to files I was requested to.

Screenshots/Videos

mobile

Copy link
Contributor

github-actions bot commented Aug 24, 2024

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 14.48% 777 / 5365
🔵 Statements 14.16% 779 / 5501
🔵 Functions 14.02% 213 / 1519
🔵 Branches 9.72% 226 / 2325
File CoverageNo changed files found.
Generated in workflow #529

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FIX]: [FE KIMIKO] Implement a Fixed Side Navigation Bar with Scrollable Content Section on the Mobile
3 participants