Function SidebarContainer

apps/start/src/components/sidebar.tsx:74–177

({
  organizations,
  projects,
  children,
}: SidebarContainerProps)

}

export function SidebarContainer({
  organizations,
  projects,
  children,
}: SidebarContainerProps) {
  const [active, setActive] = useState(false);
  const location = useLocation();
  const { isSelfHosted } = useAppContext();
  const { projectId } = useParams({ strict: false });
  const { isOpen: chatOpen, openChatForContext, closeChat } = useChatState();

  useEffect(() => {
    setActive(false);
  }, [location]);

  return (
    <>
      <button
        className={cn(
          'fixed top-0 right-0 bottom-0 left-0 z-40 backdrop-blur-sm transition-opacity',
          active
            ? 'pointer-events-auto opacity-100'
            : 'pointer-events-none opacity-0'
        )}
        onClick={() => setActive(false)}
        type="button"
      />
      <div
        className={cn(
          'fixed top-0 left-0 z-40 flex h-screen w-72 flex-col border-border border-r bg-card transition-transform',
          '-translate-x-72 lg:-translate-x-0', // responsive
          active && 'translate-x-0' // force active on mobile
        )}
      >
        <div className="absolute -right-12 flex h-16 items-center lg:hidden">
          <Button
            onClick={() => setActive((p) => !p)}
            size="icon"
            variant={'outline'}
          >
            {active ? <XIcon size={16} /> : <MenuIcon size={16} />}
          </Button>
        </div>
        <div className="flex h-16 shrink-0 items-center gap-2 border-border border-b px-4">
          <Link to="/">
            <LogoSquare className="max-h-8" />
          </Link>
          <ProjectSelector
            align="start"
            organizations={organizations}
            projects={projects}
          />
        </div>
        <div
          className={cn([
            'hide-scrollbar flex-1 overflow-auto p-4',
            "[&_a[data-status='active']]:bg-def-200",
          ])}