master
mahdi 3 years ago
parent 34517ac23c
commit ce0d5c6f70
  1. 13
      src/App.js
  2. 3
      src/components/SidebarMenu/Vector.svg
  3. 4
      src/components/SidebarMenu/arrow-down.svg
  4. 7
      src/components/SidebarMenu/element-4.svg
  5. 6
      src/components/SidebarMenu/folder-open.svg
  6. 159
      src/components/SidebarMenu/index.js
  7. 9
      src/components/SidebarMenu/index.scss
  8. 6
      src/components/SidebarMenu/logout.svg
  9. 8
      src/components/SidebarMenu/message-text.svg
  10. 4
      src/components/SidebarMenu/moon.svg
  11. 8
      src/components/SidebarMenu/profile-pic.svg
  12. 5
      src/components/SidebarMenu/sms.svg
  13. 9
      src/components/SidebarMenu/user-edit.svg
  14. 8
      src/components/SidebarMenu/wallet-money.svg
  15. 13
      src/components/Switch/index.js
  16. 52
      src/components/Switch/index.scss

@ -34,6 +34,8 @@ import AdvertisementDesign1 from "./components/Advertisement/design1";
import AdvertisementDesign2 from "./components/Advertisement/design2"; import AdvertisementDesign2 from "./components/Advertisement/design2";
import AdvertisementDesign3 from "./components/Advertisement/design3"; import AdvertisementDesign3 from "./components/Advertisement/design3";
import CourseChapter from "./components/CourseChapter"; import CourseChapter from "./components/CourseChapter";
import SidebarMenu from "./components/SidebarMenu";
import Switch from "./components/Switch";
function App() { function App() {
return ( return (
@ -65,11 +67,12 @@ function App() {
{/* <ProductSuggestion /> */} {/* <ProductSuggestion /> */}
{/* <ProductImage /> */} {/* <ProductImage /> */}
{/* <ProductTab /> */} {/* <ProductTab /> */}
<ProductStatusCard /> {/* <ProductStatusCard /> */}
<AdvertisementDesign1 /> {/* <AdvertisementDesign1 /> */}
<AdvertisementDesign2 /> {/* <AdvertisementDesign2 /> */}
<AdvertisementDesign3 /> {/* <AdvertisementDesign3 /> */}
<CourseChapter /> {/* <CourseChapter /> */}
<SidebarMenu />
</div> </div>
</Provider> </Provider>
); );

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.774" height="16.04" viewBox="0 0 17.774 16.04">
<path id="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(0.65 0.65)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</svg>

After

Width:  |  Height:  |  Size: 499 B

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#2d57cb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 434 B

@ -0,0 +1,7 @@
<svg id="element-4" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M7.37,7.717v-5.9C7.37.52,6.815,0,5.436,0h-3.5C.555,0,0,.52,0,1.821v5.9c0,1.3.555,1.821,1.934,1.821h3.5C6.815,9.538,7.37,9.017,7.37,7.717Z" transform="translate(11.705 1.734)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M7.37,3.382V1.821C7.37.52,6.815,0,5.436,0h-3.5C.555,0,0,.52,0,1.821V3.382C0,4.682.555,5.2,1.934,5.2h3.5C6.815,5.2,7.37,4.682,7.37,3.382Z" transform="translate(11.705 13.873)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M7.37,1.821v5.9c0,1.3-.555,1.821-1.934,1.821h-3.5C.555,9.538,0,9.017,0,7.717v-5.9C0,.52.555,0,1.934,0h3.5C6.815,0,7.37.52,7.37,1.821Z" transform="translate(1.734 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M7.37,1.821V3.382c0,1.3-.555,1.821-1.934,1.821h-3.5C.555,5.2,0,4.682,0,3.382V1.821C0,.52.555,0,1.934,0h3.5C6.815,0,7.37.52,7.37,1.821Z" transform="translate(1.734 1.734)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H20.809V20.809H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,6 @@
<svg id="folder-open" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M16.781,2.861,16.434,7.2c-.13,1.327-.234,2.341-2.584,2.341H2.943C.593,9.538.489,8.523.359,7.2L.012,2.861A2.628,2.628,0,0,1,.576.962L.593.945A2.579,2.579,0,0,1,2.6,0H14.2a2.57,2.57,0,0,1,1.986.928c.009.009.017.017.017.026A2.536,2.536,0,0,1,16.781,2.861Z" transform="translate(2.008 9.538)" fill="none" stroke="#247deb" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M0,8.15V3.685C0,.737.737,0,3.685,0h1.1A1.749,1.749,0,0,1,6.555.884l1.1,1.474a1.172,1.172,0,0,0,1.179.59h2.211c2.948,0,3.685.737,3.685,3.685V8.185" transform="translate(3.035 1.76)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H4.457" transform="translate(8.176 14.74)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,159 @@
import React from "react";
import "./index.scss";
import downwardArrow from "./arrow-down.svg";
import profilePic from "./profile-pic.svg";
import element from "./element-4.svg";
import folderOpen from "./folder-open.svg";
import wallet from "./wallet-money.svg";
import logout from "./logout.svg";
import messageText from "./message-text.svg";
import moon from "./moon.svg";
import sms from "./sms.svg";
import userEdit from "./user-edit.svg";
import Switch from "../Switch";
const SidebarMenu = ({ items, buttons }) => {
return (
<section>
<div
style={{ width: "20%" }}
className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar"
>
{/* profile */}
<div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" />
<p className="text-blue-600 font-bold text-base flex-1 mx-2">
کامران کوهستانی شیرازی
</p>
<img src={downwardArrow} alt="" className="w-5" />
</div>
{/* divider */}
<div className="border border-gray-200 mt-5"></div>
<p className="text-xs text-gray-400 my-4">منوی کاربری</p>
{/* items */}
{items.map((item, i) => (
<div className="flex flex-col item-center">
{/* menu items */}
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
>
<img src={item.icon} alt="" />
<p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p>
{item.notification && (
<div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center">
<span className=" text-white text-xs">
{item.notification}
</span>
</div>
)}
</div>
{/* sub items */}
{item.subItems.map((subItem, i) => (
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2"
>
{subItem.name && (
<p className="text-gray-400 text-xs flex-1 mr-4">
{subItem.name}
</p>
)}
{subItem.num && (
<div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center">
<span className=" text-white text-xs">{subItem.num}</span>
</div>
)}
</div>
))}
</div>
))}
{/* buttons */}
{buttons.map((button, i) => (
<div className="flex flex-col item-center">
{/* divider */}
<div className="border border-gray-200 my-1"></div>
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
>
<img src={button.icon} alt="" />
<p className="text-blue-600 text-sm flex-1 mx-2">
{button.title}
</p>
{button.leftIcon && <Switch />}
</div>
</div>
))}
</div>
</section>
);
};
export default SidebarMenu;
SidebarMenu.defaultProps = {
items: [
{
icon: element,
title: "داشبورد مدیریت",
notification: null,
subItems: [],
},
{
icon: folderOpen,
title: "پروژه ها",
notification: null,
subItems: [
{ name: "افزدون پروژه", num: null },
{ name: "مدیریت پروژه ها", num: null },
{ name: "پروژه های حذف شده", num: null },
],
},
{
icon: wallet,
title: "مالی و حسابداری",
notification: null,
subItems: [
{ name: "تمدید سرویس", num: null },
{ name: "بسته های اشتراکی", num: null },
{ name: "فاکتور ها", num: 1 },
{ name: "درخواست تسویه حساب", num: null },
],
},
{
icon: userEdit,
title: "دیدگاه ها",
notification: null,
subItems: [],
},
{
icon: userEdit,
title: "حساب کاربری",
notification: null,
subItems: [{ name: "ویرایش حساب کاربری", num: null }],
},
{
icon: sms,
title: "پشتیبانی",
notification: 7,
subItems: [
{ name: "تیکت ها", num: null },
{ name: "ارسال تیکت جدید", num: null },
{ name: "ویکی", num: null },
],
},
{
icon: messageText,
title: "متستندات",
notification: null,
subItems: [{ name: "API توسعه دهندگان", num: null }],
},
],
buttons: [
{ icon: moon, title: "حالت شب", leftIcon: moon },
{ icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
],
};

@ -0,0 +1,9 @@
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

@ -0,0 +1,6 @@
<svg id="logout" xmlns="http://www.w3.org/2000/svg" width="24.545" height="24.545" viewBox="0 0 24.545 24.545">
<path id="Vector" d="M0,5.185C.317,1.5,2.209,0,6.351,0h.133c4.571,0,6.4,1.831,6.4,6.4V13.07c0,4.571-1.831,6.4-6.4,6.4H6.351c-4.111,0-6-1.483-6.341-5.1" transform="translate(9.102 2.547)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M11.638,0H0" transform="translate(3.702 12.272)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M3.426,0,0,3.426,3.426,6.852" transform="translate(2.557 8.846)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24.545V24.545H0Z" transform="translate(24.545 24.545) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 943 B

@ -0,0 +1,8 @@
<svg id="message-text" xmlns="http://www.w3.org/2000/svg" width="22" height="23.237" viewBox="0 0 22 23.237">
<path id="Vector" d="M5.438,0h7.251q5.438,0,5.438,5.809V18.4a.942.942,0,0,1-.906.968H5.438Q0,19.364,0,13.555V5.809Q0,0,5.438,0Z" transform="translate(1.936 1.936)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<g id="Group" transform="translate(6.159 9.198)">
<path id="Vector-2" data-name="Vector" d="M9.682,0H0" fill="#fff" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M6.777,0H0" transform="translate(2.905 4.841)" fill="#fff" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</g>
<path id="Vector-4" data-name="Vector" d="M22,0H0V23.237H22Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 874 B

@ -0,0 +1,4 @@
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path id="Vector" d="M.025,9.556a9.631,9.631,0,0,0,17.352,4.858c.752-1.017.348-1.7-.907-1.467a8.7,8.7,0,0,1-1.907.128A8.547,8.547,0,0,1,6.4,4.716,8.154,8.154,0,0,1,7.083,1.37c.5-1.137-.1-1.677-1.247-1.192A9.442,9.442,0,0,0,.025,9.556Z" transform="translate(1.836 1.829)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H22V22H0Z" transform="translate(22 22) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 597 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 48 KiB

@ -0,0 +1,5 @@
<svg id="sms" xmlns="http://www.w3.org/2000/svg" width="21.904" height="21.904" viewBox="0 0 21.904 21.904">
<path id="Vector" d="M13.69,15.516H4.563C1.825,15.516,0,14.147,0,10.952V4.563C0,1.369,1.825,0,4.563,0H13.69c2.738,0,4.563,1.369,4.563,4.563v6.389C18.254,14.147,16.428,15.516,13.69,15.516Z" transform="translate(1.825 3.194)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M9.127,0,6.27,2.282a2.889,2.889,0,0,1-3.423,0L0,0" transform="translate(6.389 8.214)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H21.9V21.9H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 755 B

@ -0,0 +1,9 @@
<svg id="user-edit" xmlns="http://www.w3.org/2000/svg" width="20.478" height="20.478" viewBox="0 0 20.478 20.478">
<path id="Vector" d="M8.533,4.266A4.266,4.266,0,1,1,4.266,0,4.266,4.266,0,0,1,8.533,4.266Z" transform="translate(5.973 1.707)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<g id="Group" transform="translate(12.945 12.941)">
<path id="Vector-2" data-name="Vector" d="M3.446.489.426,3.509a1.051,1.051,0,0,0-.256.5L.008,5.165a.542.542,0,0,0,.648.648l1.152-.162a1.015,1.015,0,0,0,.5-.256L5.332,2.375a1.165,1.165,0,0,0,0-1.894A1.161,1.161,0,0,0,3.446.489Z" transform="translate(0 0)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M0,0A2.718,2.718,0,0,0,1.894,1.894" transform="translate(3.011 0.924)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
</g>
<path id="Vector-4" data-name="Vector" d="M0,5.973C0,2.671,3.285,0,7.329,0A8.79,8.79,0,0,1,9.864.367" transform="translate(2.91 12.799)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H20.478V20.478H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,8 @@
<svg id="wallet-money" xmlns="http://www.w3.org/2000/svg" width="20.809" height="20.809" viewBox="0 0 20.809 20.809">
<path id="Vector" d="M6.2,0V1.76a2.916,2.916,0,0,1-3.1,2.7A2.924,2.924,0,0,1,0,1.76V0C0,1.491,1.387,2.549,3.1,2.549S6.2,1.483,6.2,0Z" transform="translate(3.123 14.619)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-2" data-name="Vector" d="M6.208,2.688a2.275,2.275,0,0,1-.329,1.179A3.186,3.186,0,0,1,3.1,5.237,3.206,3.206,0,0,1,.329,3.867,2.274,2.274,0,0,1,0,2.688,2.518,2.518,0,0,1,.9.789,3.309,3.309,0,0,1,3.1,0,3.355,3.355,0,0,1,5.289.789,2.465,2.465,0,0,1,6.208,2.688Z" transform="translate(3.113 9.546)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-3" data-name="Vector" d="M6.2,2.7V5.081C6.2,6.572,4.812,7.63,3.1,7.63S0,6.564,0,5.081V2.7A2.919,2.919,0,0,1,3.1,0,3.355,3.355,0,0,1,5.3.789,2.536,2.536,0,0,1,6.2,2.7Z" transform="translate(3.123 9.538)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-4" data-name="Vector" d="M4.447.884V2.671a.89.89,0,0,1-.867.884h-1.7A1.849,1.849,0,0,1,.008,1.934,1.741,1.741,0,0,1,.528.52,1.728,1.728,0,0,1,1.777,0h1.8A.89.89,0,0,1,4.447.884Z" transform="translate(14.628 8.627)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-5" data-name="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(1.734 3.035)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
<path id="Vector-6" data-name="Vector" d="M0,0H20.809V20.809H0Z" transform="translate(20.809 20.809) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -0,0 +1,13 @@
import React from "react";
import "./index.scss";
const Switch = () => {
return (
<div className="switch">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
</div>
);
};
export default Switch;

@ -0,0 +1,52 @@
// *, *:after, *:before {
// // box-sizing: border-box;
// }
// body {
// min-height: 100vh;
// display: flex;
// align-items: center;
// justify-content: center;
// }
.switch {
position: relative;
input[type="checkbox"] {
visibility: hidden;
position : absolute;
&:checked + label {
transform: rotate(0deg);
background-color: #000;
&:before {
transform: translateX(35.5px);
background-color: #fff;
}
}
}
label {
display: flex;
width: 70px;
height: 34px;
border: 3px solid;
border-radius: 99em;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
cursor: pointer;
&:before {
transition: transform 0.3s ease;
transition-delay: 0s;
content: "";
display: block;
position: absolute;
width: 24px;
height: 24px;
background-color: #000;
border-radius: 50%;
top: 2px;
left: 3px;
}
}
}
Loading…
Cancel
Save