import { Helmet } from 'react-helmet-async'

import type { FC, ReactNode } from 'react'

type Props = { children: ReactNode }


export default (({ children }: Props) => (
    <div
	className="p-4 w-full md:w-64 md:h-full
		   md:h-[calc(100dvh-88px)] md:overflow-y-auto
		   sidebar">
      <Helmet>
	<style>
	  {`
	      .sidebar
	      {
		direction: rtl;
	      }

	      .sidebar > *
	      {
		direction: ltr;
	      }`}
	</style>
      </Helmet>

      {children}
    </div>)) satisfies FC<Props>
