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

pixel perfect

Browse Source
This commit is contained in:
hamid zarghami
2026-06-29 14:47:54 +03:30
parent 4e1261f96b
commit 9f1ef506ac
4 changed files with 304 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/SideBar.tsx
+108 -120
View File
@@ -1,136 +1,124 @@
'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'
import Button from '@/components/Button'
import Link from 'next/link'
import { CONSOLE_URL, LOGIN_URL } from '@/config/const'
"use client";
import Button from "@/components/Button";
import { CONSOLE_URL, LOGIN_URL } from "@/config/const";
import { Building4, CodeCircle, DocumentText, Element3, Element4, Home2, UserSquare } from "iconsax-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { FC } from "react";
import { clx } from "../helpers/utils";
import SideBarItem from "./SideBarItem";
import { useSharedStore } from "./store/sharedStore";
const SideBar: FC = () => {
const { openSidebar, setOpenSidebar, isLogin } = useSharedStore()
const pathname = usePathname()
const isActive = (name: string) => {
if (pathname === '/' && name === 'home') {
return true
}
return pathname.includes(name)
const { openSidebar, setOpenSidebar, isLogin } = useSharedStore();
const pathname = usePathname();
const isActive = (name: string) => {
if (pathname === "/" && name === "home") {
return true;
}
return pathname.includes(name);
};
const iconSizeSideBar = 20
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>
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 flex flex-col h-full overflow-y-auto no-scrollbar'>
<div className='mt-10 px-12 text-header text-sm font-normal'>
منو
</div>
<div className="flex-1 flex flex-col 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={'/'}
/>
<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={<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={<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={<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={<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={<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={'/dmag'}
/>
<SideBarItem
icon={<DocumentText variant={isActive("blogs") ? "Bold" : "Outline"} color={isActive("blogs") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={"مجله دی مگ"}
isActive={isActive("blogs")}
link={"/dmag"}
/>
<SideBarItem
icon={<DocumentText variant={isActive('contact') ? 'Bold' : 'Outline'} color={isActive('contact') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={'تماس با ما'}
isActive={isActive('contact')}
link={'/contact'}
/>
<SideBarItem
icon={<DocumentText variant={isActive("contact") ? "Bold" : "Outline"} color={isActive("contact") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={"تماس با ما"}
isActive={isActive("contact")}
link={"/contact"}
/>
</div>
</div>
{typeof window !== "undefined" &&
(() => {
if (!isLogin)
return (
<div className="flex-1 flex items-end justify-center px-12">
<Link className="w-full" href={`${LOGIN_URL}`}>
<Button label="ورود | ثبت نام" />
</Link>
</div>
);
else
return (
<div className="flex-1 flex items-end justify-center px-12">
<Link className="w-full" href={`${CONSOLE_URL}/dashboard`}>
<Button label="ناحیه کاربری" />
</Link>
</div>
);
})()}
</div>
</div>
</>
);
};
{typeof window !== 'undefined' && (
(() => {
if (!isLogin)
return (
<div className='flex-1 flex items-end justify-center px-12'>
<Link className='w-full' href={`${LOGIN_URL}`}>
<Button
label='ورود | ثبت نام'
/>
</Link>
</div>
)
else
return (
<div className='flex-1 flex items-end justify-center px-12'>
<Link className='w-full' href={`${CONSOLE_URL}/dashboard`}>
<Button
label='ناحیه کاربری'
/>
</Link>
</div>
)
})()
)}
</div>
</div>
</>
)
}
export default SideBar
export default SideBar;