create sidebar responsive - create header

2024-08-06 13:41:27 +03:30
parent 66c89cf14f
commit 49b25481ce
9 changed files with 191 additions and 1 deletions
@@ -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>
+    )
+}
@@ -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>
+    )
+}
@@ -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>
+    )
+}
@@ -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>
+    )
+}