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 React from 'react' |
||||||
|
|
||||||
import { PAGES } from 'config' |
|
||||||
|
|
||||||
import { Menu } from 'features/Menu' |
import { Menu } from 'features/Menu' |
||||||
|
import { LanguageSelect } from 'features/LanguageSelect' |
||||||
import { |
import { |
||||||
Wrapper, |
HeaderStyled, |
||||||
|
HeaderGroup, |
||||||
MenuWrapper, |
MenuWrapper, |
||||||
HomeButtonLink, |
|
||||||
} from 'features/ProfileHeader/styled' |
} from 'features/ProfileHeader/styled' |
||||||
|
|
||||||
import { Filters } from '../Filters' |
import { Filters } from '../Filters' |
||||||
|
|
||||||
export const DesktopHeader = () => ( |
export const DesktopHeader = () => ( |
||||||
<Wrapper> |
<HeaderStyled> |
||||||
|
<HeaderGroup> |
||||||
|
<Filters /> |
||||||
|
</HeaderGroup> |
||||||
|
|
||||||
|
<HeaderGroup> |
||||||
<MenuWrapper> |
<MenuWrapper> |
||||||
<Menu /> |
<Menu /> |
||||||
<HomeButtonLink to={PAGES.home} /> |
|
||||||
</MenuWrapper> |
</MenuWrapper> |
||||||
|
<LanguageSelect /> |
||||||
<Filters /> |
</HeaderGroup> |
||||||
</Wrapper> |
</HeaderStyled> |
||||||
) |
) |
||||||
|
|||||||
@ -1,56 +1,49 @@ |
|||||||
import React from 'react' |
import React from 'react' |
||||||
|
import { Link, useRouteMatch } from 'react-router-dom' |
||||||
|
|
||||||
import { PAGES } from 'config' |
import { PAGES } from 'config' |
||||||
|
|
||||||
import { useToggle } from 'hooks' |
|
||||||
|
|
||||||
import { useAuthStore } from 'features/AuthStore' |
import { useAuthStore } from 'features/AuthStore' |
||||||
import { T9n } from 'features/T9n' |
import { Tooltip } from 'features/Tooltip' |
||||||
import { OutsideClick } from 'features/OutsideClick' |
|
||||||
import { Burger } from 'features/Burger' |
|
||||||
|
|
||||||
import { |
import { |
||||||
Wrapper, |
Nav, |
||||||
MenuList, |
MenuList, |
||||||
MenuItem, |
MenuItem, |
||||||
Icon, |
Icon, |
||||||
StyledLink, |
|
||||||
Title, |
|
||||||
} from './styled' |
} from './styled' |
||||||
|
|
||||||
export const Menu = () => { |
export const Menu = () => { |
||||||
const { |
|
||||||
close, |
|
||||||
isOpen, |
|
||||||
toggle, |
|
||||||
} = useToggle() |
|
||||||
const { logout } = useAuthStore() |
const { logout } = useAuthStore() |
||||||
|
const isHomePage = useRouteMatch(PAGES.home)?.isExact |
||||||
|
|
||||||
return ( |
return ( |
||||||
<OutsideClick onClick={close}> |
<Nav> |
||||||
<Wrapper> |
|
||||||
<Burger |
|
||||||
toggle={toggle} |
|
||||||
isOpen={isOpen} |
|
||||||
/> |
|
||||||
{isOpen && ( |
|
||||||
<MenuList id='menuList'> |
<MenuList id='menuList'> |
||||||
|
{ |
||||||
|
!isHomePage && ( |
||||||
<MenuItem> |
<MenuItem> |
||||||
<Icon image='userAccount' /> |
<Tooltip lexic='to_home'> |
||||||
<StyledLink to={PAGES.useraccount}> |
<Link to={PAGES.home}> |
||||||
<T9n t='user_account' /> |
<Icon image='home-btn-hover' /> |
||||||
</StyledLink> |
</Link> |
||||||
|
</Tooltip> |
||||||
</MenuItem> |
</MenuItem> |
||||||
|
) |
||||||
|
} |
||||||
<MenuItem> |
<MenuItem> |
||||||
|
<Tooltip lexic='user_account'> |
||||||
|
<Link to={PAGES.useraccount}> |
||||||
|
<Icon image='userAccount' /> |
||||||
|
</Link> |
||||||
|
</Tooltip> |
||||||
|
</MenuItem> |
||||||
|
<MenuItem onClick={logout}> |
||||||
|
<Tooltip lexic='logout'> |
||||||
<Icon image='logout' /> |
<Icon image='logout' /> |
||||||
<Title |
</Tooltip> |
||||||
t='logout' |
|
||||||
onClick={logout} |
|
||||||
/> |
|
||||||
</MenuItem> |
</MenuItem> |
||||||
</MenuList> |
</MenuList> |
||||||
)} |
</Nav> |
||||||
</Wrapper> |
|
||||||
</OutsideClick> |
|
||||||
) |
) |
||||||
} |
} |
||||||
|
|||||||
@ -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