feat(890): added header menus to user account (#323)

src/config/lexics/userAccount.tsx

@@ -1,5 +1,12 @@
 import { publicLexics } from 'config/lexics/public'
 
+const navigations = {
+  bank_card: 14205,
+  my_subscriptions: 8316,
+  payment_history: 14206,
+  personal_info: 14204,
+}
+
 export const userAccountLexics = {
   add_card: 8313,
   change: 12614,
@@ -18,5 +25,6 @@ export const userAccountLexics = {
   select_subscription: 12583,
   subscriptions: 13016,
   user_account: 12928,
+  ...navigations,
   ...publicLexics,
 }

src/features/Menu/index.tsx

@@ -15,6 +15,7 @@ import {
 export const Menu = () => {
   const { logout } = useAuthStore()
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
+  const isUserAccount = useRouteMatch(PAGES.useraccount)
 
   return (
     <Nav>
@@ -30,13 +31,15 @@ export const Menu = () => {
             </MenuItem>
           )
         }
-        <MenuItem>
-          <Tooltip lexic='user_account'>
-            <Link to={`${PAGES.useraccount}/personal-info`}>
-              <Icon image='userAccount' />
-            </Link>
-          </Tooltip>
-        </MenuItem>
+        {!isUserAccount && (
+          <MenuItem>
+            <Tooltip lexic='user_account'>
+              <Link to={`${PAGES.useraccount}/personal-info`}>
+                <Icon image='userAccount' />
+              </Link>
+            </Tooltip>
+          </MenuItem>
+        )}
         <MenuItem onClick={logout}>
           <Tooltip lexic='logout'>
             <Icon image='logout' />

src/features/UserAccount/components/Header/index.tsx

@@ -0,0 +1,39 @@
+import { Link } from 'react-router-dom'
+
+import styled from 'styled-components/macro'
+
+import { devices, PAGES } from 'config'
+
+import { LanguageSelect } from 'features/LanguageSelect'
+import { HeaderGroup, MenuWrapper } from 'features/ProfileHeader/styled'
+import { Menu } from 'features/Menu'
+
+import { Logo } from 'features/Logo'
+
+const HeaderStyled = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 45px;
+  height: 50px;
+
+  @media ${devices.tablet} {
+    margin-bottom: 20px;
+  }
+`
+
+export const Header = () => (
+  <HeaderStyled>
+    <HeaderGroup>
+      <Link to={PAGES.home}>
+        <Logo />
+      </Link>
+    </HeaderGroup>
+    <HeaderGroup>
+      <MenuWrapper>
+        <Menu />
+      </MenuWrapper>
+      <LanguageSelect />
+    </HeaderGroup>
+  </HeaderStyled>
+)

src/features/UserAccount/index.tsx

@@ -1,11 +1,12 @@
-import { Link, Route } from 'react-router-dom'
+import { Route } from 'react-router-dom'
 
 import { PAGES } from 'config'
 import { userAccountLexics } from 'config/lexics/userAccount'
 
 import { useLexicsConfig } from 'features/LexicsStore'
-import { Logo } from 'features/Logo'
+import { T9n } from 'features/T9n'
 
+import { Header } from './components/Header'
 import { PagePersonalInfo } from './components/PagePersonalInfo'
 import { PageBankCards } from './components/PageBankCards'
 import { PageSubscriptions } from './components/PageSubscriptions'
@@ -13,9 +14,9 @@ import { PagePaymentsHistory } from './components/PagePaymentsHistory'
 import {
   UserAccountWrapper,
   ContentWrapper,
+  Body,
   Aside,
   Navigations,
-  LogoWrapper,
   StyledLink,
 } from './styled'
 
@@ -24,41 +25,39 @@ const UserAccount = () => {
 
   return (
     <UserAccountWrapper>
-      <Aside>
-        <LogoWrapper>
-          <Link to={PAGES.home}>
-            <Logo />
-          </Link>
-        </LogoWrapper>
-        <Navigations>
-          <StyledLink to={`${PAGES.useraccount}/personal-info`}>
-            Личная информация
-          </StyledLink>
-          <StyledLink to={`${PAGES.useraccount}/bank-cards`}>
-            Банковские карты
-          </StyledLink>
-          <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
-            Мои подписки
-          </StyledLink>
-          <StyledLink to={`${PAGES.useraccount}/payment-history`}>
-            История платежей
-          </StyledLink>
-        </Navigations>
-      </Aside>
-      <ContentWrapper>
-        <Route path={`${PAGES.useraccount}/personal-info`}>
-          <PagePersonalInfo />
-        </Route>
-        <Route path={`${PAGES.useraccount}/bank-cards`}>
-          <PageBankCards />
-        </Route>
-        <Route path={`${PAGES.useraccount}/subscriptions`}>
-          <PageSubscriptions />
-        </Route>
-        <Route path={`${PAGES.useraccount}/payment-history`}>
-          <PagePaymentsHistory />
-        </Route>
-      </ContentWrapper>
+      <Header />
+      <Body>
+        <Aside>
+          <Navigations>
+            <StyledLink to={`${PAGES.useraccount}/personal-info`}>
+              <T9n t='personal_info' />
+            </StyledLink>
+            <StyledLink to={`${PAGES.useraccount}/bank-cards`}>
+              <T9n t='bank_card' />
+            </StyledLink>
+            <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
+              <T9n t='my_subscriptions' />
+            </StyledLink>
+            <StyledLink to={`${PAGES.useraccount}/payment-history`}>
+              <T9n t='payment_history' />
+            </StyledLink>
+          </Navigations>
+        </Aside>
+        <ContentWrapper>
+          <Route path={`${PAGES.useraccount}/personal-info`}>
+            <PagePersonalInfo />
+          </Route>
+          <Route path={`${PAGES.useraccount}/bank-cards`}>
+            <PageBankCards />
+          </Route>
+          <Route path={`${PAGES.useraccount}/subscriptions`}>
+            <PageSubscriptions />
+          </Route>
+          <Route path={`${PAGES.useraccount}/payment-history`}>
+            <PagePaymentsHistory />
+          </Route>
+        </ContentWrapper>
+      </Body>
     </UserAccountWrapper>
   )
 }

src/features/UserAccount/styled.tsx

@@ -59,7 +59,7 @@ export const Icon = styled.span<IconProps>`
 export const ContentWrapper = styled.div`
   width: 100%;
   display: flex;
-  padding-top: 116px;
+  padding-top: 26px;
   padding-left: 70px;
 
   @media ${devices.tablet} {
@@ -72,31 +72,30 @@ export const UserAccountWrapper = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
-  padding: 70px 0 70px 70px;
+  flex-direction: column;
+  padding: 30px 30px 70px 70px;
 
   @media ${devices.laptop} {
     justify-self: flex-start;
-    width: 100%;
   }
 
   @media ${devices.tablet} {
     justify-self: center;
-    flex-direction: column;
     width: auto;
-    padding: 70px 20px 70px 20px;
+    padding: 0px 20px 70px 20px;
   }
 `
 
-export const Aside = styled.aside``
-
-export const LogoWrapper = styled.div`
-  margin-bottom: 50px;
+export const Body = styled.div`
+  display: flex;
 
   @media ${devices.tablet} {
-    margin-bottom: 20px;
+    flex-direction: column;
   }
 `
 
+export const Aside = styled.aside``
+
 export const Navigations = styled.nav`
   width: 388px;
   height: 622px;