- added profile dropdown

Author: Manu

src/assets/jss/material-dashboard-react/dropdownStyle.jsx

@@ -112,6 +112,7 @@ const dropdownStyle = theme => ({
     color: grayColor[8],
     whiteSpace: "nowrap",
     height: "unset",
+    minHeight: "unset",
     "&:hover": {
       backgroundColor: primaryColor[0],
       color: whiteColor,

src/components/Navbars/AdminNavbarLinks.jsx

@@ -11,6 +11,7 @@ import Paper from "@material-ui/core/Paper";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import Hidden from "@material-ui/core/Hidden";
 import Poppers from "@material-ui/core/Popper";
+import Divider from "@material-ui/core/Divider";
 // @material-ui/icons
 import Person from "@material-ui/icons/Person";
 import Notifications from "@material-ui/icons/Notifications";
@@ -24,23 +25,30 @@ import headerLinksStyle from "assets/jss/material-dashboard-react/components/hea
 
 class AdminNavbarLinks extends React.Component {
   state = {
-    open: false
+    openNotifcation: false,
+    openProfile: false
   };
-  handleToggle = () => {
-    this.setState(state => ({ open: !state.open }));
+  handleToggleNotification = () => {
+    this.setState(state => ({ openNotifcation: !state.openNotifcation }));
   };
-
-  handleClose = event => {
-    if (this.anchorEl.contains(event.target)) {
+  handleCloseNotification = event => {
+    if (this.anchorNotification.contains(event.target)) {
       return;
     }
-
-    this.setState({ open: false });
+    this.setState({ openNotifcation: false });
+  };
+  handleToggleProfile = () => {
+    this.setState(state => ({ openProfile: !state.openProfile }));
+  };
+  handleCloseProfile = event => {
+    if (this.anchorProfile.contains(event.target)) {
+      return;
+    }
+    this.setState({ openProfile: false });
   };
-
   render() {
     const { classes } = this.props;
-    const { open } = this.state;
+    const { openNotifcation, openProfile } = this.state;
     return (
       <div>
         <div className={classes.searchWrapper}>
@@ -74,14 +82,14 @@ class AdminNavbarLinks extends React.Component {
         <div className={classes.manager}>
           <Button
             buttonRef={node => {
-              this.anchorEl = node;
+              this.anchorNotification = node;
             }}
             color={window.innerWidth > 959 ? "transparent" : "white"}
             justIcon={window.innerWidth > 959}
             simple={!(window.innerWidth > 959)}
-            aria-owns={open ? "menu-list-grow" : null}
+            aria-owns={openNotifcation ? "notification-menu-list-grow" : null}
             aria-haspopup="true"
-            onClick={this.handleToggle}
+            onClick={this.handleToggleNotification}
             className={classes.buttonLink}
           >
             <Notifications className={classes.icons} />
@@ -93,54 +101,54 @@ class AdminNavbarLinks extends React.Component {
             </Hidden>
           </Button>
           <Poppers
-            open={open}
-            anchorEl={this.anchorEl}
+            open={openNotifcation}
+            anchorEl={this.anchorNotification}
             transition
             disablePortal
             className={
-              classNames({ [classes.popperClose]: !open }) +
+              classNames({ [classes.popperClose]: !openNotifcation }) +
               " " +
               classes.popperNav
             }
           >
             {({ TransitionProps, placement }) => (
               <Grow
                 {...TransitionProps}
-                id="menu-list-grow"
+                id="notification-menu-list-grow"
                 style={{
                   transformOrigin:
                     placement === "bottom" ? "center top" : "center bottom"
                 }}
               >
                 <Paper>
-                  <ClickAwayListener onClickAway={this.handleClose}>
+                  <ClickAwayListener onClickAway={this.handleCloseNotification}>
                     <MenuList role="menu">
                       <MenuItem
-                        onClick={this.handleClose}
+                        onClick={this.handleCloseNotification}
                         className={classes.dropdownItem}
                       >
                         Mike John responded to your email
                       </MenuItem>
                       <MenuItem
-                        onClick={this.handleClose}
+                        onClick={this.handleCloseNotification}
                         className={classes.dropdownItem}
                       >
                         You have 5 new tasks
                       </MenuItem>
                       <MenuItem
-                        onClick={this.handleClose}
+                        onClick={this.handleCloseNotification}
                         className={classes.dropdownItem}
                       >
                         You{"'"}re now friend with Andrew
                       </MenuItem>
                       <MenuItem
-                        onClick={this.handleClose}
+                        onClick={this.handleCloseNotification}
                         className={classes.dropdownItem}
                       >
                         Another Notification
                       </MenuItem>
                       <MenuItem
-                        onClick={this.handleClose}
+                        onClick={this.handleCloseNotification}
                         className={classes.dropdownItem}
                       >
                         Another One
@@ -152,18 +160,73 @@ class AdminNavbarLinks extends React.Component {
             )}
           </Poppers>
         </div>
-        <Button
-          color={window.innerWidth > 959 ? "transparent" : "white"}
-          justIcon={window.innerWidth > 959}
-          simple={!(window.innerWidth > 959)}
-          aria-label="Person"
-          className={classes.buttonLink}
-        >
-          <Person className={classes.icons} />
-          <Hidden mdUp implementation="css">
-            <p className={classes.linkText}>Profile</p>
-          </Hidden>
-        </Button>
+        <div className={classes.manager}>
+          <Button
+            buttonRef={node => {
+              this.anchorProfile = node;
+            }}
+            color={window.innerWidth > 959 ? "transparent" : "white"}
+            justIcon={window.innerWidth > 959}
+            simple={!(window.innerWidth > 959)}
+            aria-owns={openNotifcation ? "profile-menu-list-grow" : null}
+            aria-haspopup="true"
+            onClick={this.handleToggleProfile}
+            className={classes.buttonLink}
+          >
+            <Person className={classes.icons} />
+            <Hidden mdUp implementation="css">
+              <p className={classes.linkText}>Profile</p>
+            </Hidden>
+          </Button>
+          <Poppers
+            open={openProfile}
+            anchorEl={this.anchorProfile}
+            transition
+            disablePortal
+            className={
+              classNames({ [classes.popperClose]: !openProfile }) +
+              " " +
+              classes.popperNav
+            }
+          >
+            {({ TransitionProps, placement }) => (
+              <Grow
+                {...TransitionProps}
+                id="profile-menu-list-grow"
+                style={{
+                  transformOrigin:
+                    placement === "bottom" ? "center top" : "center bottom"
+                }}
+              >
+                <Paper>
+                  <ClickAwayListener onClickAway={this.handleCloseProfile}>
+                    <MenuList role="menu">
+                      <MenuItem
+                        onClick={this.handleCloseProfile}
+                        className={classes.dropdownItem}
+                      >
+                        Profile
+                      </MenuItem>
+                      <MenuItem
+                        onClick={this.handleCloseProfile}
+                        className={classes.dropdownItem}
+                      >
+                        Settings
+                      </MenuItem>
+                      <Divider light />
+                      <MenuItem
+                        onClick={this.handleCloseProfile}
+                        className={classes.dropdownItem}
+                      >
+                        Logout
+                      </MenuItem>
+                    </MenuList>
+                  </ClickAwayListener>
+                </Paper>
+              </Grow>
+            )}
+          </Poppers>
+        </div>
       </div>
     );
   }