footer

public/css/global.css

@@ -31,7 +31,7 @@ a {
   font-weight: 400;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 1rem;
-  color: #333;
+  color: #009aa8;
 }
 
 #root {

src/components/footer/Slider.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Slider from "@material-ui/core/Slider";
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    width: 825,
+    width: "100%",
   },
   margin: {
     height: theme.spacing(1),
   },
 }));
 
-export default function TrackInvertedSlider({CountPage}) {
+export default function TrackInvertedSlider({ value, max }) {
   const classes = useStyles();
 
   return (
@@ -22,8 +22,8 @@ export default function TrackInvertedSlider({CountPage}) {
         // value={CountPage}
         track="inverted"
         aria-labelledby="track-inverted-range-slider"
-        value={1 - CountPage}
-        max={100}
+        value={max - value}
+        max={max}
       />
     </div>
   );

src/components/footer/progressBar.js

@@ -3,10 +3,10 @@ import "components/style/slider.scss";
 import Slider from "./Slider";
 
 export default function ProgressBar(props) {
-  const { CountPage } = props;
+  const { value, max } = props;
   return (
     <>
-      <Slider CountPage={CountPage} />
+      <Slider value={value} max={max} />
     </>
   );
 }

src/components/sideMenu/Wrapper.tsx

@@ -24,6 +24,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   position: fixed;
+  padding:5px;
   width: 340px;
   max-width: 95vw;
   height: 100vh;

src/components/style/footerStyle.scss

@@ -18,11 +18,17 @@
     padding: 0 5px;
     align-items: center;
     margin-bottom: 5px;
+    .icon{
+      width: 25px;
+      margin-left: 1rem;
+    }
   }
 }
 
 .nav-footer-item{
-  margin-right: 1.5rem;
+  margin: auto;
+  min-width:80px;
+
 }
 
 .active{

src/containers/Footer.tsx

@@ -62,28 +62,74 @@ const Footer = ({
   //   }
   //   setToggleIcon(false);
   // };
+  let isMobile = window.innerWidth <= 768
   return (
-    <>
-      <Wrapper>
-        <nav
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            padding: "0rem 2rem",
-            width: "100%",
-          }}
+    <nav className="nav-footer"
+    // style={{display: isMobile?"":"flex"   }}
     >
+      <nav className="footer-item">
+
+        <>
+
           <nav className="nav-footer-item" id="toggler">
-            <Item text={`${nowPage} / ${totalPage}`} />
+            <Item text={`${nowPage} / ${101}`} />
+          </nav>
+          <nav style={{ direction: "rtl", flex: 1 }}>
+            <ProgressBar value={nowPage} max={100} />
+          </nav>
+          {isMobile ? (
+
+
+            <>
+              <nav className="icon" >
+                <BookCloseIcon onClick={() => onBookOptionChange({
+                  ...bookOption,
+                  flow: "scrolled-doc",
+                })
+                }
+                />
+              </nav>
+              <nav className="icon" >
+                <ScrollVerticalIcon onClick={() => onBookOptionChange({
+                  ...bookOption,
+                  flow: "paginated"
+                })
+                }
+                />
+              </nav>
+
+            </>
+
+
+          ) : (
+            <>
+              <nav className="icon" >
+                <BookOpenIcon onClick={() => onBookOptionChange({
+                  ...bookOption,
+                  flow: "paginated"
+                })
+                }
+                />
               </nav>
-          <nav style={{ direction: "rtl" }}>
-            <ProgressBar CountPage={CountPage} />
+              <nav className="icon" >
+                <BookCloseIcon onClick={() => onBookOptionChange({
+                  ...bookOption,
+                  flow: "paginated"
+                })
+                }
+                />
+              </nav>
+              <nav className="icon" >
+                <ScrollVerticalIcon onClick={() => onBookOptionChange({
+                  ...bookOption,
+                  flow: "paginated"
+                })
+                }
+                />
               </nav>
 
-          {/* icons in desktop setting */}
+              {/* <nav className="nav-icon">
 
-          <nav className="nav-icon">
-            {window.innerWidth > 768 ? (
                 <div className="display-icon" style={{ cursor: "pointer" }}>
                   <nav
                     style={{ width: "65px", marginLeft: "1rem", display: "flex" }}
@@ -94,7 +140,7 @@ const Footer = ({
                       }}
                       className={`${viewType.spread ? "active" : ''}`}
                     >
-                    <BookOpenIcon onClick={() => !scrollToggle ?  onClickViewType(true) : null } />
+                      <BookOpenIcon onClick={() => !scrollToggle ? onClickViewType(true) : null} />
                     </nav>
                     <nav
                       style={{
@@ -104,7 +150,7 @@ const Footer = ({
                     >
                       <BookCloseIcon onClick={() => onClickViewType(false)} />
                     </nav>
-                  {scrollToggle ? (
+
                     <nav
                       style={{ width: "65px" }}
                       onClick={() => setScrollToggle(!scrollToggle)}
@@ -118,10 +164,10 @@ const Footer = ({
                         }
                       />
                     </nav>
-                  ) : (
+
                     <nav
                       style={{ width: "65px" }}
-                      onClick={() => !viewType.spread ? setScrollToggle(!scrollToggle) :setScrollToggle(false) }
+                      onClick={() => !viewType.spread ? setScrollToggle(!scrollToggle) : setScrollToggle(false)}
                     >
                       <ScrollHorizontalIcon
                         onClick={() =>
@@ -132,75 +178,23 @@ const Footer = ({
                         }
                       />
                     </nav>
-                  )}
+
                   </nav>
                 </div>
-            ) : (
-              ""
-            )}
-          </nav>
-        </nav>
-      </Wrapper>
-
-      {/* mobile icon footer */}
 
-      {window.innerWidth <= 768 ? (
-        <>
-          <nav className="nav-footer">
-            <nav className="footer-item">
-              <nav className="nav-footer-item" id="toggler">
-                <Item text={`${nowPage} / ${100}`} />
               </nav>
-              <ProgressBar CountPage={CountPage} />
-
-              {/* icons in right of pages setting */}
+           */}  </>
 
-              <nav
-                style={{
-                  width: "25px",
-                  marginLeft: "1rem",
-                }}
-              >
-                <ScrollVerticalIcon
-                  onClick={() =>
-                    onBookOptionChange({
-                      ...bookOption,
-                      flow: "paginated",
-                    })
-                  }
-                />
-              </nav>
-              <nav style={{ width: "25px", marginLeft: "1rem" }}>
-                <ScrollHorizontalIcon
-                  onClick={() =>
-                    onBookOptionChange({
-                      ...bookOption,
-                      flow: "scrolled-doc",
-                    })
-                  }
-                />
-              </nav>
-            </nav>
-            <Button>خرید کتاب</Button>
-          </nav>
-        </>
-      ) : (
-        ""
           )}
         </>
+      </nav>
+      {isMobile ? <Button>خرید کتاب</Button> : null}
+
+    </nav>
   );
 };
 
-const Icon = styled.div`
-  width: 16px;
-  height: 16px;
 
-  & > div,
-  & > svg {
-    width: 16px;
-    height: 16px;
-  }
-`;
 
 const Button = styled.button`
   width: 100%;

src/containers/menu/Note.tsx

@@ -38,7 +38,7 @@ const Note = (
     <>
       {control.display && (
         <Wrapper
-          title="نشانه گذار"
+          title="نشانه گذاری"
           show={control.open}
           onClose={onToggle}
           ref={ref}

src/lib/styles/readerStyle.css

@@ -26,6 +26,7 @@ input {
 }
 
 .nav-book{
+	flex:1;
 	overflow: hidden;
 	color: red !important;
 }