all tabs page dashboard and responsive

This commit is contained in:
Ehsan
2024-09-05 00:21:58 +03:30
parent 52a745fcb8
commit 087ed4a818
50 changed files with 860 additions and 502 deletions
+21 -18
View File
@@ -1,32 +1,35 @@
import { useState } from "react"
import Head from "./Head"
import List from "./List"
import Cards from "./Cards";
import Head from "./Head";
import List from "./List";
function Sidebar({ user, value, setValue }) {
const [open, setOpen] = useState(false);
function Sidebar({ user, value, setValue, isOpenSide, setIsOpenSide }) {
return (
// ${open ? 'lg:w-[39%]' : 'min-w-[80px]'}
<div className="flex-1 w-[28%]">
// ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
<div className={`
md:block absolute md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%]
bg-[#FAFAFA] padding-responsive transition-all duration-700
h-screen md:h-auto pt-[24px] md:pt-0
z-5 top-[60px] sm:top-[77px] md:top-0 md:px-0
${isOpenSide ?
'right-0' :
'md:flex -right-full md:right-0'}
`}>
<aside
// className={`
// flex-1 overflow-hidden lg:w-[39%] w-full
// `}
className="
sticky top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]"
className="relative md:sticky top-0 h-fit
md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
>
<div className="
pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
">
pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none
md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
">
<Head user={user} />
<Cards user={user} />
<List
user={user}
value={value}
setValue={setValue}
setIsOpenSide={setIsOpenSide}
/>
</div>
</aside>