From 15af39fc84ff9edf34b6106800212806dc8436fc Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 13 Apr 2025 10:22:49 +0330
Subject: [PATCH] sidebar in mobile

---
 package-lock.json               |  36 +++++++++++-
 package.json                    |   3 +-
 src/app/layout.tsx              |   2 +
 src/shared/Header.tsx           |   4 ++
 src/shared/SideBar.tsx          | 101 ++++++++++++++++++++++++++++++++
 src/shared/SideBarItem.tsx      |  46 +++++++++++++++
 src/shared/store/sharedStore.ts |   7 +++
 src/shared/types/SharedTypes.ts |   4 ++
 8 files changed, 199 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/SideBar.tsx
 create mode 100644 src/shared/SideBarItem.tsx
 create mode 100644 src/shared/store/sharedStore.ts
 create mode 100644 src/shared/types/SharedTypes.ts

diff --git a/package-lock.json b/package-lock.json
index 0bd4fca..18fa98a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
         "react-dom": "^19.0.0",
         "react-spinners": "^0.15.0",
         "swiper": "^11.2.6",
-        "tailwind-merge": "^3.0.2"
+        "tailwind-merge": "^3.0.2",
+        "zustand": "^5.0.3"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -1156,7 +1157,7 @@
       "version": "19.0.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
       "integrity": "sha512-V6Ar115dBDrjbtXSrS+/Oruobc+qVbbUxDFC1RSbRqLt5SYvxxyIDrSC85RWml54g+jfNeEMZhEj7wW07ONQhA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -2065,7 +2066,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -5742,6 +5743,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.3.tgz",
+      "integrity": "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index ca96f53..9c1def1 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "react-dom": "^19.0.0",
     "react-spinners": "^0.15.0",
     "swiper": "^11.2.6",
-    "tailwind-merge": "^3.0.2"
+    "tailwind-merge": "^3.0.2",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 199ce81..cba107c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import "./globals.css";
 import "@/assets/fonts/irancell/style.css";
 import Header from "@/shared/Header";
 import Footer from "@/shared/Footer";
+import SideBar from "@/shared/SideBar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -32,6 +33,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <div className="font-irancell xl:p-16 p-4">
+          <SideBar />
           <Header />
           {children}
           <Footer />
diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
index cbc7dd9..3ec9f25 100644
--- a/src/shared/Header.tsx
+++ b/src/shared/Header.tsx
@@ -1,10 +1,13 @@
+'use client'
 import { FC, Fragment } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { HambergerMenu, Profile, SearchNormal } from 'iconsax-react'
 import Button from '@/components/Button'
+import { useSharedStore } from '@/shared/store/sharedStore'
 
 const Header: FC = () => {
+    const { openSidebar, setOpenSidebar } = useSharedStore()
     return (
         <Fragment>
             <div className='w-full h-[100px] bg-white/26 rounded-4xl border-[3px] border-white px-10 xl:block hidden'>
@@ -71,6 +74,7 @@ const Header: FC = () => {
             <div className='h-[51px] bg-white/26 rounded-4xl border-[3px] border-white px-4 xl:hidden flex items-center justify-between'>
                 <div className='flex-1'>
                     <HambergerMenu
+                        onClick={() => setOpenSidebar(!openSidebar)}
                         size={24}
                         color='black'
                     />
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
new file mode 100644
index 0000000..186090f
--- /dev/null
+++ b/src/shared/SideBar.tsx
@@ -0,0 +1,101 @@
+'use client'
+import { FC } from 'react'
+import { Building4, CodeCircle, DocumentText, Element3, Element4, Home2, UserSquare } from 'iconsax-react'
+import SideBarItem from './SideBarItem'
+import { useSharedStore } from './store/sharedStore'
+import { clx } from '../helpers/utils'
+import Image from 'next/image'
+import { usePathname } from 'next/navigation'
+
+const SideBar: FC = () => {
+
+    const { openSidebar, setOpenSidebar } = useSharedStore()
+    const pathname = usePathname()
+    const isActive = (name: string) => {
+        if (pathname === '/' && name === 'home') {
+            return true
+        }
+        return pathname.includes(name)
+    }
+
+    const iconSizeSideBar = 20
+
+    return (
+        <>
+            {
+                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-10' onClick={() => setOpenSidebar(false)} />
+            }
+            <div
+                className={clx(
+                    'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible   xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
+                    openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
+                )}
+            >
+                <div className='flex justify-center'>
+                    <Image src={'/images/logo.svg'} width={140} height={40} alt='logo' className='w-[140px]' />
+                </div>
+
+                <div className='flex-1 h-full overflow-y-auto no-scrollbar'>
+                    <div className='mt-10 px-12 text-header text-sm font-normal'>
+                        منو
+                    </div>
+
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Home2 variant={isActive('home') ? 'Bold' : 'Outline'} color={isActive('home') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title='صفحه اصلی'
+                            isActive={isActive('home')}
+                            link={'/'}
+                        />
+
+                        <SideBarItem
+                            icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'محصولات'}
+                            isActive={isActive('products')}
+                            link={'/products'}
+                        />
+
+                        <SideBarItem
+                            icon={<Element4 variant={isActive('danak-services') ? 'Bold' : 'Outline'} color={isActive('danak-services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'خدمات دناک'}
+                            isActive={isActive('danak-services')}
+                            link={'/danak-services'}
+                        />
+
+                        <SideBarItem
+                            icon={<UserSquare variant={isActive('representatives') ? 'Bold' : 'Outline'} color={isActive('representatives') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'نمایندگان'}
+                            isActive={isActive('representatives')}
+                            link={'/representatives'}
+                        />
+
+                        <SideBarItem
+                            icon={<CodeCircle variant={isActive('developers') ? 'Bold' : 'Outline'} color={isActive('developers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'توسعه دهندگان'}
+                            isActive={isActive('developers')}
+                            link={'/developers'}
+                        />
+
+                        <SideBarItem
+                            icon={<Building4 variant={isActive('about') ? 'Bold' : 'Outline'} color={isActive('about') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'درباره ما'}
+                            isActive={isActive('about')}
+                            link={'/about'}
+                        />
+
+                        <SideBarItem
+                            icon={<DocumentText variant={isActive('blogs') ? 'Bold' : 'Outline'} color={isActive('blogs') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'بلاگ'}
+                            isActive={isActive('blogs')}
+                            link={'/blogs'}
+                        />
+
+                    </div>
+
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SideBar
\ No newline at end of file
diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx
new file mode 100644
index 0000000..a7595a4
--- /dev/null
+++ b/src/shared/SideBarItem.tsx
@@ -0,0 +1,46 @@
+import { FC, ReactNode } from 'react'
+import { clx } from '../helpers/utils'
+import Link from 'next/link'
+
+
+type Props = {
+    icon: ReactNode,
+    title: string,
+    isActive: boolean,
+    link: string,
+    isLogout?: boolean,
+    isWithoutLine?: boolean
+}
+
+const SideBarItem: FC<Props> = (props: Props) => {
+
+    // const logout = useLogout()
+
+    const handleLogout = async () => {
+        // await logout.mutateAsync()
+        // removeToken()
+        // removeRefreshToken()
+        // window.location.href = Pages.auth.login
+    }
+
+    return (
+        <Link onClick={props.isLogout ? handleLogout : undefined} href={props.link} className='flex text-xs gap-9 mt-4'>
+            {
+                !props.isWithoutLine &&
+                <div className={clx(
+                    'w-1 bg-black h-6',
+                    !props.isActive && 'invisible'
+                )}></div>
+            }
+            <div className='flex gap-3 items-center'>
+                {props.icon}
+                <div className={props.isActive ? 'text-black' : ''}>
+                    {props.title}
+                </div>
+            </div>
+
+        </Link>
+    )
+}
+
+export default SideBarItem
\ No newline at end of file
diff --git a/src/shared/store/sharedStore.ts b/src/shared/store/sharedStore.ts
new file mode 100644
index 0000000..731c65a
--- /dev/null
+++ b/src/shared/store/sharedStore.ts
@@ -0,0 +1,7 @@
+import { create } from "zustand";
+import { SharedStoreType } from "../types/SharedTypes";
+
+export const useSharedStore = create<SharedStoreType>((set) => ({
+  openSidebar: false,
+  setOpenSidebar: (value) => set({ openSidebar: value }),
+}));
diff --git a/src/shared/types/SharedTypes.ts b/src/shared/types/SharedTypes.ts
new file mode 100644
index 0000000..b681e51
--- /dev/null
+++ b/src/shared/types/SharedTypes.ts
@@ -0,0 +1,4 @@
+export type SharedStoreType = {
+  openSidebar: boolean;
+  setOpenSidebar: (value: boolean) => void;
+};