create sidebar responsive - create header

public/svgs/header/burger-menu.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+</svg>

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<Props> = ({ setShow }) => {
+    return (
+        <div className="flex flex-row w-full justify-between items-center">
+            <div className="flex flex-row gap-x-5 lg:gap-x-3 items-center">
+                <img src="/svgs/header/burger-menu.svg" alt="burger menu" className="lg:hidden size-[27px]" onClick={setShow} />
+                <img src="/svgs/header/person.svg" alt="person" className="size-[60px]" />
+                <p className="hidden font-normal text-sm lg:block lg:text-xl">علی مصلحی</p>
+            </div>
+            <div className="flex flex-row gap-x-3 items-center">
+                <p className="font-normal text-sm lg:text-xl">45597000-021</p>
+                <Call color="#11212D" variant="Bold" className="size-[27px]" />
+            </div>
+        </div>
+    )
+}

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<Props> = ({ item }) => {
+    const { pathname } = useLocation()
+    return (
+        <Link to={item?.route} className={clsx("w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52", {
+            "bg-secondary-color": item?.route === pathname
+        })}>
+            {item?.route === pathname ? item?.activeIcon : item?.icon}
+            <p className={clsx("font-normal text-base text-secondary-text-color", {
+                "!text-primary-text-color": item?.route === pathname
+            })}>{item?.title}</p>
+        </Link>
+    )
+}

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<Props> = ({ setShow, show }) => {
+    const handleCloseSidebar = () => setShow(false)
+    return (
+        show && <div className="lg:hidden fixed top-0 left-full z-0 h-screen transition-transform -translate-x-full bg-auth-form w-max">
+            <div className="relative p-4 h-full">
+                <CloseCircle color="gray" variant="Bold" className="size-7 text-white absolute top-2 right-2" onClick={handleCloseSidebar} />
+                <div className="lg:hidden w-full h-full max-w-max p-[21px] flex flex-col gap-y-[44px] items-center xl:max-w-fit bg-secondry-color">
+                    <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
+                    <div className="h-full flex flex-col justify-between">
+                        <div className="flex flex-col gap-y-3">
+                            {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
+                        </div>
+                        <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer">
+                            <LogoutCurve color="#777577" className="size-[27px]" />
+                            <p className="font-normal text-base text-secondary-text-color">خروج</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

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 (
+        <div className="hidden lg:flex bg-auth-form  min-w-[318px] max-w-[318px] flex-col items-center py-[42px] gap-y-20">
+            <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
+            <div className="flex flex-col justify-between h-full">
+                <div className="flex flex-col gap-y-3">
+                    {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
+                </div>
+                <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer">
+                    <LogoutCurve color="#777577" className="size-[27px]" />
+                    <p className="font-normal text-base text-secondary-text-color">خروج</p>
+                </div>
+            </div>
+        </div>
+    )
+}

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: <DashboardLayout />,
         path: "/",
-        element: <App />
+        children: [
+            {
+                index: true,
+                element: <App />
+            },
+        ]
     },
     {
         element: <AuthLayout />,

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
+}

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: <Home2 color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <Home2 color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+    {
+        name: "my-account",
+        title: "حساب من",
+        route: "/my-account",
+        icon: <UserSquare color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <UserSquare color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+    {
+        name: "wallet",
+        title: "کیف پول",
+        route: "/wallet",
+        icon: <Wallet color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <Wallet color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+    {
+        name: "management-bank-accounts",
+        title: "مدیریت حساب های بانکی",
+        route: "/management-bank-accounts",
+        icon: <CardPos color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <CardPos color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+    {
+        name: "installation-reports",
+        title: "گزارش نصب ها",
+        route: "/installation-reports",
+        icon: <SmartCar color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <SmartCar color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+    {
+        name: "transactions",
+        title: "تراکنش ها",
+        route: "/transactions",
+        icon: <ReceiptItem color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <ReceiptItem color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+    {
+        name: "my-score",
+        title: "امتیاز من",
+        route: "/my-score",
+        icon: <StarSlash color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <StarSlash color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+    {
+        name: "subscription-report",
+        title: "گزارش تمدید اشتراک اینترنتی",
+        route: "/subscription-report",
+        icon: <DocumentText color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <DocumentText color="#11212D" className="size-[27px]" variant="Bold" />
+    },
+]