diff --git a/public/images/logout.svg b/public/images/logout.svg
new file mode 100644
index 00000000..d2219dcc
--- /dev/null
+++ b/public/images/logout.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/images/userAccount.svg b/public/images/userAccount.svg
new file mode 100644
index 00000000..0d1fcdb7
--- /dev/null
+++ b/public/images/userAccount.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/config/lexics/authenticated.tsx b/src/config/lexics/authenticated.tsx
new file mode 100644
index 00000000..67ae1d09
--- /dev/null
+++ b/src/config/lexics/authenticated.tsx
@@ -0,0 +1,4 @@
+export const authenticatedLexics = {
+ logout: 4306,
+ user_account: 12928,
+}
diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx
index ef677883..4532d265 100644
--- a/src/features/App/AuthenticatedApp.tsx
+++ b/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 = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-)
+export const AuthenticatedApp = () => {
+ useLexicsConfig(authenticatedLexics)
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/App/UnauthenticatedApp.tsx b/src/features/App/UnauthenticatedApp.tsx
index f63a7029..90b464bb 100644
--- a/src/features/App/UnauthenticatedApp.tsx
+++ b/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 = () => {
-
-
-
-
diff --git a/src/features/Menu/index.tsx b/src/features/Menu/index.tsx
index 721b532b..c40cf03f 100644
--- a/src/features/Menu/index.tsx
+++ b/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 = () => (
-
-
-
-)
+import {
+ Wrapper,
+ ToggleButton,
+ MenuList,
+ MenuItem,
+ Icon,
+ StyledLink,
+ linkStyles,
+} from './styled'
+
+export const Menu = () => {
+ const {
+ close,
+ isOpen,
+ open,
+ } = useToggle()
+ const { logout } = useAuthStore()
+
+ return (
+
+
+
+ {isOpen && (
+
+
+
+
+ )}
+
+
+ )
+}
diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx
index ff6fc9bb..0a9fc0fa 100644
--- a/src/features/Menu/styled.tsx
+++ b/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}`
diff --git a/src/features/T9n/index.tsx b/src/features/T9n/index.tsx
index de76fe61..8346c52d 100644
--- a/src/features/T9n/index.tsx
+++ b/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 }
-type Props = {
- className?: string,
+const Text = styled.span`
+ ${({ 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 {translate(String(t))}
+
+ return (
+
+ {translate(String(t))}
+
+ )
}