Sidebar

bun add --exact @floating-ui/react-dom@2.1.9 class-variance-authority@0.7.1 cn@0.4.0 lucide-preact@1.51.0 preact@11.0.0 tw-animate-css@1.4.0

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/sidebar --files LICENSE.md,registry/ui/button.tsx,registry/ui/hooks/use-mobile.ts,registry/ui/input.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/button/Button.tsx,registry/ui/primitives/button/index.ts,registry/ui/primitives/dialog/index.ts,registry/ui/primitives/dialog/parts.tsx,registry/ui/primitives/field/control/FieldControl.tsx,registry/ui/primitives/input/Input.tsx,registry/ui/primitives/input/index.ts,registry/ui/primitives/internals/FieldRootContext.ts,registry/ui/primitives/internals/FieldsetRootContext.ts,registry/ui/primitives/internals/FloatingFocusManager.tsx,registry/ui/primitives/internals/FloatingPortal.tsx,registry/ui/primitives/internals/FloatingTree.tsx,registry/ui/primitives/internals/FloatingTreeStore.ts,registry/ui/primitives/internals/FocusGuard.tsx,registry/ui/primitives/internals/LabelableContext.ts,registry/ui/primitives/internals/arrow.ts,registry/ui/primitives/internals/composite/root/CompositeRootContext.ts,registry/ui/primitives/internals/createBaseUIEventDetails.ts,registry/ui/primitives/internals/direction-context.ts,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/markOthers.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/owner.ts,registry/ui/primitives/internals/popups/OverlayContext.ts,registry/ui/primitives/internals/popups/OverlayParts.tsx,registry/ui/primitives/internals/popups/OverlayRoot.tsx,registry/ui/primitives/internals/popups/OverlayTrigger.tsx,registry/ui/primitives/internals/popups/PopupHandle.ts,registry/ui/primitives/internals/popups/TooltipProvider.tsx,registry/ui/primitives/internals/popups/getElementProps.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveRef.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/stateAttributesMapping.ts,registry/ui/primitives/internals/tabbable.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useAnchorPositioning.ts,registry/ui/primitives/internals/useAnimationFrame.ts,registry/ui/primitives/internals/useAnimationsFinished.ts,registry/ui/primitives/internals/useButton.ts,registry/ui/primitives/internals/useControlled.ts,registry/ui/primitives/internals/useDismiss.ts,registry/ui/primitives/internals/useFloatingRootContext.ts,registry/ui/primitives/internals/useFocusableWhenDisabled.ts,registry/ui/primitives/internals/useHoverFloatingInteraction.ts,registry/ui/primitives/internals/useId.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useOnMount.ts,registry/ui/primitives/internals/useOpenChangeComplete.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useScrollLock.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/internals/useTransitionStatus.ts,registry/ui/primitives/internals/visuallyHidden.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/separator/Separator.tsx,registry/ui/primitives/separator/index.ts,registry/ui/primitives/tooltip/index.ts,registry/ui/primitives/tooltip/parts.tsx,registry/ui/primitives/use-render/index.ts,registry/ui/separator.tsx,registry/ui/sheet.tsx,registry/ui/sidebar.tsx,registry/ui/skeleton.tsx,registry/ui/tooltip.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/sidebar/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/sidebar/LICENSE.md ./src/components/ui/LICENSE.md

import * as React from "preact/compat";

import { SidebarProvider, SidebarTrigger } from "./components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  )
}

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
} from "./components/ui/sidebar"

export function AppSidebar() {
  return (
    <Sidebar>
      <SidebarHeader />
      <SidebarContent>
        <SidebarGroup />
        <SidebarGroup />
      </SidebarContent>
      <SidebarFooter />
    </Sidebar>
  )
}