Improve menu icon

This commit is contained in:
rui hildt 2020-05-13 19:16:49 +02:00
parent f6611daad8
commit 06dc0c455e
1 changed files with 5 additions and 19 deletions

View File

@ -1,32 +1,22 @@
import React from 'react'; import React from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { Nav, Icon, Dropdown, IconButton, Popover, Whisper } from 'rsuite'; import { Nav, Icon, Dropdown, Popover, Whisper } from 'rsuite';
export default function MenuDropdown() { export default function MenuDropdown() {
const history = useHistory(); const history = useHistory();
const triggerRef = React.createRef(); const triggerRef = React.createRef();
function handleSelectMenu(eventKey, event) { function handleSelectMenu(eventKey, event) {
console.log(eventKey); history.push(eventKey);
triggerRef.current.hide(); triggerRef.current.hide();
} }
const MenuPopover = ({ onSelect, ...rest }) => ( const MenuPopover = ({ onSelect, ...rest }) => (
<Popover {...rest} full> <Popover {...rest} full>
<Dropdown.Menu onSelect={onSelect}> <Dropdown.Menu onSelect={onSelect}>
<Dropdown.Item <Dropdown.Item eventKey={'login'}>Login</Dropdown.Item>
eventKey={0} <Dropdown.Item eventKey={'register'}>Register</Dropdown.Item>
onClick={() => history.push('/login')}
>
Login
</Dropdown.Item>
<Dropdown.Item
eventKey={1}
onClick={() => history.push('/register')}
>
Register
</Dropdown.Item>
<Dropdown.Item eventKey={2}>Dashboard</Dropdown.Item> <Dropdown.Item eventKey={2}>Dashboard</Dropdown.Item>
<Dropdown.Item eventKey={3}>Schedule a Meeting</Dropdown.Item> <Dropdown.Item eventKey={3}>Schedule a Meeting</Dropdown.Item>
<Dropdown.Item eventKey={4}>Account Settings</Dropdown.Item> <Dropdown.Item eventKey={4}>Account Settings</Dropdown.Item>
@ -44,11 +34,7 @@ export default function MenuDropdown() {
triggerRef={triggerRef} triggerRef={triggerRef}
speaker={<MenuPopover onSelect={handleSelectMenu} />} speaker={<MenuPopover onSelect={handleSelectMenu} />}
> >
<IconButton <Icon appearance='primary' size='2x' icon='user-circle' />
appearance='primary'
icon={<Icon size='4x' icon='user-circle' />}
circle
/>
</Whisper> </Whisper>
</Nav.Item> </Nav.Item>
</Nav> </Nav>