Create component - Navigation Rail

[lucianosimoni]

Component Name: NavigationRail

Create it in a folder with same name under components

Where it will be used

In all of the pages of the project, as a reusable component. In the App.js, so it will always show in all pages.

---

Requirements:

Must receive as a prop loggedInUser from the component calling it

<NavigationRail user={ loggedInUser } />

How is received by the component:

function NavigationRail ({ user }) {....

Have 3 fixed Buttons (Home, Profile, Cohort)

• Home (Which is the Posts page)
• • navigate to /posts
• Profile
• • navigate to /profile/${user.id}
• • the user needs to be Conditional of Cohort Button
• Cohort
• • IF TEACHER:
• • • navigate to /cohorts
• • IF STUDENT
• • • navigate to /cohorts/${user.cohortId}

Use the Google Icons as icons.

Have 2 conditional Buttons that are rendered only if User is a teacher Check for the prop user and render only if role is TEACHER - Notes - - Link to /notes/${user.id} - Logs - - Link to /logs/${user.id}

No need for the Notes and Logs for the moment.

> Create notes and logs placeholder pages

Create Routes for the Links

Notes and Logs also does not have a Route setup in the App.js URLs:

• /logs/:teacherId
• /notes/:teacherId

---

Possible jsx structure:

<li className="nav-item-panel">
    <div className="icon-circle">
        <span className="material-symbols-outlined">home</span>
    </div>

    <span className="nav-item-name">Home</span>
</li>

.nav-item-panel could work with display:flex flex-direction:column, to avoid use of grid

---

[chris2733]

Looks great! Well broken down