32 行
624 B
TypeScript
32 行
624 B
TypeScript
import { motion } from 'framer-motion'
|
|
import { Helmet } from 'react-helmet-async'
|
|
|
|
import type { FC, ReactNode } from 'react'
|
|
|
|
type Props = { children: ReactNode }
|
|
|
|
|
|
const SidebarComponent: FC<Props> = ({ children }) => (
|
|
<motion.div
|
|
layout="position"
|
|
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
|
className="p-4 w-full md:w-64 md:h-full md:overflow-y-auto sidebar">
|
|
<Helmet>
|
|
<style>
|
|
{`
|
|
.sidebar
|
|
{
|
|
direction: rtl;
|
|
}
|
|
|
|
.sidebar > *
|
|
{
|
|
direction: ltr;
|
|
}`}
|
|
</style>
|
|
</Helmet>
|
|
|
|
{children}
|
|
</motion.div>)
|
|
|
|
export default SidebarComponent |