danak/asan-installer-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create sidebar responsive - create header

Browse Source
This commit is contained in:
Alihaghighattalab
2024-08-06 13:41:27 +03:30
parent 66c89cf14f
commit 49b25481ce
9 changed files with 191 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/svgs/header/burger-menu.svg
+6
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

public/svgs/header/person.svg
+9
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

src/components/ui/dashboard/header.tsx
+22
View File
@@ -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
+21
View File
@@ -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
+33
View File
@@ -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
+21
View File
@@ -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 -1
View File
@@ -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
+9
View File
@@ -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
+62
View File
@@ -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" />
},
]