Homepage: implement sidebar detail html/css using grid

[Yemaneab100]

A sidebar next to the posts should present the user with additional information.

For logged in students, it will present:

a list of other students in my cohort a list of teachers For logged in teachers, it will present:

a list of cohorts a list of teachers

Requirements

• Create a Grid section for the right side part of the page, sidebar, to show activities for the manger and student.

Code structure

• The code for the component will live in a Sidebar.js file in the folder: /src/components/sidebar

• All relevant styles will be added to the style.css in the same folder

Wireframe

For Students and teachers

Search for people

• Design a "search for people?" section at the top of the sidebar, with the search button icon.

For Students

My cohort

• Ther should be 'My cohort' section that shows the student's current cohort.

• Design a cohort should have the following content:

• There should be a section that displays the list of students in the current cohort.

For each student in the cohort, the following points should be included.

• The student's in the current cohort initial names should be listed as a profile.
• The names of the students in the current cohort.
• an icon with three dots should be included to see more about each student's details.

For Teachears

Cohorts

• There should be a section that shows the list of cohorts to the teacher.
• The hide of the section should be fixed and there should be a scroll bar to see all the cohorts
• each listed cohort should have an icon alongside its name.

Students -there should be a section to list all students in the cohorts. -The teacher should see the list of all students.

For each student in the cohort, the following points should be included.

• the student's in the current cohort initial names should be listed as a profile.
• the names of the students in all cohorts.
• an icon with three dots should be included to see more about each student's details.
• there should be a button named "All Students".

Teachers -there should be a section to list all teachers in the cohorts. -the teacher should see the list of all teachers.

For each teacher in the cohort, the following points should be included.

• the teacher's in the current cohort's initial names should be listed as a profile.
• the names of the teachers.
• an icon with three dots should be included to see more about each teacher's details.
• there should be a button named "All teachers".

[Auenc]

Excellent detail! I think the only thing you're missing is to say where the data for the students/teachers etc is coming from. Will they be props? Will you be fetching data, etc.

[georgeroth]

This issue is only about the HTML + CSS design, we are planning to create different tickets for the functionality that should include the aspects you are mentioning.

[Auenc]

Ah perfect! Yeah that makes sense. It might be good if you can create placeholders for each of those tickets and link them here (just for the paper trail)

[georgeroth]

Here we go!

https://github.com/boolean-uk/team-dev-frontend-client/issues/126 https://github.com/boolean-uk/team-dev-frontend-client/issues/125 https://github.com/boolean-uk/team-dev-frontend-client/issues/124