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