semantics ui complete responsive menu

Solutions on MaxInterview for semantics ui complete responsive menu by the best coders in the world

showing results for - "semantics ui complete responsive menu"
Brice
16 May 2017
1import React, { useState } from 'react';
2import { Menu, Responsive, Dropdown, DropdownMenu } from 'semantic-ui-react';
3import { withRouter } from 'react-router-dom';
4import LogoutModal from './LogoutModal';
5
6function NavMenu(props) {
7    const [activeItem, setActiveItem] = useState('Laptop Item')
8    const [showModal, setShowModal] = useState(false)
9
10
11    return (
12        <div>
13            <Menu pointing secondary>
14                <Responsive as={Menu.Item} minWidth={790}
15                    name='Laptop Item'
16                    active={activeItem === 'Laptop Item'}
17                    onClick={() => setActiveItem('Test Item')}
18                />
19                <Responsive as={Menu.Item} minWidth={790}
20                    name='Laptop Item 2'
21                    active={activeItem === 'Laptop Item 2'}
22                    onClick={() => setActiveItem('Test Item 2')}
23                />
24                <Responsive as={Menu.Item} minWidth={790}
25                    name='Laptop Item 3'
26                    active={activeItem === 'Laptop Item 3'}
27                    onClick={() => setActiveItem('Test Item 3')}
28                />
29                <Menu.Menu position = 'right'>
30                    <Responsive as ={Menu.Item} minWidth={790}
31                        name = "Sign Out"
32                        onClick={() => setShowModal(true)}
33                    />
34                </Menu.Menu>
35                <Responsive as ={Menu.Menu} maxWidth={789}  position='right'>
36                    <Dropdown
37                        item
38                        icon ='bars'
39                        >
40                        <Dropdown.Menu>
41                            <Dropdown.Item text='Mobile/Tablet Item 1'/>
42                            <Dropdown.Item text='Mobile/Tablet Item 2'/>
43                            <Dropdown.Item text='Mobile/Tablet Item 3'/>
44                            <Dropdown.Item text='Sign Out'/>
45                        </Dropdown.Menu>
46                    </Dropdown>
47                </Responsive>
48            </Menu>
49        </div>
50    )
51}
52
53export default withRouter(NavMenu);
54