feat(ott-205): menu (#27)

public/images/logout.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H12V4.54543H14V2C14 0.895431 13.1046 0 12 0H2C0.895431 0 0 0.895431 0 2V18C0 19.1046 0.89543 20 2 20H12C13.1046 20 14 19.1046 14 18V15.4545H12V18H2L2 2Z" fill="white"/>
+<rect x="5" y="9" width="10" height="2" rx="0.5" fill="white" stroke="#999999" stroke-width="0.05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.625C12 9.34886 12.2239 9.125 12.5 9.125H21.4679C21.9133 9.125 22.1364 8.58643 21.8214 8.27145L18.1286 4.57855C17.9333 4.38329 17.9333 4.06671 18.1286 3.87145L18.6464 3.35355C18.8417 3.15829 19.1583 3.15829 19.3536 3.35355L25.6464 9.64645C25.8417 9.84171 25.8417 10.1583 25.6464 10.3536L19.3536 16.6464C19.1583 16.8417 18.8417 16.8417 18.6464 16.6464L18.1286 16.1286C17.9333 15.9333 17.9333 15.6167 18.1286 15.4214L21.8214 11.7286C22.1364 11.4136 21.9133 10.875 21.4679 10.875H12.5C12.2239 10.875 12 10.6511 12 10.375V9.625Z" fill="white" stroke="white" stroke-width="0.2"/>
+</svg>

public/images/userAccount.svg

@@ -0,0 +1,4 @@
+
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6196 24 24 18.6196 24 12C24 5.38035 18.6196 0 12 0C5.38035 0 0 5.38035 0 12C0 18.6196 5.38035 24 12 24ZM5.04786 19.466C5.04786 18.8312 5.22922 18.0453 5.86398 17.8942C7.1335 17.5617 8.13098 17.199 8.88665 16.8363C9.64232 17.8035 10.7909 18.3778 12.0302 18.3778C13.2997 18.3778 14.4786 17.7733 15.2343 16.7758C15.9899 17.1688 17.0176 17.5617 18.3778 17.8942C18.5894 17.9547 19.1637 18.1058 19.2242 19.2544C17.3501 21.068 14.8111 22.2166 12 22.2166C9.30982 22.2166 6.86146 21.1587 5.04786 19.466ZM13.9345 12.6348C13.4811 13.1486 12.8766 13.3904 12.0605 13.3904H12.0302C11.2141 13.3904 10.6096 13.1184 10.1562 12.6348C9.15869 11.5164 9.12846 9.34005 9.21914 8.58438C9.21914 8.55416 9.21914 8.55416 9.21914 8.52393C9.2796 7.25441 9.733 6.37783 10.5491 5.92443C11.1234 5.59194 11.728 5.59194 11.9395 5.59194C11.9698 5.59194 12 5.59194 12 5.59194C12.0302 5.59194 12.0605 5.59194 12.0605 5.59194C12.1511 5.59194 12.8463 5.56171 13.5113 5.92443C14.3275 6.37783 14.7809 7.25441 14.8413 8.52393C14.8413 8.55416 14.8413 8.55416 14.8413 8.58438C14.932 9.34005 14.932 11.5164 13.9345 12.6348ZM11.9698 15.204C12 15.204 12 15.204 12.0302 15.204H12.0605H12.0907C12.1209 15.204 12.1209 15.204 12.1511 15.204C12.5441 15.204 12.8766 15.1436 13.2091 15.0831C13.33 15.2947 13.5113 15.5063 13.7531 15.7481C13.33 16.262 12.7254 16.5945 12.0302 16.5945C11.3955 16.5945 10.7909 16.3224 10.398 15.8388C10.67 15.597 10.8816 15.3249 11.0327 15.1133C11.3048 15.1738 11.6373 15.204 11.9698 15.204ZM12 1.78338C17.6222 1.78338 22.2166 6.37783 22.2166 12C22.2166 14.0252 21.6121 15.9295 20.5844 17.5315C20.2217 16.8363 19.6171 16.3526 18.801 16.1411C16.2922 15.5063 15.204 14.7204 14.8111 14.267C14.9622 14.1461 15.1133 13.995 15.2645 13.8438C16.927 11.9698 16.6851 8.8262 16.6549 8.43325C16.4736 4.65491 13.6927 3.74811 12.0605 3.80856C10.4282 3.74811 7.64736 4.68514 7.46599 8.43325C7.43577 8.79597 7.19395 11.9395 8.85642 13.8438C9.00756 14.0252 9.18892 14.2065 9.37028 14.3275C9.30982 14.3577 9.2796 14.3879 9.2796 14.4181C8.8262 14.9018 7.76826 15.5667 5.44081 16.1713C4.56423 16.3829 3.9597 16.9572 3.59698 17.8035C2.47859 16.1713 1.8136 14.1763 1.8136 12.0302C1.78338 6.37783 6.37783 1.78338 12 1.78338Z" fill="#CCCCCC"/>
+</svg>

src/config/lexics/authenticated.tsx

@@ -0,0 +1,4 @@
+export const authenticatedLexics = {
+  logout: 4306,
+  user_account: 12928,
+}

src/features/App/AuthenticatedApp.tsx

@@ -7,34 +7,48 @@ import {
 
 import { PAGES } from 'config'
 
+import { authenticatedLexics } from 'config/lexics/authenticated'
+import { useLexicsConfig } from 'features/LexicsStore'
 import { HomePage } from 'features/HomePage'
 import { TeamPage } from 'features/TeamPage'
 import { MatchPage } from 'features/MatchPage'
 import { PlayerPage } from 'features/PlayerPage'
 import { TournamentPage } from 'features/TournamentPage'
 import { LanguageSelect } from 'features/LanguageSelect'
+import { UserAccount } from 'features/UserAccount'
 
-export const AuthenticatedApp = () => (
-  <Fragment>
-    <LanguageSelect />
-    <Switch>
-      <Route exact path={PAGES.home}>
-        <HomePage />
-      </Route>
-      <Route path={`${PAGES.tournament}/:pageId`}>
-        <TournamentPage />
-      </Route>
-      <Route path={`${PAGES.team}/:pageId`}>
-        <TeamPage />
-      </Route>
-      <Route path={`${PAGES.player}/:pageId`}>
-        <PlayerPage />
-      </Route>
-      <Route path={`${PAGES.match}/:pageId`}>
-        <MatchPage />
-      </Route>
-
-      <Redirect to={PAGES.home} />
-    </Switch>
-  </Fragment>
-)
+export const AuthenticatedApp = () => {
+  useLexicsConfig(authenticatedLexics)
+
+  return (
+    <Fragment>
+      <LanguageSelect />
+      <Switch>
+        <Route exact path={PAGES.home}>
+          <HomePage />
+        </Route>
+
+        <Route path={`${PAGES.tournament}/:pageId`}>
+          <TournamentPage />
+        </Route>
+
+        <Route path={`${PAGES.team}/:pageId`}>
+          <TeamPage />
+        </Route>
+        <Route path={`${PAGES.player}/:pageId`}>
+          <PlayerPage />
+        </Route>
+
+        <Route path={`${PAGES.match}/:pageId`}>
+          <MatchPage />
+        </Route>
+
+        <Route path={PAGES.useraccount}>
+          <UserAccount />
+        </Route>
+
+        <Redirect to={PAGES.home} />
+      </Switch>
+    </Fragment>
+  )
+}

src/features/App/UnauthenticatedApp.tsx

@@ -12,7 +12,6 @@ import { Login } from 'features/Login'
 import { Register } from 'features/Register'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { useLexicsConfig } from 'features/LexicsStore'
-import { UserAccount } from 'features/UserAccount'
 
 export const UnauthenticatedApp = () => {
   useLexicsConfig(publicLexics)
@@ -28,10 +27,6 @@ export const UnauthenticatedApp = () => {
           <Register />
         </Route>
 
-        <Route path={PAGES.useraccount}>
-          <UserAccount />
-        </Route>
-
         <Redirect to={PAGES.login} />
       </Switch>
     </Fragment>

src/features/Menu/index.tsx

@@ -1,9 +1,52 @@
 import React from 'react'
 
-import { Wrapper, ToggleButton } from './styled'
+import { PAGES } from 'config'
+import { useToggle } from 'hooks'
+import { useAuthStore } from 'features/AuthStore'
+import { T9n } from 'features/T9n'
+import { OutsideClick } from 'features/OutsideClick'
 
-export const Menu = () => (
-  <Wrapper>
-    <ToggleButton />
-  </Wrapper>
-)
+import {
+  Wrapper,
+  ToggleButton,
+  MenuList,
+  MenuItem,
+  Icon,
+  StyledLink,
+  linkStyles,
+} from './styled'
+
+export const Menu = () => {
+  const {
+    close,
+    isOpen,
+    open,
+  } = useToggle()
+  const { logout } = useAuthStore()
+
+  return (
+    <OutsideClick onClick={close}>
+      <Wrapper>
+        <ToggleButton onClick={open} />
+        {isOpen && (
+          <MenuList>
+            <MenuItem>
+              <Icon image='userAccount' />
+              <StyledLink to={PAGES.useraccount}>
+                <T9n t='user_account' />
+              </StyledLink>
+            </MenuItem>
+            <MenuItem>
+              <Icon image='logout' />
+              <T9n
+                t='logout'
+                onClick={logout}
+                customStyles={linkStyles}
+              />
+            </MenuItem>
+          </MenuList>
+        )}
+      </Wrapper>
+    </OutsideClick>
+  )
+}

src/features/Menu/styled.tsx

@@ -1,6 +1,9 @@
-import styled from 'styled-components/macro'
+import { Link } from 'react-router-dom'
+
+import styled, { css } from 'styled-components/macro'
 
 export const Wrapper = styled.div`
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -18,3 +21,49 @@ export const ToggleButton = styled.button`
   outline: none;
   cursor: pointer;
 `
+export const MenuList = styled.ul`
+  position: absolute;
+  top: 45px;
+  width: 288px;
+  border-radius: 2px;
+  background-color: #666;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 12px;
+    height: 12px;
+    transform: translate(-50%, -50%) rotate(45deg);
+    background-color: #666;
+  }
+`
+export const MenuItem = styled.li`
+  position: relative;
+  display: flex;
+  height: 48px;
+  line-height: 48px;
+  cursor: pointer;
+
+  :hover {
+    background-color: #999;
+  }
+`
+
+export const Icon = styled.div<{ image: string }>`
+  width: 55px;
+  background-image: url(/images/${({ image }) => `${image}.svg`});
+  background-repeat: no-repeat;
+  background-position: center;
+`
+
+export const linkStyles = css`
+  width: 100%;
+  font-size: 16px;
+  font-weight: bold;
+  color: #ccc;
+`
+
+export const StyledLink = styled(Link)`${linkStyles}`

src/features/T9n/index.tsx

@@ -1,16 +1,32 @@
 import React from 'react'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { useLexicsStore } from 'features/LexicsStore'
 
-const Text = styled.span``
+type TCustomStyles = { customStyles?: string | ReturnType<typeof css> }
 
-type Props = {
-  className?: string,
+const Text = styled.span<TCustomStyles>`
+  ${({ customStyles }) => customStyles}
+`
+
+type TT9n = {
+  onClick?: () => void,
   t: string | number,
-}
+} & TCustomStyles
 
-export const T9n = ({ className, t }: Props) => {
+export const T9n = ({
+  customStyles,
+  onClick,
+  t,
+}: TT9n) => {
   const { translate } = useLexicsStore()
-  return <Text className={className}>{translate(String(t))}</Text>
+
+  return (
+    <Text
+      onClick={onClick}
+      customStyles={customStyles}
+    >
+      {translate(String(t))}
+    </Text>
+  )
 }