diff --git a/public/svgs/header/burger-menu.svg b/public/svgs/header/burger-menu.svg new file mode 100644 index 0000000..9ddd45b --- /dev/null +++ b/public/svgs/header/burger-menu.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/svgs/header/person.svg b/public/svgs/header/person.svg new file mode 100644 index 0000000..d391c4a --- /dev/null +++ b/public/svgs/header/person.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/ui/dashboard/header.tsx b/src/components/ui/dashboard/header.tsx new file mode 100644 index 0000000..089b0f8 --- /dev/null +++ b/src/components/ui/dashboard/header.tsx @@ -0,0 +1,22 @@ +import { Call } from "iconsax-react" +import React, { FC } from "react" + +type Props = { + setShow: () => void +} + +export const Header: FC = ({ setShow }) => { + return ( +
+
+ burger menu + person +

علی مصلحی

+
+
+

45597000-021

+ +
+
+ ) +} \ No newline at end of file diff --git a/src/components/ui/dashboard/sidebar-item.tsx b/src/components/ui/dashboard/sidebar-item.tsx new file mode 100644 index 0000000..b7d1597 --- /dev/null +++ b/src/components/ui/dashboard/sidebar-item.tsx @@ -0,0 +1,21 @@ +import { FC } from "react" +import { SidebarInterface } from "../../../types" +import clsx from "clsx" +import { Link, useLocation } from "react-router-dom" + +type Props = { + item: SidebarInterface +} +export const SidebarItem: FC = ({ item }) => { + const { pathname } = useLocation() + return ( + + {item?.route === pathname ? item?.activeIcon : item?.icon} +

{item?.title}

+ + ) +} \ No newline at end of file diff --git a/src/components/ui/dashboard/sidebar-mobile.tsx b/src/components/ui/dashboard/sidebar-mobile.tsx new file mode 100644 index 0000000..a8611e7 --- /dev/null +++ b/src/components/ui/dashboard/sidebar-mobile.tsx @@ -0,0 +1,33 @@ +import { FC } from "react" +import { SidebarInterface } from "../../../types" +import { sidebarItems } from "../../../utility/sidebar" +import { SidebarItem } from "./sidebar-item" +import { CloseCircle, LogoutCurve } from "iconsax-react" + +type Props = { + setShow: (value: boolean) => void, + show: any, +} + +export const SidebarMobile: FC = ({ setShow, show }) => { + const handleCloseSidebar = () => setShow(false) + return ( + show &&
+
+ +
+ logo +
+
+ {sidebarItems?.map((item: SidebarInterface) => )} +
+
+ +

خروج

+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/ui/dashboard/sidebar.tsx b/src/components/ui/dashboard/sidebar.tsx new file mode 100644 index 0000000..fb0d59d --- /dev/null +++ b/src/components/ui/dashboard/sidebar.tsx @@ -0,0 +1,21 @@ +import { LogoutCurve } from "iconsax-react" +import { SidebarInterface } from "../../../types" +import { sidebarItems } from "../../../utility/sidebar" +import { SidebarItem } from "./sidebar-item" + +export const Sidebar = () => { + return ( +
+ logo +
+
+ {sidebarItems?.map((item: SidebarInterface) => )} +
+
+ +

خروج

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/router/index.tsx b/src/router/index.tsx index 811ef91..a7e75ae 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -8,12 +8,19 @@ import { ResetPassword } from "../pages/auth/reset-password"; import { LoginWithCode } from "../pages/auth/login-with-code"; import { SendCode } from "../pages/auth/send-code"; import { ResetPasswordCode } from "../pages/auth/reset-password-code"; +import { DashboardLayout } from "../components/ui/dashboard/layout"; export const router = createBrowserRouter([ { + element: , path: "/", - element: + children: [ + { + index: true, + element: + }, + ] }, { element: , diff --git a/src/types/index.ts b/src/types/index.ts index 969e353..47a4828 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,3 +1,5 @@ +import React from "react" + export interface LoginFormInterface { phoneNumber: string, password: string @@ -34,3 +36,10 @@ export interface RegisterInterface { repeatPassword: string, } +export interface SidebarInterface { + name: string, + title: string, + route: string, + icon: React.ReactNode, + activeIcon: React.ReactNode +} diff --git a/src/utility/sidebar.tsx b/src/utility/sidebar.tsx new file mode 100644 index 0000000..55b49c7 --- /dev/null +++ b/src/utility/sidebar.tsx @@ -0,0 +1,62 @@ +import { CardPos, DocumentText, Home2, ReceiptItem, SmartCar, StarSlash, UserSquare, Wallet } from "iconsax-react"; +import { SidebarInterface } from "../types"; + + +export const sidebarItems: SidebarInterface[] | [] = [ + { + name: "home", + title: "صفحه اصلی", + route: "/", + icon: , + activeIcon: + }, + { + name: "my-account", + title: "حساب من", + route: "/my-account", + icon: , + activeIcon: + }, + { + name: "wallet", + title: "کیف پول", + route: "/wallet", + icon: , + activeIcon: + }, + { + name: "management-bank-accounts", + title: "مدیریت حساب های بانکی", + route: "/management-bank-accounts", + icon: , + activeIcon: + }, + { + name: "installation-reports", + title: "گزارش نصب ها", + route: "/installation-reports", + icon: , + activeIcon: + }, + { + name: "transactions", + title: "تراکنش ها", + route: "/transactions", + icon: , + activeIcon: + }, + { + name: "my-score", + title: "امتیاز من", + route: "/my-score", + icon: , + activeIcon: + }, + { + name: "subscription-report", + title: "گزارش تمدید اشتراک اینترنتی", + route: "/subscription-report", + icon: , + activeIcon: + }, +] \ No newline at end of file