Sidebar Component Example

Sidebar.jsx

import React, { ReactNode } from 'react';
import Button from '@/components/Button';
import { icons } from '@/images/_icons';
import { SidebarOverlay, SidebarContainer, SidebarContent } from '@/css/_styledComponents';

type SidebarProps = {
  children: ReactNode, $sidebarOpen:boolean, $sidebarWidth:string, callback:() => void
}
function Sidebar({ children, $sidebarOpen = false, $sidebarWidth = '50%', callback }: SidebarProps) {
  const closeSidebar = () => {
    callback();
  }
  
  const outsideClick = (e: React.MouseEvent<HTMLElement>) => {
    const element = e.target as HTMLElement;
    if (element.id === 'sidebarOverlay') {
      callback();
    }
  };

  return (
    <SidebarOverlay id="sidebarOverlay" $isOpen={$sidebarOpen} onClick={outsideClick}>
      <SidebarContainer $isOpen={$sidebarOpen} $sidebarWidth={$sidebarWidth}>
        <Button
          aria-label="Close Sidebar"
          className="close"
          type={undefined}
          $icon={icons.close}
          callback={closeSidebar}
          title="close"
          $iconSize={32}
          style={{
            position: 'absolute',
            left: $sidebarOpen ? '-40px' : '0',
            transition: '0.4s all ease',
            background: 'var(--color-sidebar-bg)',
            borderRadius: '50% 0 0 50%'
          }}
        />
        <SidebarContent id="sidebarContent" $isOpen={$sidebarOpen}>
          {children}
        </SidebarContent>
      </SidebarContainer>
    </SidebarOverlay>
  )
}

export default Sidebar