{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "title": "Sidebar",
  "description": "A sidebar component that can be used to display a navigation menu.",
  "registryDependencies": [
    "@tra-kit/button"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/sidebar.tsx",
      "content": "import { createContext, useContext, useState, ReactNode, useMemo, useEffect } from 'react';\r\nimport { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react';\r\nimport Button from './button';\r\n\r\ninterface ISidebar {\r\n  children: ReactNode;\r\n  headerLogo?: string;\r\n  expandable?: boolean;\r\n}\r\n\r\ninterface ISidebarItem {\r\n  icon: ReactNode;\r\n  text: string;\r\n  active?: boolean;\r\n  alert?: boolean;\r\n  url?: string;\r\n  onClick?: () => void;\r\n}\r\n\r\nconst SidebarContext = createContext<{ expanded: boolean } | undefined>(undefined);\r\n\r\nconst Sidebar = ({ children, headerLogo, expandable = true }: ISidebar) => {\r\n  const [expanded, setExpanded] = useState(true);\r\n  const contextValue = useMemo(() => ({ expanded }), [expanded]);\r\n\r\n  useEffect(() => {\r\n    if (!expandable) {\r\n      setExpanded(true);\r\n    }\r\n  }, [expandable]);\r\n\r\n  return (\r\n    <aside className=\"z-2 sticky top-0 max-h-screen w-fit overflow-y-auto overflow-x-hidden\">\r\n      <nav className=\"bg-background flex h-full flex-col shadow-xs\">\r\n        <div\r\n          className={`flex items-center ${expanded && headerLogo ? 'justify-between' : 'justify-end'} p-4 pb-2`}\r\n        >\r\n          {headerLogo && (\r\n            <img\r\n              src={headerLogo}\r\n              alt=\"logo\"\r\n              className={`overflow-hidden transition-all ease-out ${expanded ? 'w-16' : 'w-0'}`}\r\n            />\r\n          )}\r\n          {expandable && (\r\n            <Button\r\n              type=\"button\"\r\n              onClick={() => setExpanded((curr) => !curr)}\r\n              className=\"bg-background self-end p-1.5 size-fit hover:bg-neutral dark:hover:bg-primary-15\"\r\n              title={expanded ? 'Collapse Sidebar' : 'Expand Sidebar'}\r\n            >\r\n              {expanded ? <CaretLeftIcon /> : <CaretRightIcon />}\r\n            </Button>\r\n          )}\r\n        </div>\r\n\r\n        <SidebarContext.Provider value={contextValue}>\r\n          <ul className=\"flex-1 px-3\">{children}</ul>\r\n        </SidebarContext.Provider>\r\n\r\n        {/* <div className=\"flex border-t p-3\">\r\n          <img src=\"#\" className=\"size-10 rounded-md\" />\r\n          <div className={`flex items-center justify-between overflow-hidden transition-all ${expanded ? 'ml-3 w-52' : 'w-0'} `}>\r\n            <div className=\"leading-4\">\r\n              <h4 className=\"font-semibold\">constGenius</h4>\r\n              <span className=\"text-xs text-gray-600\">constgenius@gmail.com</span>\r\n            </div>\r\n            <MoreVertical size={20} />\r\n          </div>\r\n        </div> */}\r\n      </nav>\r\n    </aside>\r\n  );\r\n};\r\n\r\nexport const SidebarItem = ({ icon, text, active, alert, onClick }: ISidebarItem) => {\r\n  const context = useContext(SidebarContext);\r\n  if (!context) {\r\n    throw new Error('SidebarItem must be used within a Sidebar');\r\n  }\r\n  const { expanded } = context;\r\n  return (\r\n    <li\r\n      onClick={() => {\r\n        onClick?.();\r\n      }}\r\n      className={`group relative my-1 flex cursor-pointer items-center rounded-md px-3 py-2 font-medium transition-colors ${active ? 'bg-primary-15 text-primary' : 'justify-center hover:bg-neutral dark:hover:bg-primary-15'}`}\r\n    >\r\n      {icon}\r\n      <span\r\n        className={`overflow-hidden transition-all ease-out ${expanded ? 'ml-3 w-40' : 'size-0'}`}\r\n      >\r\n        {text}\r\n      </span>\r\n      {alert && (\r\n        <div className={`absolute right-2 size-2 rounded bg-primary ${expanded ? '' : 'top-2'}`} />\r\n      )}\r\n\r\n      {!expanded && (\r\n        <div className=\"z-2 invisible absolute left-full ml-6 -translate-x-3 text-nowrap rounded-md bg-primary-15 px-2 py-1 text-sm text-primary opacity-20 transition-all group-hover:visible group-hover:translate-x-0 group-hover:opacity-100\">\r\n          {text}\r\n        </div>\r\n      )}\r\n    </li>\r\n  );\r\n};\r\n\r\nexport default Sidebar;\r\n",
      "type": "registry:ui"
    }
  ]
}