hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive page home and list

Browse Source
This commit is contained in:
Ehsan
2024-08-14 10:38:07 +03:30
parent 5568a989fe
commit 1341253384
9 changed files with 92 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/header/index.js
+2 -2
View File
@@ -21,8 +21,8 @@ function Header({ name }) {
className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
>
<div className={`
h-20 px-4 py-8 flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
${isActive ? '!pr-0' : '!p-4'}
px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
${isActive ? '!pr-0' : '!px-4'}
`}>
<div className="">
<BgGray
components/layout/header/list/col/ButtonMenu.js
+3 -3
View File
@@ -4,11 +4,11 @@ function ButtonMenu({ isActive, setIsActive }) {
return (
<Button
onClick={() => setIsActive(!isActive)}
className="!flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
>
<span
className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D]
${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[6px]' : 'rotate-0 w-full'}
${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[8px]' : 'rotate-0 w-full'}
`}
></span>
<span
@@ -18,7 +18,7 @@ function ButtonMenu({ isActive, setIsActive }) {
></span>
<span
className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D]
${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[-6px]' : 'rotate-0 w-full'}
${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[-8px]' : 'rotate-0 w-full'}
`}
></span>
</Button>
components/layout/header/list/col/index.js
+3 -2
View File
@@ -18,7 +18,7 @@ function Col({ isActive, setIsActive, name }) {
md:top-[-30px] lg:top-[-40px] w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500
${isActive ? 'right-0' : '-right-[85%]'}
`}>
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px]">
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[38px]">
{listNav.map(nav => (
<li
key={nav.id}
@@ -29,7 +29,8 @@ function Col({ isActive, setIsActive, name }) {
className="w-full"
>
<Button className={`
${isActiveURL(nav.link.replace('/', ''), name) ?
!h-10
${isActiveURL(nav.link.replace('/', ''), name) ?
'!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]' :
'!text-[#525252]'
}