From 657a8bc4508f47cf911e72e5bea2d33a87214b42 Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Wed, 13 May 2020 12:23:45 +0200
Subject: [PATCH] Add basic dropdown menu

---
 src/components/Navbar/MenuDropdown.js | 49 +++++++++++++++++++++++++++
 src/components/Navbar/NavBar.js       | 22 ++++++++++++
 src/components/TopBar.js              | 25 --------------
 src/screens/App.js                    |  2 +-
 4 files changed, 72 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Navbar/MenuDropdown.js
 create mode 100644 src/components/Navbar/NavBar.js
 delete mode 100644 src/components/TopBar.js

diff --git a/src/components/Navbar/MenuDropdown.js b/src/components/Navbar/MenuDropdown.js
new file mode 100644
index 0000000..bdf617b
--- /dev/null
+++ b/src/components/Navbar/MenuDropdown.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Nav, Icon, Dropdown, IconButton, Popover, Whisper } from 'rsuite';
+
+function MenuDropdown() {
+	const triggerRef = React.createRef();
+
+	function handleSelectMenu(eventKey, event) {
+		console.log(eventKey);
+		triggerRef.current.hide();
+	}
+
+	const MenuPopover = ({ onSelect, ...rest }) => (
+		<Popover {...rest} full>
+			<Dropdown.Menu onSelect={onSelect}>
+				<Dropdown.Item eventKey={1}>New File</Dropdown.Item>
+				<Dropdown.Item eventKey={2}>
+					New File with Current Profile
+				</Dropdown.Item>
+				<Dropdown.Item eventKey={3}>Download As...</Dropdown.Item>
+				<Dropdown.Item eventKey={4}>Export PDF</Dropdown.Item>
+				<Dropdown.Item eventKey={5}>Export HTML</Dropdown.Item>
+				<Dropdown.Item eventKey={6}>Settings</Dropdown.Item>
+				<Dropdown.Item eventKey={7}>About</Dropdown.Item>
+			</Dropdown.Menu>
+		</Popover>
+	);
+
+	return (
+		<Nav pullRight>
+			<Nav.Item>
+				<Whisper
+					placement='bottomEnd'
+					trigger='click'
+					triggerRef={triggerRef}
+					speaker={<MenuPopover onSelect={handleSelectMenu} />}
+				>
+					<IconButton
+						appearance='primary'
+						icon={<Icon size='4x' icon='user-circle' />}
+						circle
+					/>
+				</Whisper>
+			</Nav.Item>
+		</Nav>
+	);
+}
+
+export default MenuDropdown;
diff --git a/src/components/Navbar/NavBar.js b/src/components/Navbar/NavBar.js
new file mode 100644
index 0000000..efa00ba
--- /dev/null
+++ b/src/components/Navbar/NavBar.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Header, Navbar } from 'rsuite';
+import MenuDropdown from './MenuDropdown';
+
+const headerStyle = {
+	borderRadius: '7px 7px 0 0',
+};
+
+function NavBar() {
+	return (
+		<Header>
+			<Navbar appearance='inverse' style={headerStyle}>
+				<Navbar.Body>
+					<MenuDropdown />
+				</Navbar.Body>
+			</Navbar>
+		</Header>
+	);
+}
+
+export default NavBar;
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
deleted file mode 100644
index 41682ec..0000000
--- a/src/components/TopBar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { Header, Navbar, Nav, Icon } from 'rsuite';
-
-const headerStyle = {
-	borderRadius: '7px 7px 0 0',
-};
-
-function TopBar() {
-	return (
-		<Header >
-			<Navbar appearance='inverse' style={headerStyle}>
-				<Navbar.Body>
-					<Nav pullRight>
-						<Nav.Item
-							icon={<Icon size='2x' icon='user-circle' />}
-						></Nav.Item>
-					</Nav>
-				</Navbar.Body>
-			</Navbar>
-		</Header>
-	);
-}
-
-export default TopBar;
diff --git a/src/screens/App.js b/src/screens/App.js
index bfc4131..545f6c7 100644
--- a/src/screens/App.js
+++ b/src/screens/App.js
@@ -5,7 +5,7 @@ import { Container } from 'rsuite';
 import Login from './Login';
 import Register from './Register';
 
-import TopBar from '../components/TopBar';
+import TopBar from '../components/Navbar/NavBar';
 
 const containerStyle = {
 	maxWidth: 700,