all tabs page dashboard and responsive
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user