10.6: Inbox / Outbox Template

Adding Inbox / Outbox Template

Again, this is going to be very similar to other templates like MemberList and Followers.

Take a look at what's going on and see if you understand everything. If not, review previous modules.

Next, we'll add some styling to messages.component.scss:

.content {
    width: 40%;
}

.info {
    width: 20%;
}

.table, .table-hover {
    cursor: pointer;
}

.rounded-circle {
    max-height: 50px;
}

Open up the browser and verify that it is working correctly.

Inbox/OutboxWorks

If you click on one of the messages, you should be taken to the user's details page. That is working correctly. However, we'd also like for the Messages tab to be open instead of the About tab. We'll fix that next.