feat(ott-139): header (#25)

public/images/menuIcon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="2" rx="0.5" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.5"/>
+<rect x="1" y="8" width="18" height="2" rx="0.5" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.5"/>
+<rect x="1" y="15" width="18" height="2" rx="0.5" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.5"/>
+</svg>

src/features/Header/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { Menu } from 'features/Menu'
+
+import { Wrapper } from './styled'
+
+export const Header = () => (
+  <Wrapper>
+    <Menu />
+  </Wrapper>
+)

src/features/Header/styled.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.header`
+  display: flex;
+  padding-top: 16px;
+`

src/features/HomePage/index.tsx

@@ -1,33 +1,10 @@
 import React from 'react'
 
-import styled from 'styled-components/macro'
+import { Header } from 'features/Header'
+import { MainWrapper } from 'features/MainWrapper'
 
-import { Logo } from 'features/Logo'
+export const HomePage = () => (
-import { CenterBlock } from 'features/Login/styled'
+  <MainWrapper>
-import { useAuthStore } from 'features/AuthStore'
+    <Header />
-
+  </MainWrapper>
-// временные компоненты
-const TempContainer = styled.div`
-  margin-top: 50px;
-  color: white;
-  font-size: 20px;
-  display: flex;
-  flex-direction: column;
-`
-
-const TempPageTitle = styled.span`
-  margin: 20px 0;
-`
-
-export const HomePage = () => {
-  const { logout } = useAuthStore()
-  return (
-    <CenterBlock>
-      <Logo />
-      <TempContainer>
-        <TempPageTitle>HOME PAGE</TempPageTitle>
-        <button type='button' onClick={logout}>Logout</button>
-      </TempContainer>
-    </CenterBlock>
 )
-}

src/features/MainWrapper/index.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components/macro'
+
+export const MainWrapper = styled.div`
+  width: 100%;
+  padding-left: 80px;
+`

src/features/Menu/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { Wrapper, ToggleButton } from './styled'
+
+export const Menu = () => (
+  <Wrapper>
+    <ToggleButton />
+  </Wrapper>
+)

src/features/Menu/styled.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 304px;
+  height: 48px;
+`
+export const ToggleButton = styled.button`
+  width: 18px;
+  height: 16px;
+  background-image: url(/images/menuIcon.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+`