Enhance the Visual Style of the Document Page

[Ali-Sdg90]

We aim to enhance the visual style of the "Document Page," which will serve as a central hub for accessing and viewing all organizational documents. The page will feature a collapsible tree menu on the left for navigating through categories and document names, and a section on the right for displaying document content when a document is selected.

Left Side: Tree Menu

• The left side of the page will have a tree structure that allows for smooth collapsing and expanding of categories and documents.
• Clicking on a parent category will smoothly collapse all its child categories and documents.
• For this pull request, we want you to categorize documents into four categories:
  • Intern
  • Mentoring Intern
  • Mentoring Assistant
  • Mentor
• Note: This categorization is specific to the CS Internship Organization. As this is a styling task, you are allowed to hard-code this part in the code. The functionality for adding each organization's document category will be handled in another task.

Right Side: Document Display

• The right side will display the text of the selected document.
• When a document name is clicked, its content will be shown on the right side.
• Note: The functionality for populating this part with HTML content fetched from GitHub is not yet implemented and is not the focus of this issue. Dummy data can be used for styling purposes.
• You need to add some default styles, such as for ul, table, and headers, similar to the default styles used in Markdown files on GitHub. These HTML contents will be coming from Markdown files in another repository and need to have those default styles applied.

Additional Notes

• No changes to the current functionality are required.
• Ensure consistency with Bootstrap framework guidelines, as the project utilizes Bootstrap as its style framework.
• Ensure the style is responsive to adapt to various screen sizes.

Steps to Participate

1. Comment on this issue with your estimated timeframe for completing the task.
2. The administrators will review your proposed timeline.
3. If approved, the issue will be assigned to you.
4. Upon successful completion within the agreed timeframe, you'll receive the issue reward.

Contribution Guidelines

Please refer to the Contribution Guidelines for detailed instructions on contributing to the project.

Deliverables

• The PR for this issue should be approved by @mehrandvd. He will announce his approval on this issue.

Reward

• The reward will be $0, which will be paid in $USDC.

[mehrandvd]

@Ali-Sdg90 Everything looks good except the folder structure defined for the left-side tree view. It will not be a fixed tree containing Intern, Mentoring Intern, Mentoring Assistant, Mentor. It will reflect the loaded data (which is based on the folder structure of the origin GitHub folder). The rest looks good.

[Ali-Sdg90]

@Ali-Sdg90 Everything looks good except the folder structure defined for the left-side tree view. It will not be a fixed tree containing Intern, Mentoring Intern, Mentoring Assistant, Mentor. It will reflect the loaded data (which is based on the folder structure of the origin GitHub folder). The rest looks good.

Note: This categorization is specific to the CS Internship Organization. As this is a styling task, you are allowed to hard-code this part in the code. The functionality for adding each organization's document category will be handled in another task.

I have mentioned in the issue text that this task is only a styling task. Since the functionality of this part hasn't been implemented yet, the person assigned to this task is requested to hard-code the category titles as 'cs-internship' to complete the task.

[mehrandvd]

We should fix styles for the parts having their functionality implemented.