Skip to content
Snippets Groups Projects
Commit d013c9a4 authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

#67 Less item in arrow menu in larger screen

parent 317869c5
No related branches found
No related tags found
No related merge requests found
...@@ -87,25 +87,57 @@ class Header extends Component { ...@@ -87,25 +87,57 @@ class Header extends Component {
this.setState({ isOpen: false }); this.setState({ isOpen: false });
} }
render() { renderHeader(inHeader, hasArrowMenu) {
let renderedItemNum = 0
let current = 0
let maxNum = 0
if(this.props.user.id) {
maxNum = menuItems.filter(item => {
return this.props.user.permission >= item.permissionLevel
}).length
} else {
maxNum = 3
}
return ( return (
<div>
{/* Tablet, Computer, ... view */}
<Responsive minWidth={600} >
<Segment inverted textAlign='center' vertical> <Segment inverted textAlign='center' vertical>
<Container> <Container>
<Menu inverted secondary size='large'> <Menu inverted secondary size='large'>
{/* Menu items */} {/* Default Menu items */}
{menuItems.map((item, i) => {menuItems.map((item, i) => {
(item.permissionLevel === 0 ? if (item.permissionLevel === 0) {
renderedItemNum += 1
return (
<Menu.Item key={i} as={Link} to={item.to}> <Menu.Item key={i} as={Link} to={item.to}>
{item.prefix}{item.text} {item.prefix}{item.text}
</Menu.Item> </Menu.Item>
: null )
)) }else {
return null
}
})
}
{/* After default menu items */}
{menuItems.map((item, i) => {
if (this.props.user.permission >= item.permissionLevel
&& item.permissionLevel > 0
&& renderedItemNum < inHeader
&& current < i) {
renderedItemNum += 1
current = i
return (
<Menu.Item key={i} as={Link} to={item.to}>
{item.prefix}{item.text}
</Menu.Item>
)
} else {
return null
}
})
} }
{/* Arrow menu */} {/* Arrow menu */}
{ this.props.user.id ? { this.props.user.id && (current + 1) < maxNum ?
<Popup flowing hoverable inverted <Popup flowing hoverable inverted
trigger={ trigger={
<Menu.Item> <Menu.Item>
...@@ -115,14 +147,15 @@ class Header extends Component { ...@@ -115,14 +147,15 @@ class Header extends Component {
position='top center' position='top center'
> >
<Menu inverted secondary size='large'> <Menu inverted secondary size='large'>
{menuItems.map((item, i) => {menuItems.map((item, i) => {
(this.props.user.permission >= item.permissionLevel return (this.props.user.permission >= item.permissionLevel
&& item.permissionLevel > 0 ? && item.permissionLevel > 0
&& current < i ?
<Menu.Item key={i} as={Link} to={item.to}> <Menu.Item key={i} as={Link} to={item.to}>
{item.prefix}{item.text} {item.prefix}{item.text}
</Menu.Item> </Menu.Item>
: null : null
)) )})
} }
</Menu> </Menu>
</Popup> </Popup>
...@@ -142,6 +175,30 @@ class Header extends Component { ...@@ -142,6 +175,30 @@ class Header extends Component {
</Menu> </Menu>
</Container> </Container>
</Segment> </Segment>
)
}
render() {
return (
<div>
{/* Tablet, Computer, ... view */}
<Responsive minWidth={600} maxWidth={700}>
{this.renderHeader(3)}
</Responsive>
<Responsive minWidth={701} maxWidth={800}>
{this.renderHeader(4)}
</Responsive>
<Responsive minWidth={801} maxWidth={1000}>
{this.renderHeader(5)}
</Responsive>
<Responsive minWidth={1001} maxWidth={1100}>
{this.renderHeader(6)}
</Responsive>
<Responsive minWidth={1101} maxWidth={1200}>
{this.renderHeader(7)}
</Responsive>
<Responsive minWidth={1201}>
{this.renderHeader(8)}
</Responsive> </Responsive>
{/* Mobile view */} {/* Mobile view */}
<Responsive maxWidth={599}> <Responsive maxWidth={599}>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment