import React from "react" ; import AppBar from "@material-ui/core/AppBar" ; import Toolbar from "@material-ui/core/Toolbar" ; import IconButton from "@material-ui/core/IconButton" ; import Typography from "@material-ui/core/Typography" ; import InputBase from "@material-ui/core/InputBase" ; import Badge from "@material-ui/core/Badge" ; import MenuItem from "@material-ui/core/MenuItem" ; import Menu from "@material-ui/core/Menu" ; import { fade } from "@material-ui/core/styles/colorManipulator" ; import { withStyles } from "@material-ui/core/styles" ; import MenuIcon from "@material-ui/icons/Menu" ; import SearchIcon from "@material-ui/icons/Search" ; import AccountCircle from "@material-ui/icons/AccountCircle" ; import MailIcon from "@material-ui/icons/Mail" ; import NotificationsIcon from "@material-ui/icons/Notifications" ; import MoreIcon from "@material-ui/icons/MoreVert" ; import { FaGithub , FaNpm } from "react-icons/fa" ; const styles = theme => ( { root : { width : "100%" } , grow : { flexGrow : 1 } , menuButton : { marginLeft : - 12 , marginRight : 20 } , title : { display : "flex" , [ theme . breakpoints . up ( "sm" ) ] : { display : "block" } } , search : { position : "relative" , borderRadius : theme . shape . borderRadius , backgroundColor : fade ( theme . palette . common . white , 0.15 ) , "&:hover" : { backgroundColor : fade ( theme . palette . common . white , 0.25 ) } , marginRight : theme . spacing . unit * 2 , marginLeft : 0 , width : "100%" , [ theme . breakpoints . up ( "sm" ) ] : { marginLeft : theme . spacing . unit * 3 , width : "auto" } } , searchIcon : { width : theme . spacing . unit * 9 , height : "100%" , position : "absolute" , pointerEvents : "none" , display : "flex" , alignItems : "center" , justifyContent : "center" } , inputRoot : { color : "inherit" , width : "100%" } , inputInput : { paddingTop : theme . spacing . unit , paddingRight : theme . spacing . unit , paddingBottom : theme . spacing . unit , paddingLeft : theme . spacing . unit * 10 , transition : theme . transitions . create ( "width" ) , width : "100%" , [ theme . breakpoints . up ( "md" ) ] : { width : 200 } } } ) ; class PrimarySearchAppBar extends React . Component { state = { anchorEl : null , mobileMoreAnchorEl : null } ; handleProfileMenuOpen = event => { this . setState ( { anchorEl : event . currentTarget } ) ; } ; handleMenuClose = ( ) => { this . setState ( { anchorEl : null } ) ; this . handleMobileMenuClose ( ) ; } ; handleMobileMenuOpen = event => { this . setState ( { mobileMoreAnchorEl : event . currentTarget } ) ; } ; handleMobileMenuClose = ( ) => { this . setState ( { mobileMoreAnchorEl : null } ) ; } ; render ( ) { const { anchorEl , mobileMoreAnchorEl } = this . state ; const { classes } = this . props ; const isMenuOpen = Boolean ( anchorEl ) ; const isMobileMenuOpen = Boolean ( mobileMoreAnchorEl ) ; const renderMenu = ( < Menu anchorEl = { anchorEl } anchorOrigin = { { vertical : "top" , horizontal : "right" } } transformOrigin = { { vertical : "top" , horizontal : "right" } } open = { isMenuOpen } onClose = { this . handleMenuClose } > < MenuItem onClick = { this . handleMenuClose } > Profile < /MenuItem> < MenuItem onClick = { this . handleMenuClose } > My account < /MenuItem> < /Menu>); const renderMobileMenu = ( < Menu anchorEl = { mobileMoreAnchorEl } anchorOrigin = { { vertical : "top" , horizontal : "right" } } transformOrigin = { { vertical : "top" , horizontal : "right" } } open = { isMobileMenuOpen } onClose = { this . handleMenuClose } > < MenuItem onClick = { this . handleMobileMenuClose } > < IconButton color = "inherit" > < Badge badgeContent = { 4 } color = "secondary" > < MailIcon /> < /Badge> < /IconButton> < p > Messages < /p> < /MenuItem> < MenuItem onClick = { this . handleMobileMenuClose } > < IconButton color = "inherit" > < Badge badgeContent = { 11 } color = "secondary" > < NotificationsIcon /> < /Badge> < /IconButton> < p > Notifications < /p> < /MenuItem> < MenuItem onClick = { this . handleProfileMenuOpen } > < IconButton color = "inherit" > < AccountCircle /> < /IconButton> < p > Profile < /p> < /MenuItem> < /Menu>); return ( < div className = { classes . root } > < AppBar position = "static" > < Toolbar > < Typography className = { classes . title } variant = "h6" color = "inherit" noWrap > < a target = "_blank" href = "https://w3js.com/" > React - multi - carousel - a carousel that rocks < /a> < /Typography> < div className = { classes . grow } / > < div className = { classes . sectionDesktop } > < IconButton color = "inherit" > < a href = "https://w3js.com/react-multi-carousel" target = "_blank" > < Typography className = { classes . title } variant = "h6" color = "inherit" noWrap > Doc { " " } < /Typography> < /a> < /IconButton> < IconButton color = "inherit" > < a href = "https://www.npmjs.com/package/react-multi-carousel" target = "_blank" > < FaNpm /> < /a> < /IconButton> < IconButton color = "inherit" > < a target = "_blank" href = "https://github.com/YIZHUANG/react-multi-carousel" > < FaGithub /> < /a> < /IconButton> < IconButton color = "inherit" > < a target = "_blank" href = "https://w3js.com/" > < img style = { { height : 30 } } alt = "w3js- web front-end studio" src = "https://w3js.com/wp-content/uploads/2019/03/cropped-w3js-logo-1-1.png" / > < /a> < /IconButton> < /div> < /Toolbar> < /AppBar> { renderMenu } { renderMobileMenu } < /div>); } } export default withStyles ( styles ) ( PrimarySearchAppBar ) ;