46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import LeftContainer from '../LeftContainer'
|
|
import RightContainer from '../RightContainer'
|
|
import { Variants, motion } from 'framer-motion'
|
|
import { useAtomValue } from 'jotai'
|
|
import { leftSideBarExpandStateAtom } from '@/_helpers/atoms/LeftSideBarExpand.atom'
|
|
|
|
const leftSideBarVariants: Variants = {
|
|
show: {
|
|
x: 0,
|
|
width: 320,
|
|
opacity: 1,
|
|
transition: { duration: 0.1 },
|
|
},
|
|
hide: {
|
|
x: '-100%',
|
|
width: 0,
|
|
opacity: 0,
|
|
transition: { duration: 0.1 },
|
|
},
|
|
}
|
|
|
|
const MainContainer: React.FC = () => {
|
|
const leftSideBarExpand = useAtomValue(leftSideBarExpandStateAtom)
|
|
|
|
return (
|
|
<div className="flex">
|
|
<motion.div
|
|
initial={false}
|
|
animate={leftSideBarExpand ? 'show' : 'hide'}
|
|
variants={leftSideBarVariants}
|
|
className="flex h-screen w-80 flex-shrink-0 flex-col border-r border-gray-200 py-3"
|
|
>
|
|
<LeftContainer />
|
|
</motion.div>
|
|
<div className="flex h-screen flex-1 flex-col">
|
|
<RightContainer />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MainContainer
|