jako tako

src/components/TopBar/index.tsx

@@ -4,49 +4,58 @@ import Input from "@material-ui/core/Input";
 import Transfer from "./transfer.png";
 import Search from "./search.svg";
 import UK from "./UK.png";
+import PL from "./PL.png";
 import User from "./user.png";
 import CloseIcon from "./close.svg";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
 
 interface TopBarProps {
   handleTransfer: (e: React.MouseEvent) => void;
   handleProfile: (e: React.MouseEvent) => void;
+  handleClose: (e: React.MouseEvent) => void;
   handleLanguage: (e: React.MouseEvent) => void;
   textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isOpen: boolean;
+  isOpenTransfer: boolean;
+  isOpenProfile: boolean;
+  isPolish: boolean;
+  anchorEl: null | HTMLElement;
 }
 
 interface TopBarState {}
 
-export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+export default class TopBar extends React.Component<
+  TopBarProps,
+  TopBarState
+> {
   constructor(props: TopBarProps) {
     super(props);
     this.handleProfile = this.handleProfile.bind(this);
+    this.handleClose = this.handleProfile.bind(this);
     this.handleLanguage = this.handleLanguage.bind(this);
     this.handleTransfer = this.handleTransfer.bind(this);
-    this.state = {
-      isOpen: false,
-    };
-  }
-
-  handleTransfer(e: React.MouseEvent) {
-    this.props.handleTransfer(e);
-    this.setState({
-      isOpen: true,
-    });
   }
 
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     this.props.textChangeHandler(e);
   }
 
-  handleProfile(e: React.MouseEvent) {
-    this.props.handleProfile(e);
+  handleTransfer(e: React.MouseEvent) {
+    this.props.handleTransfer(e);
   }
 
   handleLanguage(e: React.MouseEvent) {
     this.props.handleLanguage(e);
   }
 
+  handleProfile(e: React.MouseEvent) {
+    this.props.handleProfile(e);
+  }
+
+  handleClose(e: React.MouseEvent) {
+    this.props.handleClose(e);
+  }
+
   render() {
     return (
       <div className="top-bar">
@@ -59,11 +68,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
           <div className="top-bar__tekst"> plan na plan </div>
         </div>
         <div className="top-bar__input-div">
-        <img
-            className="top-bar__input-icon"
-            alt="search"
-            src={Search}
-          />
+          <img className="top-bar__input-icon" alt="search" src={Search} />
           <Input
             placeholder="Wyszukaj..."
             inputProps={{ "aria-label": "description" }}
@@ -72,11 +77,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
               this.handleChange(e as ChangeEvent<HTMLInputElement>)
             }
           />
-        <img
-            className="top-bar__input-icon"
-            alt="close"
-            src={CloseIcon}
-          />
+          <img className="top-bar__input-icon" alt="close" src={CloseIcon} />
         </div>
         <div className="top-bar__icon-box">
           <img
@@ -88,7 +89,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
           <img
             className="top-bar__icon"
             alt="change_language"
-            src={UK}
+            src={this.props.isPolish ? UK : PL}
             onClick={this.handleLanguage}
           />
           <img
@@ -97,6 +98,17 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
             src={User}
             onClick={this.handleProfile}
           />
+          <Menu className="top-bar__menu"
+            id="simple-menu"
+            anchorEl={this.props.anchorEl}
+            keepMounted
+            open={this.props.isOpenProfile}
+            onClose={this.handleClose}
+          >
+            <MenuItem>Profile</MenuItem>
+            <MenuItem>My account</MenuItem>
+            <MenuItem>Logout</MenuItem>
+          </Menu>
         </div>
       </div>
     );