Hello my friends, Welcome to part 11
i think before i create the add post page, i will change the navigation bar
 
 
 
 
Here is the Header file
 
 
i will not use the Typography here.
 
import here the Link component from react-router-dom
 
i want to redirect user to Home page when click the Logo
 
 
 
Delete the typography here
 
use the Link component
 
 
 
 
to the '/' router
 
and here i name of my app
 
 
need some styles to update the Logo
 
 
 
 
Because the link component will render the  tag in HTML
 
change the text-decoration to none.Because I don't like the underline decoration
 
and when hover i change to text-decoration none too
 
 
 
 
 
 
and the color. I will use color white
 
 
 
color here is '#fff'
 
 
 
and change the className of Link to change the color
 
 
 
 
 
and here i will change the fontSize to make bigger logo
 
 
 
 
and change to the uppercase text
 
 
 
 
 
ok. It work
 
 
 
also test redirect router
 
 
 
 
 
 
 
 
 
i will add some Link in right section of navbar
 
 
 
search from the Material ui demos
 
 
 
 
 
 
i think i will use this Appbar
 
 
here have IconButton and Menu Component
 
 
and the handle when click the icon button, it will show the Menu
 
 
 
 
 
i will add the IconButton here
 
 
 
 
 
 
 
 
 
 
 
because the navigation will change when user logged in.
 
import here connect from react-redux
i will connect the Navigation with the authReducer to change when user logged in
 
 
write function mapStateToProps here
 
 
 
 
 
and connect with isAuthenticated boolean from auth reducer
 
 
 
 
 
 
 
 
then add connect to component
 
 
 
 
 
 
my app still work
 
 
 
 
 
 
 
 
 
 
 
search a violet color code in CSS
i will change background color of navigation
 
 
 
 
 
 
 
 
 
copy the code color
 
 
 
 
 
 
 
 
 
 
 
and change here.
 
 
ok. background color changed
 
 
 
 
 
because i will use the state and some more features of Component class.
change the function Header to class Header
 
 
 
 
 
 
change to render method
 
 
 
 
 
 
 
test in chrome browser
have a problem
because not defined the classes
 
create a variable here
 
 
i think it work
 
 
 
 
 
 
write here constructor method
 
 
 
 
i see from documentation a anchorEl in state
 
 
 
 
 
 
 
 
default of anchorEl is null
 
 
 
 
 
 
 
 
 
 
 
also add handleMenu method
 
if you use state of component and don't want to declare in constructor with bind.this, which i used
 
write a arrow function
 
 
 
 
 
change the anchorEl to target.currentTarget
 
 
 
 
 
 
 
 
 
 
 
and a method handleClose to close the menu
 
 
 
change the anchorEl to null
 
 
 
 
 
 
 
 
 
 
 
 
add here authLinks variables
when user logged in, authLinks is profile link and the logout link
 
 
 
 
 
 
 
import IconButton here
 
from material-ui core
 
 
 
 
 
and the Menu component
 
 
 
 
also import MenuItem component
 
 
 
 
 
 
 
 
 
 
 
 
i will do same with the documentation here
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import the icon profile
 
AccountCircle from the material ui icons
 
 
 
 
 
 
add IconButton inside div
 
 
 
 
and AccountCircle inside IconButton
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
get the anchorEl state here
 
 
 
 
 
 
and a open variable is true when the anchorEl have something and false when anchorEl is null
 
 
 
 
 
add some parameters to IconButton
 
 
 
 
 
 
 
 
 
 
 
 
 
 
it will open the Menu when open is true
 
 
the menu here is the id of Menu Component
 
 
 
 
 
 
 
 
color inherit
 
 
 
 
 
 
 
 
onClick is the handleMenu method
 
 
 
 
 
and add Menu component below IconButton
 
 
 
 
 
add MenuItem inside the Menu
 
 
 
 
 
 
change some parameter of Menu
 
 
 
open is open boolean
anchorEl from state
 
 
 
 
 
 
 
 
 
i said about the id of Menu component. I will use 'menu' same as the declared id in aria-owns of IconButton
 
 
 
 
 
 
 
 
 
 
onClick here is handleClose
 
 
 
 
 
add a Profile text. I will use link to Profile in future
 
copy and paste here
 
 
change to Logout text
 
 
 
add authLinks to the AppBar now
 
 
 
 
 
 
then open my browser
 
why have problem here
 
 
 
i think i forgot a bracket
 
 
 
 
 
 
 
 
 
don't see where i forgot bracket
 
still error
 
 
 
 
 
 
 
delete inside mapStateToProps function
 
 
 
still error, why?
 
 
 
 
 
 
 
 
forgot /div. so sorry about that
 
 
now it work
 
 
 
add isAuthenticated here
 
 
 
 
isAuthenticted from boolean auth reducer
 
 
 
add authLinks inside AppBar
 
 
i see the IconButton
 
 
but the button not show menu when i clicked
 
 
i need times to fix it
read and compare with documentation
 
 
 
 
 
 
 
 
 
 
 
 
not show menu
Thank for watching. I will fix in next part and see you again.
 
 
 
