list
page, a post
page, or a page
, erm..., page 🤷🏻♂️ by changing the colour of the border depending on which type of page we're on.isPostType
prop to the <Header>
component.post
or page
, or maroon in the case of a list
.if...then...else
in JavaScript embedded within a template literal.isPage
prop to our header, and extend our conditional.Home
the header has a maroon border (as it's a listing page), if we click on one of the posts the post page has a green border, and if we navigate to About Us
, (which is a page rather than a post) the header has a blue border.isPostType
and isPage
boolean properties found in the data for the current URL.