diff --git a/src/assets/img/avatar/uglyUser.jpeg b/src/assets/img/avatar/uglyUser.jpeg new file mode 100644 index 0000000..b2ebdf7 Binary files /dev/null and b/src/assets/img/avatar/uglyUser.jpeg differ diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js index 39d0253..6e1cba7 100644 --- a/src/components/nav/Nav.js +++ b/src/components/nav/Nav.js @@ -1,5 +1,5 @@ import "./Nav.scss"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { connect } from "react-redux"; import { loadAnimation } from "lottie-web"; import { defineLordIconElement } from "lord-icon-element"; @@ -7,6 +7,7 @@ import { defineLordIconElement } from "lord-icon-element"; import logo from "../../assets/img/logo.png"; import img1 from "../../assets/img/Group 1440.svg"; import { Link } from "react-router-dom"; +import MinimalNav from "./minimalNav"; // defineLordIconElement(loadAnimation); @@ -18,6 +19,17 @@ const Nav = ({ isMobile, isLogin, }) => { + + const [type, setType] = useState('default'); + +useEffect(() => { + if(location.includes('adminpanel')){ + setType('minimal'); + } + +}, []) + + let initai_navId = 1; if(isMobile){ if (location.includes("services")) { @@ -114,6 +126,7 @@ const Nav = ({ ) } else { return ( + type === "default" ?
logo @@ -447,7 +460,14 @@ const Nav = ({
- + : type === 'minimal' ? + + //MINIMAL + + + + :
+ ); } }; diff --git a/src/components/nav/discount-shape.svg b/src/components/nav/discount-shape.svg new file mode 100644 index 0000000..40c5003 --- /dev/null +++ b/src/components/nav/discount-shape.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/nav/element-3.svg b/src/components/nav/element-3.svg new file mode 100644 index 0000000..0a3d3b1 --- /dev/null +++ b/src/components/nav/element-3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/nav/empty-wallet.svg b/src/components/nav/empty-wallet.svg new file mode 100644 index 0000000..0f8b746 --- /dev/null +++ b/src/components/nav/empty-wallet.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/nav/home-2.svg b/src/components/nav/home-2.svg new file mode 100644 index 0000000..066bdff --- /dev/null +++ b/src/components/nav/home-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/nav/minimalNav.js b/src/components/nav/minimalNav.js new file mode 100644 index 0000000..0af6960 --- /dev/null +++ b/src/components/nav/minimalNav.js @@ -0,0 +1,154 @@ +import React, {useState} from "react"; +import { Link } from "react-router-dom"; + +// assets +import avatar from '../../assets/img/avatar/uglyUser.jpeg'; +import dropDownIcon from '../../assets/img/arrow-down.svg' +import homeIcon from './home-2.svg' +import optionsIcon from './element-3.svg' +import notificationIcon from './notification.svg'; +import walleteIcon from './empty-wallet.svg'; +import discountIcon from './discount-shape.svg'; +import userIcon from './profile.svg'; +import receiptIcon from './receipt-text.svg'; +import settingIcon from './setting-2.svg'; +import exitIcon from './vuesax-linear-logout.svg' + + +const MinimalNav = ({logOut}) => { + let initai_navId = 1; + const [navId, setNavId] = useState(initai_navId); + + + const chaneNav = (id) => { + setNavId(id); + let top = 100 / 6 + (id - 1) * 100 / 6 * 3 / 4; + console.log(top) + document.querySelector(".back-item-img").style.top = `${top}%`; + }; + + + const menuOptions = [ + { + icon: homeIcon, + link: '/adminpanel', + id : 1 + }, + { + icon: optionsIcon, + link: '/adminpanel', + id : 2 + }, + { + icon: notificationIcon, + link: '/adminpanel', + id : 3 + + }, + { + icon: walleteIcon, + link: '/adminpanel', + id : 4 + }, + { + icon: discountIcon, + link: '/adminpanel', + id : 5 + }, + { + icon: receiptIcon, + link: '/adminpanel', + id : 6 + }, + { + icon: walleteIcon, + link: '/adminpanel', + id : 7 + }, + { + icon: userIcon, + link: '/adminpanel', + id : 8 + }, + { + icon: settingIcon, + link: '/adminpanel', + id : 9 + }, + { + icon: exitIcon, + link: '/adminpanel', + id: 10 + }, + ] + + + + return( +
+
+ user + choose User Icon + +
+ + + {/* ------------ */} +
+ + + { + menuOptions.slice(0,3).map( + (item, index) => ( + setNavId(item.id)}> + +
+ + ) + ) + } +
+ { + menuOptions.slice(3,7).map( + (item, index) => ( + setNavId(item.id)}> + +
+ + ) + ) + } +
+ { + menuOptions.slice(7,12).map( + (item, index) => ( + setNavId(item.id)}> + +
+ + ) + ) + } + +
+ +
+ ) +} + +export default MinimalNav; \ No newline at end of file diff --git a/src/components/nav/notification.svg b/src/components/nav/notification.svg new file mode 100644 index 0000000..f381cb1 --- /dev/null +++ b/src/components/nav/notification.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/nav/profile.svg b/src/components/nav/profile.svg new file mode 100644 index 0000000..697385b --- /dev/null +++ b/src/components/nav/profile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/nav/receipt-text.svg b/src/components/nav/receipt-text.svg new file mode 100644 index 0000000..a4e6dd0 --- /dev/null +++ b/src/components/nav/receipt-text.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/nav/setting-2.svg b/src/components/nav/setting-2.svg new file mode 100644 index 0000000..aba96a2 --- /dev/null +++ b/src/components/nav/setting-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/nav/vuesax-bold-element-4-2.svg b/src/components/nav/vuesax-bold-element-4-2.svg new file mode 100644 index 0000000..7d48df4 --- /dev/null +++ b/src/components/nav/vuesax-bold-element-4-2.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/nav/vuesax-linear-logout.svg b/src/components/nav/vuesax-linear-logout.svg new file mode 100644 index 0000000..e586c35 --- /dev/null +++ b/src/components/nav/vuesax-linear-logout.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/view/admin/index.js b/src/view/admin/index.js index 90e92c8..9001830 100644 --- a/src/view/admin/index.js +++ b/src/view/admin/index.js @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; const AdminPanel = () => { return( -
+
ورود به صفحه افزودن محصول