Ott 514 menus redesign (#217)
* refactor(#514): move score toggler and lang switcher to headers * refactor(#514): header restyling * refactor(#514): moved home link into Menus componentkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan
5 years ago
committed by
GitHub
parent
0b0d6d4644
commit
c917a8cd8c
@ -1,26 +0,0 @@ |
||||
import React from 'react' |
||||
|
||||
import { |
||||
RowOne, |
||||
RowTwo, |
||||
RowThree, |
||||
StyledBurger, |
||||
} from './styled' |
||||
|
||||
type Props = { |
||||
isOpen: boolean, |
||||
toggle: () => void, |
||||
} |
||||
|
||||
export const Burger = ( |
||||
{ isOpen, toggle }: Props, |
||||
) => ( |
||||
<StyledBurger |
||||
open={isOpen} |
||||
onClick={toggle} |
||||
> |
||||
<RowOne /> |
||||
<RowTwo /> |
||||
<RowThree /> |
||||
</StyledBurger> |
||||
) |
||||
@ -1,53 +0,0 @@ |
||||
import styled from 'styled-components' |
||||
|
||||
import { devices } from 'config/devices' |
||||
|
||||
const BurgerRow = styled.div` |
||||
width: 19px; |
||||
height: 2px; |
||||
border-radius: 10px; |
||||
transition: all 0.3s linear; |
||||
position: relative; |
||||
transform-origin: 1px; |
||||
background: #666666; |
||||
|
||||
@media ${devices.tablet} { |
||||
display: none; |
||||
} |
||||
` |
||||
|
||||
export const RowOne = styled(BurgerRow)`` |
||||
|
||||
export const RowTwo = styled(BurgerRow)`` |
||||
|
||||
export const RowThree = styled(BurgerRow)`` |
||||
|
||||
export const StyledBurger = styled.div<{open: boolean}>` |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
width: 22px; |
||||
height: 22px; |
||||
background: transparent; |
||||
border: none; |
||||
cursor: pointer; |
||||
padding: 2px; |
||||
z-index: 10; |
||||
|
||||
${RowOne}{ |
||||
transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')}; |
||||
} |
||||
|
||||
${RowTwo}{ |
||||
opacity: ${({ open }) => (open ? '0' : '1')}; |
||||
} |
||||
|
||||
${RowThree}{ |
||||
transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')}; |
||||
} |
||||
|
||||
@media ${devices.tablet} { |
||||
background-size: 100%; |
||||
background-image: url(/images/userAccount.svg); |
||||
} |
||||
` |
||||
@ -1,23 +1,26 @@ |
||||
import React from 'react' |
||||
|
||||
import { PAGES } from 'config' |
||||
|
||||
import { Menu } from 'features/Menu' |
||||
import { LanguageSelect } from 'features/LanguageSelect' |
||||
import { |
||||
Wrapper, |
||||
HeaderStyled, |
||||
HeaderGroup, |
||||
MenuWrapper, |
||||
HomeButtonLink, |
||||
} from 'features/ProfileHeader/styled' |
||||
|
||||
import { Filters } from '../Filters' |
||||
|
||||
export const DesktopHeader = () => ( |
||||
<Wrapper> |
||||
<MenuWrapper> |
||||
<Menu /> |
||||
<HomeButtonLink to={PAGES.home} /> |
||||
</MenuWrapper> |
||||
<HeaderStyled> |
||||
<HeaderGroup> |
||||
<Filters /> |
||||
</HeaderGroup> |
||||
|
||||
<Filters /> |
||||
</Wrapper> |
||||
<HeaderGroup> |
||||
<MenuWrapper> |
||||
<Menu /> |
||||
</MenuWrapper> |
||||
<LanguageSelect /> |
||||
</HeaderGroup> |
||||
</HeaderStyled> |
||||
) |
||||
|
||||
@ -1,56 +1,49 @@ |
||||
import React from 'react' |
||||
import { Link, useRouteMatch } from 'react-router-dom' |
||||
|
||||
import { PAGES } from 'config' |
||||
|
||||
import { useToggle } from 'hooks' |
||||
|
||||
import { useAuthStore } from 'features/AuthStore' |
||||
import { T9n } from 'features/T9n' |
||||
import { OutsideClick } from 'features/OutsideClick' |
||||
import { Burger } from 'features/Burger' |
||||
import { Tooltip } from 'features/Tooltip' |
||||
|
||||
import { |
||||
Wrapper, |
||||
Nav, |
||||
MenuList, |
||||
MenuItem, |
||||
Icon, |
||||
StyledLink, |
||||
Title, |
||||
} from './styled' |
||||
|
||||
export const Menu = () => { |
||||
const { |
||||
close, |
||||
isOpen, |
||||
toggle, |
||||
} = useToggle() |
||||
const { logout } = useAuthStore() |
||||
const isHomePage = useRouteMatch(PAGES.home)?.isExact |
||||
|
||||
return ( |
||||
<OutsideClick onClick={close}> |
||||
<Wrapper> |
||||
<Burger |
||||
toggle={toggle} |
||||
isOpen={isOpen} |
||||
/> |
||||
{isOpen && ( |
||||
<MenuList id='menuList'> |
||||
<Nav> |
||||
<MenuList id='menuList'> |
||||
{ |
||||
!isHomePage && ( |
||||
<MenuItem> |
||||
<Icon image='userAccount' /> |
||||
<StyledLink to={PAGES.useraccount}> |
||||
<T9n t='user_account' /> |
||||
</StyledLink> |
||||
<Tooltip lexic='to_home'> |
||||
<Link to={PAGES.home}> |
||||
<Icon image='home-btn-hover' /> |
||||
</Link> |
||||
</Tooltip> |
||||
</MenuItem> |
||||
<MenuItem> |
||||
<Icon image='logout' /> |
||||
<Title |
||||
t='logout' |
||||
onClick={logout} |
||||
/> |
||||
</MenuItem> |
||||
</MenuList> |
||||
)} |
||||
</Wrapper> |
||||
</OutsideClick> |
||||
) |
||||
} |
||||
<MenuItem> |
||||
<Tooltip lexic='user_account'> |
||||
<Link to={PAGES.useraccount}> |
||||
<Icon image='userAccount' /> |
||||
</Link> |
||||
</Tooltip> |
||||
</MenuItem> |
||||
<MenuItem onClick={logout}> |
||||
<Tooltip lexic='logout'> |
||||
<Icon image='logout' /> |
||||
</Tooltip> |
||||
</MenuItem> |
||||
</MenuList> |
||||
</Nav> |
||||
) |
||||
} |
||||
|
||||
@ -0,0 +1,48 @@ |
||||
import type { ReactNode } from 'react' |
||||
import React, { Fragment } from 'react' |
||||
|
||||
import styled from 'styled-components/macro' |
||||
|
||||
import { devices } from 'config' |
||||
|
||||
import { TooltipBlockWrapper } from 'features/UserFavorites/TooltipBlock/styled' |
||||
import { T9n } from 'features/T9n' |
||||
|
||||
export const TooltipWrapper = styled(TooltipBlockWrapper)` |
||||
position: absolute; |
||||
top: calc(100% + 8px); |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
padding: 8px 12px; |
||||
font-weight: normal; |
||||
font-size: 14px; |
||||
line-height: 18px; |
||||
text-align: center; |
||||
display: none; |
||||
|
||||
@media ${devices.tablet} { |
||||
top: calc(100% + 16px); |
||||
} |
||||
|
||||
&::before { |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
` |
||||
|
||||
type Props = { |
||||
children: ReactNode, |
||||
lexic: string, |
||||
} |
||||
|
||||
export const Tooltip = ({ |
||||
children, |
||||
lexic, |
||||
}: Props) => ( |
||||
<Fragment> |
||||
<TooltipWrapper top={0}> |
||||
<T9n t={lexic} /> |
||||
</TooltipWrapper> |
||||
{children} |
||||
</Fragment> |
||||
) |
||||
Loading…
Reference in new issue