Skip to content
This repository has been archived by the owner on Mar 7, 2023. It is now read-only.

Commit

Permalink
fix(mobile): fix overflow when menu too big (#248)
Browse files Browse the repository at this point in the history 
* fix(mobile): fix overflow when menu too big

* fix(menu): fix height

* fix(navbar): fix recommendations

* fix(flow): fix flow
  • Loading branch information
@Lyncee59
Lyncee59 authored Feb 21, 2019
1 parent 2b933f5 commit dd1958d
Show file tree
Hide file tree
Showing 12 changed files with 749 additions and 281 deletions.
18 changes: 5 additions & 13 deletions src/Organisms/Navbar/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@ import PropTypes from 'prop-types'
import * as React from 'react'
import styled from 'styled-components'

import { prop, screenSize } from '../../Tools/interpolation'
import { screenSize } from '../../Tools/interpolation'

export type PropsType = {
+children?: React.Node,
+height?: string,
}

const Wrapper = styled.div`
Expand All @@ -17,7 +16,7 @@ const Wrapper = styled.div`
justify-content: space-between;
align-items: center;
width: 100%;
height: ${prop<PropsType>('height')};
height: 4.5rem;
padding: 0 2rem;
box-sizing: border-box;
Expand All @@ -26,19 +25,12 @@ const Wrapper = styled.div`
}
`

const Navbar = ({ children, height, ...rest }: PropsType) => (
<Wrapper height={height} {...rest}>
{children}
</Wrapper>
const Navbar = ({ children, ...rest }: PropsType) => (
<Wrapper {...rest}>{children}</Wrapper>
)

Navbar.propTypes = {
children: PropTypes.node,
height: PropTypes.string.isRequired,
}

Navbar.defaultProps = {
height: '60px',
children: PropTypes.node.isRequired,
}

export default Navbar
6 changes: 0 additions & 6 deletions src/Organisms/Navbar/Navbar.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,4 @@ describe('Navbar', () => {

expect(tree.find(Navbar)).toMatchSnapshot()
})

it('should render correctly with height', () => {
const tree = mountWithTheme(<Navbar height="60px" />)

expect(tree.find(Navbar)).toMatchSnapshot()
})
})
288 changes: 201 additions & 87 deletions src/Organisms/Navbar/Navbar.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import styled from 'styled-components'
import { storiesOf } from '@storybook/react'
import Button from '../../Atoms/Buttons/Button'
import { BrandName } from '../../Atoms/Brand'
import Section from '../../Atoms/Containers/Section'
import Navbar from './Navbar'
import NavbarBrand from './NavbarBrand'
import NavbarDropdownContent from './NavbarDropdownContent'
Expand All @@ -18,100 +17,215 @@ import NavbarNavDropdown from './NavbarNavDropdown'
import NavbarNavItem from './NavbarNavItem'
import NavbarToggler from './NavbarToggler'

const OrientSection = styled(Section)`
background-color: ${(props) => props.theme.palette['orient']};
const Layout = styled.div`
width: 100%;
height: 768px;
`
const BlueSection = styled.div`
background: ${(props) => props.theme.palette['blue900']};
`
const Wrapper = (props) => <OrientSection {...props} />

const ButtonLogin = () => <Button>Login</Button>

const Content = () => (
const SmallContent = () => (
<>
{[1, 2, 3].map((value) => (
<NavbarDropdownItem key={value}>
<NavbarDropdownItemTitle>Link {value}</NavbarDropdownItemTitle>
<NavbarDropdownItemDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</NavbarDropdownItemDescription>
</NavbarDropdownItem>
))}
</>
)

const BigContent = () => (
<>
<NavbarDropdownItem>
<NavbarDropdownItemTitle>Link 1</NavbarDropdownItemTitle>
<NavbarDropdownItemDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</NavbarDropdownItemDescription>
</NavbarDropdownItem>
<NavbarDropdownItem>
<NavbarDropdownItemTitle>Link 2</NavbarDropdownItemTitle>
<NavbarDropdownItemDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</NavbarDropdownItemDescription>
</NavbarDropdownItem>
<NavbarDropdownItem>
<NavbarDropdownItemTitle>Link 3</NavbarDropdownItemTitle>
<NavbarDropdownItemDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</NavbarDropdownItemDescription>
</NavbarDropdownItem>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map((value) => (
<NavbarDropdownItem key={value}>
<NavbarDropdownItemTitle>Link {value}</NavbarDropdownItemTitle>
<NavbarDropdownItemDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</NavbarDropdownItemDescription>
</NavbarDropdownItem>
))}
</>
)

storiesOf('Organisms/Navbar', module)
.add('Example 1', () => (
<Wrapper>
<Navbar>
<NavbarHeader>
<NavbarBrand>
<BrandName width="175px" />
</NavbarBrand>
</NavbarHeader>
<NavbarMenu>
<NavbarNav width="auto">
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 1</NavbarDropdownHeader>
<NavbarDropdownContent>
<Content />
</NavbarDropdownContent>
</NavbarNavDropdown>
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 2</NavbarDropdownHeader>
<NavbarDropdownContent>
<Content />
</NavbarDropdownContent>
</NavbarNavDropdown>
</NavbarNav>
<NavbarNav width="auto">
<NavbarNavItem>
<ButtonLogin />
</NavbarNavItem>
</NavbarNav>
</NavbarMenu>
<NavbarToggler />
</Navbar>
</Wrapper>
.add('Nav (Closed on mobile)', () => (
<Layout>
<BlueSection>
<Navbar>
<NavbarHeader>
<NavbarBrand>
<BrandName width="175px" />
</NavbarBrand>
</NavbarHeader>
<NavbarMenu>
<NavbarNav width="auto">
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 1</NavbarDropdownHeader>
<NavbarDropdownContent>
<SmallContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 2</NavbarDropdownHeader>
<NavbarDropdownContent>
<SmallContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
</NavbarNav>
<NavbarNav width="auto">
<NavbarNavItem>
<ButtonLogin />
</NavbarNavItem>
</NavbarNav>
</NavbarMenu>
<NavbarToggler />
</Navbar>
</BlueSection>
</Layout>
))
.add('Navbar (Opened on mobile with few items)', () => (
<Layout>
<BlueSection>
<Navbar>
<NavbarHeader>
<NavbarBrand>
<BrandName width="175px" />
</NavbarBrand>
</NavbarHeader>
<NavbarMenu toggled>
<NavbarNav width="auto">
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 1</NavbarDropdownHeader>
<NavbarDropdownContent>
<SmallContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 2</NavbarDropdownHeader>
<NavbarDropdownContent>
<SmallContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
</NavbarNav>
<NavbarNav width="auto">
<NavbarNavItem>
<ButtonLogin />
</NavbarNavItem>
</NavbarNav>
</NavbarMenu>
<NavbarToggler toggled />
</Navbar>
</BlueSection>
</Layout>
))
.add('Navbar (Opened on mobile with lot of items)', () => (
<Layout>
<BlueSection>
<Navbar>
<NavbarHeader>
<NavbarBrand>
<BrandName width="175px" />
</NavbarBrand>
</NavbarHeader>
<NavbarMenu toggled>
<NavbarNav width="auto">
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 1</NavbarDropdownHeader>
<NavbarDropdownContent>
<BigContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 2</NavbarDropdownHeader>
<NavbarDropdownContent>
<BigContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
</NavbarNav>
<NavbarNav width="auto">
<NavbarNavItem>
<ButtonLogin />
</NavbarNavItem>
</NavbarNav>
</NavbarMenu>
<NavbarToggler toggled />
</Navbar>
</BlueSection>
</Layout>
))
.add('Navbar (Opened on mobile with reversed nav)', () => (
<Layout>
<BlueSection>
<Navbar>
<NavbarHeader>
<NavbarBrand>
<BrandName width="175px" />
</NavbarBrand>
</NavbarHeader>
<NavbarMenu toggled>
<NavbarNav order="2" width="auto">
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 1</NavbarDropdownHeader>
<NavbarDropdownContent>
<BigContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 2</NavbarDropdownHeader>
<NavbarDropdownContent>
<BigContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
</NavbarNav>
<NavbarNav order="1" width="auto">
<NavbarNavItem>
<ButtonLogin />
</NavbarNavItem>
</NavbarNav>
</NavbarMenu>
<NavbarToggler toggled />
</Navbar>
</BlueSection>
</Layout>
))
.add('Example 2', () => (
<Wrapper>
<Navbar>
<NavbarHeader>
<NavbarBrand>
<BrandName width="175px" />
</NavbarBrand>
</NavbarHeader>
<NavbarMenu toggled>
<NavbarNav width="auto">
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 1</NavbarDropdownHeader>
<NavbarDropdownContent>
<Content />
</NavbarDropdownContent>
</NavbarNavDropdown>
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 2</NavbarDropdownHeader>
<NavbarDropdownContent>
<Content />
</NavbarDropdownContent>
</NavbarNavDropdown>
</NavbarNav>
<NavbarNav width="auto">
<NavbarNavItem>
<ButtonLogin />
</NavbarNavItem>
</NavbarNav>
</NavbarMenu>
<NavbarToggler toggled />
</Navbar>
</Wrapper>
.add('Navbar (Opened on mobile with small height)', () => (
<Layout>
<BlueSection>
<Navbar>
<NavbarHeader>
<NavbarBrand>
<BrandName width="175px" />
</NavbarBrand>
</NavbarHeader>
<NavbarMenu maxHeight="250px" toggled>
<NavbarNav width="auto">
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 1</NavbarDropdownHeader>
<NavbarDropdownContent>
<BigContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
<NavbarNavDropdown>
<NavbarDropdownHeader>Header 2</NavbarDropdownHeader>
<NavbarDropdownContent>
<BigContent />
</NavbarDropdownContent>
</NavbarNavDropdown>
</NavbarNav>
<NavbarNav width="auto">
<NavbarNavItem>
<ButtonLogin />
</NavbarNavItem>
</NavbarNav>
</NavbarMenu>
<NavbarToggler toggled />
</Navbar>
</BlueSection>
</Layout>
))
1 change: 1 addition & 0 deletions src/Organisms/Navbar/NavbarBrand.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export type PropsType = {
}

const Wrapper = styled.div`
display: flex;
position: relative;
z-index: ${theme('navbarBrandZIndex')};
`
Expand Down
Loading

0 comments on commit dd1958d

Please sign in to comment.