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

sidebar in mobile

Browse Source
This commit is contained in:
hamid zarghami
2025-04-13 10:22:49 +03:30
parent 715d58a3b8
commit 15af39fc84
8 changed files with 199 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+33 -3
View File
@@ -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
}
}
}
}
}
package.json
+2 -1
View File
@@ -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",
src/app/layout.tsx
+2
View File
@@ -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 />
src/shared/Header.tsx
+4
View File
@@ -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'
/>
src/shared/SideBar.tsx
+101
View File
@@ -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
src/shared/SideBarItem.tsx
+46
View File
@@ -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
src/shared/store/sharedStore.ts
+7
View File
@@ -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 }),
}));
src/shared/types/SharedTypes.ts
+4
View File
@@ -0,0 +1,4 @@
export type SharedStoreType = {
openSidebar: boolean;
setOpenSidebar: (value: boolean) => void;
};