Add basic dropdown menu

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;

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;

src/components/TopBar.js

@@ -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;

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,