icon uploded

tree icon add to footer
demo
taha12322 3 years ago
parent dc75dd168a
commit d5922b785e
  1. BIN
      src/components/image/noneScroll.png
  2. BIN
      src/components/image/scroll.png
  3. 26
      src/containers/Footer.tsx
  4. 4
      src/containers/menu/Option.tsx

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -7,6 +7,7 @@ import styled from "styled-components";
import ProgressBar from "../components/footer/progressBar"; import ProgressBar from "../components/footer/progressBar";
import onePage from "../components/image/Document.svg"; import onePage from "../components/image/Document.svg";
import twoPage from "../components/image/Pages.svg"; import twoPage from "../components/image/Pages.svg";
import { BookCloseIcon, BookOpenIcon, ScrollVerticalIcon } from "lib/svg";
const Footer = ({ const Footer = ({
// title, // title,
@ -35,14 +36,14 @@ const Footer = ({
<Item text={`${nowPage} / ${totalPage}`} /> <Item text={`${nowPage} / ${totalPage}`} />
</nav> </nav>
<ProgressBar CountPage={CountPage} /> <ProgressBar CountPage={CountPage} />
<nav <nav onClick={() => changeIcone()} className="nav-icon ">
// style={{pointer='cruser'}}
onClick={() => changeIcone()}
className="nav-icon "
>
{window.innerWidth > 768 ? ( {window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}> <div className="display-icon" style={{ cursor: "pointer" }}>
{Icon ? <img src={onePage} alt='singlepage' /> : <img src={twoPage} alt='twopages' />} <nav style={{ width: "65px" , display: 'flex' }}>
<BookOpenIcon />
<BookCloseIcon />
<ScrollVerticalIcon />
</nav>
</div> </div>
) : null} ) : null}
</nav> </nav>
@ -53,6 +54,17 @@ const Footer = ({
); );
}; };
const Icon = styled.div`
width: 16px;
height: 16px;
& > div,
& > svg {
width: 16px;
height: 16px;
}
`;
const Button = styled.button` const Button = styled.button`
width: 100%; width: 100%;
justify-content: center; justify-content: center;

@ -200,7 +200,7 @@ const Option = (
step={0.1} step={0.1}
onChange={(e) => onChangeSlider("LineHeight", e)} onChange={(e) => onChangeSlider("LineHeight", e)}
/> />
<OptionTitle>رنگ ها</OptionTitle> {/* <OptionTitle>رنگ ها</OptionTitle>
<BtnWrapper> <BtnWrapper>
<Btn>الف</Btn> <Btn>الف</Btn>
<Btn>الف</Btn> <Btn>الف</Btn>
@ -212,7 +212,7 @@ const Option = (
<Btn>الف</Btn> <Btn>الف</Btn>
<Btn>الف</Btn> <Btn>الف</Btn>
<Btn>الف</Btn> <Btn>الف</Btn>
</BtnWrapper> </BtnWrapper> */}
{/* <OptionSlider {/* <OptionSlider
active={true} active={true}
title="Horizontal margin" title="Horizontal margin"

Loading…
Cancel
Save