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

change home page and style buttons

Browse Source
This commit is contained in:
Ehsan
2024-09-25 10:50:26 +03:30
parent e773c7bcdb
commit fa38ee2b21
9 changed files with 56 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layoutPanel/header/index.js
+14 -16
View File
@@ -4,23 +4,21 @@ import SideButton from "./sideButton";
import MenuProfile from "./MenuProfile";
function Header({ disableProfile, data, setActive }) {
return (
<div
className='
return (
<div
className="
h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
'
>
<SideButton setActive={setActive} />
<Search />
<div className="flex items-center justify-end gap-[8px] md:gap-[40px] min-w-fit">
<Icons />
{!disableProfile && (
<MenuProfile data={data} />
)}
</div>
</div>
)
"
>
<SideButton setActive={setActive} />
<Search />
<div className="flex items-center justify-end gap-[8px] md:gap-[40px] min-w-fit">
<Icons />
{!disableProfile && <MenuProfile data={data} />}
</div>
</div>
);
}
export default Header
export default Header;
components/layoutPanel/sidebar/index.js
+24 -15
View File
@@ -6,31 +6,40 @@ import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
function Sidebar({ active, setActive, open, setOpen }) {
return (
<div className={`
<div
className={`
transition-all duration-500 md:flex fixed md:relative z-30 w-[85%]
${active ? ' right-0' : 'right-[-85%]'}
${open ? 'min-w-[243px] md:w-[243px]' : 'min-w-[96px] md:w-[96px]'}
`}>
<aside className={`
${active ? " right-0" : "right-[-85%]"}
${open ? "min-w-[243px] md:w-[243px]" : "min-w-[96px] md:w-[96px]"}
`}
>
<aside
className={`
relative h-screen overflow-hidden
transition-all duration-500 w-[85%]
${active ? ' right-0' : 'right-[-85%]'}
${open ? 'w-[243px]' : 'w-[96px]'}
`}>
<div className={`
${active ? " right-0" : "right-[-85%]"}
${open ? "w-[243px]" : "w-[96px]"}
`}
>
<div
className={`
z-30 md:top-0 md:right-0 w-[85%]
${active ? ' right-0' : 'right-[-85%]'}
${active ? " right-0" : "right-[-85%]"}
overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed
border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
transition-all duration-500
${open ? 'md:w-[243px]' : 'md:w-[96px]'}
`}>
${open ? "md:w-[243px]" : "md:w-[96px]"}
`}
>
<div className="w-full">
<HeadMd open={open} setOpen={setOpen} />
<HeadSm setActive={setActive} />
<Links open={open} />
</div>
<div className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? '!max-w-full' : '!max-w-0'}`}>
<div
className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? "!max-w-full" : "!max-w-0"
}`}
>
<Button
variant="text"
className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
@@ -42,7 +51,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
</div>
</aside>
</div>
)
);
}
export default Sidebar
export default Sidebar;