removed unused component
parent
58911360e1
commit
c52fc3d6da
|
|
@ -1,456 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
AppBar,
|
|
||||||
Toolbar,
|
|
||||||
IconButton,
|
|
||||||
InputBase,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
Fab,
|
|
||||||
withStyles
|
|
||||||
} from "@material-ui/core";
|
|
||||||
import {
|
|
||||||
Menu as MenuIcon,
|
|
||||||
MailOutline as MailIcon,
|
|
||||||
NotificationsNone as NotificationsIcon,
|
|
||||||
Person as AccountIcon,
|
|
||||||
Search as SearchIcon,
|
|
||||||
Send as SendIcon,
|
|
||||||
ArrowBack as ArrowBackIcon
|
|
||||||
} from "@material-ui/icons";
|
|
||||||
import { fade } from "@material-ui/core/styles/colorManipulator";
|
|
||||||
import classNames from "classnames";
|
|
||||||
|
|
||||||
import { Badge, Typography } from "../Wrappers";
|
|
||||||
import Notification from "../Notification";
|
|
||||||
import UserAvatar from "../UserAvatar";
|
|
||||||
|
|
||||||
const messages = [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
variant: "warning",
|
|
||||||
name: "Jane Hew",
|
|
||||||
message: "Hey! How is it going?",
|
|
||||||
time: "9:32"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
variant: "success",
|
|
||||||
name: "Lloyd Brown",
|
|
||||||
message: "Check out my new Dashboard",
|
|
||||||
time: "9:18"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
variant: "primary",
|
|
||||||
name: "Mark Winstein",
|
|
||||||
message: "I want rearrange the appointment",
|
|
||||||
time: "9:15"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
variant: "secondary",
|
|
||||||
name: "Liana Dutti",
|
|
||||||
message: "Good news from sale department",
|
|
||||||
time: "9:09"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const notifications = [
|
|
||||||
{ id: 0, color: "warning", message: "Check out this awesome ticket" },
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
color: "success",
|
|
||||||
type: "info",
|
|
||||||
message: "What is the best way to get ..."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
color: "secondary",
|
|
||||||
type: "notification",
|
|
||||||
message: "This is just a simple notification"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
color: "primary",
|
|
||||||
type: "e-commerce",
|
|
||||||
message: "12 new orders has arrived today"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
|
|
||||||
<AppBar position="fixed" className={classes.appBar}>
|
|
||||||
<Toolbar className={classes.toolbar}>
|
|
||||||
<IconButton
|
|
||||||
color="inherit"
|
|
||||||
onClick={toggleSidebar}
|
|
||||||
className={classNames(
|
|
||||||
classes.headerMenuButton,
|
|
||||||
classes.headerMenuButtonCollapse
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isSidebarOpened ? (
|
|
||||||
<ArrowBackIcon
|
|
||||||
classes={{
|
|
||||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<MenuIcon
|
|
||||||
classes={{
|
|
||||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</IconButton>
|
|
||||||
<Typography variant="h6" weight="medium" className={classes.logotype}>React Material Admin</Typography>
|
|
||||||
<div className={classes.grow} />
|
|
||||||
<div
|
|
||||||
className={classNames(classes.search, {
|
|
||||||
[classes.searchFocused]: props.isSearchOpen
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={classNames(classes.searchIcon, {
|
|
||||||
[classes.searchIconOpened]: props.isSearchOpen
|
|
||||||
})}
|
|
||||||
onClick={props.toggleSearch}
|
|
||||||
>
|
|
||||||
<SearchIcon classes={{ root: classes.headerIcon }} />
|
|
||||||
</div>
|
|
||||||
<InputBase
|
|
||||||
placeholder="Search…"
|
|
||||||
classes={{
|
|
||||||
root: classes.inputRoot,
|
|
||||||
input: classes.inputInput
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<IconButton
|
|
||||||
color="inherit"
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-controls="mail-menu"
|
|
||||||
onClick={props.openNotificationsMenu}
|
|
||||||
className={classes.headerMenuButton}
|
|
||||||
>
|
|
||||||
<Badge
|
|
||||||
badgeContent={
|
|
||||||
props.isNotificationsUnread ? notifications.length : null
|
|
||||||
}
|
|
||||||
colortheme="warning"
|
|
||||||
>
|
|
||||||
<NotificationsIcon classes={{ root: classes.headerIcon }} />
|
|
||||||
</Badge>
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
color="inherit"
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-controls="mail-menu"
|
|
||||||
onClick={props.openMailMenu}
|
|
||||||
className={classes.headerMenuButton}
|
|
||||||
>
|
|
||||||
<Badge
|
|
||||||
badgeContent={props.isMailsUnread ? messages.length : null}
|
|
||||||
color="secondary"
|
|
||||||
>
|
|
||||||
<MailIcon classes={{ root: classes.headerIcon }} />
|
|
||||||
</Badge>
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
aria-haspopup="true"
|
|
||||||
color="inherit"
|
|
||||||
className={classes.headerMenuButton}
|
|
||||||
aria-controls="profile-menu"
|
|
||||||
onClick={props.openProfileMenu}
|
|
||||||
>
|
|
||||||
<AccountIcon classes={{ root: classes.headerIcon }} />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="mail-menu"
|
|
||||||
open={Boolean(props.mailMenu)}
|
|
||||||
anchorEl={props.mailMenu}
|
|
||||||
onClose={props.closeMailMenu}
|
|
||||||
MenuListProps={{ className: classes.headerMenuList }}
|
|
||||||
className={classes.headerMenu}
|
|
||||||
classes={{ paper: classes.profileMenu }}
|
|
||||||
disableAutoFocusItem
|
|
||||||
>
|
|
||||||
<div className={classes.profileMenuUser}>
|
|
||||||
<Typography variant="h4" weight="medium">
|
|
||||||
New Messages
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
className={classes.profileMenuLink}
|
|
||||||
component="a"
|
|
||||||
color="secondary"
|
|
||||||
>
|
|
||||||
{messages.length} New Messages
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
{messages.map(message => (
|
|
||||||
<MenuItem key={message.id} className={classes.messageNotification}>
|
|
||||||
<div className={classes.messageNotificationSide}>
|
|
||||||
<UserAvatar color={message.variant} name={message.name} />
|
|
||||||
<Typography size="sm" color="textSecondary">
|
|
||||||
{message.time}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
classes.messageNotificationSide,
|
|
||||||
classes.messageNotificationBodySide
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Typography weight="medium" gutterBottom>
|
|
||||||
{message.name}
|
|
||||||
</Typography>
|
|
||||||
<Typography color="textSecondary">{message.message}</Typography>
|
|
||||||
</div>
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
<Fab
|
|
||||||
variant="extended"
|
|
||||||
color="primary"
|
|
||||||
aria-label="Add"
|
|
||||||
className={classes.sendMessageButton}
|
|
||||||
>
|
|
||||||
Send New Message
|
|
||||||
<SendIcon className={classes.sendButtonIcon} />
|
|
||||||
</Fab>
|
|
||||||
</Menu>
|
|
||||||
<Menu
|
|
||||||
id="notifications-menu"
|
|
||||||
open={Boolean(props.notificationsMenu)}
|
|
||||||
anchorEl={props.notificationsMenu}
|
|
||||||
onClose={props.closeNotificationsMenu}
|
|
||||||
className={classes.headerMenu}
|
|
||||||
disableAutoFocusItem
|
|
||||||
>
|
|
||||||
{notifications.map(notification => (
|
|
||||||
<MenuItem
|
|
||||||
key={notification.id}
|
|
||||||
onClick={props.closeNotificationsMenu}
|
|
||||||
className={classes.headerMenuItem}
|
|
||||||
>
|
|
||||||
<Notification {...notification} typographyVariant="inherit" />
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
<Menu
|
|
||||||
id="profile-menu"
|
|
||||||
open={Boolean(props.profileMenu)}
|
|
||||||
anchorEl={props.profileMenu}
|
|
||||||
onClose={props.closeProfileMenu}
|
|
||||||
className={classes.headerMenu}
|
|
||||||
classes={{ paper: classes.profileMenu }}
|
|
||||||
disableAutoFocusItem
|
|
||||||
>
|
|
||||||
<div className={classes.profileMenuUser}>
|
|
||||||
<Typography variant="h4" weight="medium">
|
|
||||||
John Smith
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
className={classes.profileMenuLink}
|
|
||||||
component="a"
|
|
||||||
color="primary"
|
|
||||||
href="https://flatlogic.com"
|
|
||||||
>
|
|
||||||
Flalogic.com
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
<MenuItem
|
|
||||||
className={classNames(
|
|
||||||
classes.profileMenuItem,
|
|
||||||
classes.headerMenuItem
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<AccountIcon className={classes.profileMenuIcon} /> Profile
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
className={classNames(
|
|
||||||
classes.profileMenuItem,
|
|
||||||
classes.headerMenuItem
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<AccountIcon className={classes.profileMenuIcon} /> Tasks
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
className={classNames(
|
|
||||||
classes.profileMenuItem,
|
|
||||||
classes.headerMenuItem
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<AccountIcon className={classes.profileMenuIcon} /> Messages
|
|
||||||
</MenuItem>
|
|
||||||
<div className={classes.profileMenuUser}>
|
|
||||||
<Typography
|
|
||||||
className={classes.profileMenuLink}
|
|
||||||
color="primary"
|
|
||||||
onClick={props.signOut}
|
|
||||||
>
|
|
||||||
Sign Out
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Menu>
|
|
||||||
</Toolbar>
|
|
||||||
</AppBar>
|
|
||||||
);
|
|
||||||
|
|
||||||
const styles = theme => ({
|
|
||||||
logotype: {
|
|
||||||
color: "white",
|
|
||||||
marginLeft: theme.spacing.unit * 2.5,
|
|
||||||
marginRight: theme.spacing.unit * 2.5,
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: 18,
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
[theme.breakpoints.down("xs")]: {
|
|
||||||
display: "none"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
appBar: {
|
|
||||||
width: "100vw",
|
|
||||||
zIndex: theme.zIndex.drawer + 1,
|
|
||||||
transition: theme.transitions.create(["margin"], {
|
|
||||||
easing: theme.transitions.easing.sharp,
|
|
||||||
duration: theme.transitions.duration.leavingScreen
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
paddingLeft: theme.spacing.unit * 2,
|
|
||||||
paddingRight: theme.spacing.unit * 2
|
|
||||||
},
|
|
||||||
hide: {
|
|
||||||
display: "none"
|
|
||||||
},
|
|
||||||
grow: {
|
|
||||||
flexGrow: 1
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
position: "relative",
|
|
||||||
borderRadius: 25,
|
|
||||||
paddingLeft: theme.spacing.unit * 2.5,
|
|
||||||
width: 36,
|
|
||||||
backgroundColor: fade(theme.palette.common.black, 0),
|
|
||||||
transition: theme.transitions.create(["background-color", "width"]),
|
|
||||||
"&:hover": {
|
|
||||||
cursor: "pointer",
|
|
||||||
backgroundColor: fade(theme.palette.common.black, 0.08)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
searchFocused: {
|
|
||||||
backgroundColor: fade(theme.palette.common.black, 0.08),
|
|
||||||
width: "100%",
|
|
||||||
[theme.breakpoints.up("md")]: {
|
|
||||||
width: 250
|
|
||||||
}
|
|
||||||
},
|
|
||||||
searchIcon: {
|
|
||||||
width: 36,
|
|
||||||
right: 0,
|
|
||||||
height: "100%",
|
|
||||||
position: "absolute",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
transition: theme.transitions.create("right"),
|
|
||||||
"&:hover": {
|
|
||||||
cursor: "pointer"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
searchIconOpened: {
|
|
||||||
right: theme.spacing.unit * 1.25
|
|
||||||
},
|
|
||||||
inputRoot: {
|
|
||||||
color: "inherit",
|
|
||||||
width: "100%"
|
|
||||||
},
|
|
||||||
inputInput: {
|
|
||||||
height: 36,
|
|
||||||
padding: 0,
|
|
||||||
paddingRight: 36 + theme.spacing.unit * 1.25,
|
|
||||||
width: "100%"
|
|
||||||
},
|
|
||||||
messageContent: {
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column"
|
|
||||||
},
|
|
||||||
headerMenu: {
|
|
||||||
marginTop: theme.spacing.unit * 7
|
|
||||||
},
|
|
||||||
headerMenuList: {
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column"
|
|
||||||
},
|
|
||||||
headerMenuItem: {
|
|
||||||
"&:hover, &:focus": {
|
|
||||||
backgroundColor: theme.palette.primary.main,
|
|
||||||
color: "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
headerMenuButton: {
|
|
||||||
marginLeft: theme.spacing.unit * 2,
|
|
||||||
padding: theme.spacing.unit / 2
|
|
||||||
},
|
|
||||||
headerMenuButtonCollapse: {
|
|
||||||
marginRight: theme.spacing.unit * 2
|
|
||||||
},
|
|
||||||
headerIcon: {
|
|
||||||
fontSize: 28,
|
|
||||||
color: "rgba(255, 255, 255, 0.35)"
|
|
||||||
},
|
|
||||||
headerIconCollapse: {
|
|
||||||
color: "white"
|
|
||||||
},
|
|
||||||
profileMenu: {
|
|
||||||
minWidth: 265
|
|
||||||
},
|
|
||||||
profileMenuUser: {
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
padding: theme.spacing.unit * 2
|
|
||||||
},
|
|
||||||
profileMenuItem: {
|
|
||||||
color: theme.palette.text.hint
|
|
||||||
},
|
|
||||||
profileMenuIcon: {
|
|
||||||
marginRight: theme.spacing.unit * 2,
|
|
||||||
color: theme.palette.text.hint
|
|
||||||
},
|
|
||||||
profileMenuLink: {
|
|
||||||
fontSize: 16,
|
|
||||||
textDecoration: "none",
|
|
||||||
"&:hover": {
|
|
||||||
cursor: "pointer"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
messageNotification: {
|
|
||||||
height: "auto",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
"&:hover, &:focus": {
|
|
||||||
backgroundColor: theme.palette.background.light
|
|
||||||
}
|
|
||||||
},
|
|
||||||
messageNotificationSide: {
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center",
|
|
||||||
marginRight: theme.spacing.unit * 2
|
|
||||||
},
|
|
||||||
messageNotificationBodySide: {
|
|
||||||
alignItems: "flex-start",
|
|
||||||
marginRight: 0
|
|
||||||
},
|
|
||||||
sendMessageButton: {
|
|
||||||
margin: theme.spacing.unit * 4,
|
|
||||||
marginTop: theme.spacing.unit * 2,
|
|
||||||
marginBottom: theme.spacing.unit * 2,
|
|
||||||
textTransform: "none"
|
|
||||||
},
|
|
||||||
sendButtonIcon: {
|
|
||||||
marginLeft: theme.spacing.unit * 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default withStyles(styles)(Header);
|
|
||||||
Loading…
Reference in New Issue