taha12322 3 years ago
parent 9e2ece9d48
commit 2de1868c05
  1. 6
      public/images/Edit.svg
  2. 4
      public/images/Setting.svg
  3. 12
      src/components/header/ControlBtn.tsx
  4. 6
      src/components/header/Edit.svg
  5. 4
      src/components/header/Logo.tsx
  6. 25
      src/containers/Header.tsx

@ -1,7 +1,7 @@
<svg id="Iconly_Curved_Edit" data-name="Iconly/Curved/Edit" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Edit" transform="translate(3.5 3.5)">
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 973 B

After

Width:  |  Height:  |  Size: 973 B

@ -1,6 +1,6 @@
<svg id="Iconly_Curved_Setting" data-name="Iconly/Curved/Setting" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Setting" transform="translate(3.5 2.5)">
<path id="Stroke_1" data-name="Stroke 1" d="M2.5,0A2.5,2.5,0,1,1,0,2.5,2.5,2.5,0,0,1,2.5,0Z" transform="translate(6 7)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M16.668,4.75h0a2.464,2.464,0,0,0-3.379-.912,1.543,1.543,0,0,1-2.314-1.346A2.484,2.484,0,0,0,8.5,0h0A2.484,2.484,0,0,0,6.025,2.492,1.543,1.543,0,0,1,3.712,3.839a2.465,2.465,0,0,0-3.38.912,2.5,2.5,0,0,0,.906,3.4,1.56,1.56,0,0,1,0,2.692,2.5,2.5,0,0,0-.906,3.4,2.465,2.465,0,0,0,3.379.913h0a1.542,1.542,0,0,1,2.313,1.345h0A2.484,2.484,0,0,0,8.5,19h0a2.484,2.484,0,0,0,2.474-2.492h0a1.543,1.543,0,0,1,2.314-1.345,2.465,2.465,0,0,0,3.379-.913,2.5,2.5,0,0,0-.905-3.4h0a1.56,1.56,0,0,1,0-2.692A2.5,2.5,0,0,0,16.668,4.75Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_1" data-name="Stroke 1" d="M2.5,0A2.5,2.5,0,1,1,0,2.5,2.5,2.5,0,0,1,2.5,0Z" transform="translate(6 7)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M16.668,4.75h0a2.464,2.464,0,0,0-3.379-.912,1.543,1.543,0,0,1-2.314-1.346A2.484,2.484,0,0,0,8.5,0h0A2.484,2.484,0,0,0,6.025,2.492,1.543,1.543,0,0,1,3.712,3.839a2.465,2.465,0,0,0-3.38.912,2.5,2.5,0,0,0,.906,3.4,1.56,1.56,0,0,1,0,2.692,2.5,2.5,0,0,0-.906,3.4,2.465,2.465,0,0,0,3.379.913h0a1.542,1.542,0,0,1,2.313,1.345h0A2.484,2.484,0,0,0,8.5,19h0a2.484,2.484,0,0,0,2.474-2.492h0a1.543,1.543,0,0,1,2.314-1.345,2.465,2.465,0,0,0,3.379-.913,2.5,2.5,0,0,0-.905-3.4h0a1.56,1.56,0,0,1,0-2.692A2.5,2.5,0,0,0,16.668,4.75Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -3,12 +3,17 @@ import styled from "styled-components";
import * as styles from "lib/styles/styles";
import palette from "lib/styles/palette";
const ControlBtn = ({ massege, onClick }: Props) => {
return <Btn onClick={() => onClick()}>{massege}</Btn>;
const ControlBtn = ({ src , onClick }: Props) => {
return (
<>
<Img src='' onClick={() => onClick()} />
</>
);
};
const Img = styled.img`
height: 44px;
cursor: pointer;
`;
const Btn = styled.button`
@ -32,7 +37,8 @@ const Btn = styled.button`
`;
interface Props {
massege: String;
src: String;
// massege: String;
onClick: (value?: boolean) => void;
}

@ -1,7 +1,7 @@
<svg id="Iconly_Curved_Edit" data-name="Iconly/Curved/Edit" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Edit" transform="translate(3.5 3.5)">
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 973 B

After

Width:  |  Height:  |  Size: 973 B

@ -17,7 +17,6 @@ const Wrapper = styled.a`
align-items: center;
justify-content: center;
outline: none;
margin-right: 16px;
background-color: #009AA8;
transition: .2s ${styles.transition};
border-radius: 8px;
@ -30,7 +29,8 @@ const Wrapper = styled.a`
`;
const Img = styled.img`
height: 44px;
height: 30px;
cursor: pointer;
`;
export default Logo

@ -1,4 +1,5 @@
// components
import styled from "styled-components";
import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo";
@ -9,18 +10,30 @@ const Header = ({ onNavToggle, onOptionToggle, onLearningToggle }: Props) => {
<Wrapper>
<Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}>
<div>
<ControlBtn massege='فهرست' onClick={onNavToggle} />
<ControlBtn massege='تنظیمات' onClick={onOptionToggle} />
<ControlBtn massege='نشانه گذاری' onClick={onLearningToggle} />
</div>
<Logo />
<nav style={{ display: "flex", marginLeft: "16px" }}>
<Img src="/react-epub-viewer/images/Setting.svg" onClick={onOptionToggle as any} alt="Logo" />
<Img src="/react-epub-viewer/images/Edit.svg" alt="Logo" onClick={onLearningToggle as any} />
</nav>
<nav style={{ display: "flex", marginRight: "16px" }}>
<Logo />
<Img
src="/react-epub-viewer/images/menu.svg"
onClick={onNavToggle as any}
alt="Logo"
/>
</nav>
{/* <ControlBtn massege="فهرست" onClick={onNavToggle} /> */}
{/* <ControlBtn massege="تنظیمات" onClick={onOptionToggle} />
<ControlBtn massege="نشانه گذاری" onClick={onLearningToggle} /> */}
</AutoLayout>
</Layout>
</Wrapper>
);
};
const Img = styled.img`
width: 25px;
`;
interface Props {
onNavToggle: (value?: boolean) => void;
onOptionToggle: (value?: boolean) => void;

Loading…
Cancel
Save