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