pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Nav Bar Made

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 7dc86f0731
commit 600b04b4f9
5 changed files with 143 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.js
  2. 96
      src/components/nav/Nav.js
  3. 7
      src/components/verificationInput/index.js
  4. 73
      src/view/LoginSignUp/index.js
  5. 2
      tailwind.config.js

2
src/App.js
Unescape View File

@ -617,7 +617,7 @@ function App() {
}
}
}
const [LOGIN,setLOGIN]=useState(false);
const [LOGIN,setLOGIN]=useState(true);
const activeLogin=()=>{
setLOGIN(true);
}

96
src/components/nav/Nav.js
Unescape View File

@ -13,36 +13,37 @@ import { Link } from "react-router-dom";
// let oldNavItemId = 1;
let location = window.location.pathname;
let initai_navId = 1;
if (location.includes("accounting")) {
initai_navId = 2;
} else if (location.includes("messages")) {
initai_navId = 5;
}
// if (location.includes("accounting")) {
// initai_navId = 2;
// } else if (location.includes("messages")) {
// initai_navId = 5;
// }
const Nav = ({ logOut }) => {
const [navId, setNavId] = useState(initai_navId);
const chaneNav = (id) => {
setNavId(id);
let top = ((1 + id) / 8) * 100;
// console.log(top);
let top = 100/6 + (id-1) * 100/6 * 3/4;
console.log(top)
document.querySelector(".back-item-img").style.top = `${top}%`;
};
return (
<div className="nav h-full w-[6.5%] absolute top-0 right-0 z-20 overflow-hidden bg-white border-l border-l-color1">
<img src={logo} alt="logo" className="logo w-full h-1/4" />
<div className="nav h-full w-[6.5%] absolute top-0 right-0 z-20 overflow-hidden bg-grayEC border-l border-l-color1">
<img src={logo} alt="logo" className="logo w-full h-1/6" />
<div
className="back-item-img w-full h-[12.5%] bg-color2 absolute right-0 top-1/4 z-20 transition-all duration-300"
className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0 z-20 transition-all duration-300"
style={
initai_navId === 2
? { top: `${(3 / 8) * 100}%` }
? { top: `${(3 / 12) * 100}%` }
: initai_navId === 5
? { top: `${(6 / 8) * 100}%` }
: null
? { top: `${(6 / 12) * 100}%` }
:
null
}
></div>
{/* ------------ */}
<div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 top-1/4 right-0">
<div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 right-0">
<Link
to="/dashboard"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
@ -181,11 +182,38 @@ const Nav = ({ logOut }) => {
</div>
</Link>
{/* ---------- */}
<Link
to="/settings"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(3)}
>
<svg id="vuesax_linear_setting-2" data-name="vuesax/linear/setting-2" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="setting-2">
<path id="Vector" d="M11.523,5.761A5.761,5.761,0,1,1,5.761,0,5.761,5.761,0,0,1,11.523,5.761Z" transform="translate(17.284 17.284)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-2" data-name="Vector" d="M0,19.817v-3.38a3.66,3.66,0,0,1,3.649-3.649c3.476,0,4.9-2.458,3.15-5.473A3.647,3.647,0,0,1,8.143,2.341L11.465.44a3.205,3.205,0,0,1,4.379,1.152l.211.365c1.728,3.015,4.571,3.015,6.318,0l.211-.365A3.205,3.205,0,0,1,26.963.44l3.322,1.9A3.647,3.647,0,0,1,31.63,7.315c-1.748,3.015-.326,5.473,3.15,5.473a3.66,3.66,0,0,1,3.649,3.649v3.38a3.66,3.66,0,0,1-3.649,3.649c-3.476,0-4.9,2.458-3.15,5.473a3.643,3.643,0,0,1-1.344,4.974l-3.322,1.9a3.205,3.205,0,0,1-4.379-1.152l-.211-.365c-1.728-3.015-4.571-3.015-6.318,0l-.211.365a3.205,3.205,0,0,1-4.379,1.152l-3.322-1.9A3.647,3.647,0,0,1,6.8,28.939c1.748-3.015.326-5.473-3.15-5.473A3.66,3.66,0,0,1,0,19.817Z" transform="translate(3.841 4.919)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-3" data-name="Vector" d="M0,0H46.091V46.091H0Z" fill="none" opacity="0" />
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={3 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
خدمات من
</div>
</Link>
{/* ---------- */}
<Link
to="/messages"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(3)}
onClick={() => chaneNav(4)}
>
<svg
id="vuesax_linear_sms"
@ -202,7 +230,7 @@ const Nav = ({ logOut }) => {
d="M28.807,32.648H9.6c-5.761,0-9.6-2.881-9.6-9.6V9.6C0,2.881,3.841,0,9.6,0h19.2c5.761,0,9.6,2.881,9.6,9.6V23.046C38.409,29.767,34.568,32.648,28.807,32.648Z"
transform="translate(3.841 6.722)"
fill="none"
stroke={navId === 3 ? "#fff" : "#a5a8ab"}
stroke={navId === 4 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
@ -213,7 +241,7 @@ const Nav = ({ logOut }) => {
d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0"
transform="translate(13.443 17.284)"
fill="none"
stroke={navId === 3 ? "#fff" : "#a5a8ab"}
stroke={navId === 4 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
@ -229,12 +257,42 @@ const Nav = ({ logOut }) => {
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={3 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
style={4 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
پیام‌ها
پشتیبانی
</div>
</Link>
{/* ---------- */}
<Link
to="/contacts"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(5)}
>
<svg id="vuesax_linear_calculator" data-name="vuesax/linear/calculator" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="calculator" transform="translate(0)">
<path id="Vector" d="M13.443,38.409h7.682c9.6,0,13.443-3.841,13.443-13.443V13.443C34.568,3.841,30.727,0,21.125,0H13.443C3.841,0,0,3.841,0,13.443V24.966C0,34.568,3.841,38.409,13.443,38.409Z" transform="translate(5.761 3.841)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-2" data-name="Vector" d="M17.284,2.881V4.8A2.889,2.889,0,0,1,14.4,7.682H2.881A2.889,2.889,0,0,1,0,4.8V2.881A2.889,2.889,0,0,1,2.881,0H14.4A2.877,2.877,0,0,1,17.284,2.881Z" transform="translate(14.403 11.676)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-3" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-4" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-5" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-6" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-7" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-8" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-9" data-name="Vector" d="M0,0H46.091V46.091H0Z" transform="translate(46.091 46.091) rotate(180)" fill="none" opacity="0" />
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={5 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
اطلاعات تماس
</div>
</Link>
<Link
to="/"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"

7
src/components/verificationInput/index.js
Unescape View File

@ -1,5 +1,4 @@
import React from 'react';
import './VerificationInput.css';
export default class VerificationInput extends React.Component {
@ -10,17 +9,11 @@ export default class VerificationInput extends React.Component {
const handleChange = e => {
const { maxLength, value, name } = e.target;
const [fieldName, fieldIndex] = name.split("-");
// Check if they hit the max character length
if (value.length >= maxLength) {
// Check if it's not the last input field
if (parseInt(fieldIndex, 10) < 4) {
// Get the next input field
const nextSibling = document.querySelector(
`input[name=ssn-${parseInt(fieldIndex, 10) + 1}]`
);
// If found, focus the next field
if (nextSibling !== null) {
nextSibling.focus();
}

73
src/view/LoginSignUp/index.js
Unescape View File

@ -11,7 +11,7 @@ import VerificationInput from "../../components/verificationInput";
const LoginSignUp = ({ activeLogin }) => {
const [steps, setSteps] = useState(0);
const [index, setIndex] = useState(0);
const [index, setIndex] = useState(1);
const timeoutRef = useRef(null);
@ -47,10 +47,13 @@ const LoginSignUp = ({ activeLogin }) => {
useEffect(() => {
resetTimeout();
timeoutRef.current = setTimeout(
() =>
setIndex((prevIndex) =>
prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
),
() =>{setIndex((prevIndex) =>prevIndex + 1
// prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
)
if(index === slideContents.length)
setTimeout(setIndex(1),1000)
},
delay
);
@ -72,7 +75,48 @@ const LoginSignUp = ({ activeLogin }) => {
description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
},
{
id: 1,
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},
{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
@ -163,7 +207,16 @@ const LoginSignUp = ({ activeLogin }) => {
<div style={{ direction: 'ltr' }} className="w-full mt-6">
<VerificationInput />
</div>
<Link
to="/dashboard"
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4"
onClick={() => {
activeLogin()
}}
>
تایید
</Link>
</>
}
@ -188,7 +241,9 @@ const LoginSignUp = ({ activeLogin }) => {
className="slideshowSlider"
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
>
{slideContents.map((item, index) => (
{[slideContents[slideContents.length-1],
...slideContents,slideContents[0]
].map((item, index) => (
<div
className="slide"
key={`sildeNo${index}`}
@ -207,9 +262,9 @@ const LoginSignUp = ({ activeLogin }) => {
{slideContents.map((_, idx) => (
<div
key={idx}
className={`slideshowDot${index === idx ? " active" : ""}`}
className={`slideshowDot${index === idx+1 ? " active" : ""}`}
onClick={() => {
setIndex(idx);
setIndex(idx+1);
}}
></div>
))}

2
tailwind.config.js
Unescape View File

@ -4,7 +4,7 @@ module.exports = {
extend: {
colors: {
color1: "#E3F0FF",
color2: "#267DE9",
color2: "#df1452",
color2_5: "rgba(38,125,233,0.05)",
color3: "#B8B8B8",
color4: "#17A742",

Write Preview
Loading…
Cancel
Save