grasscnGitHub

Sidebar

Minecraft navigation compositions with a provider-owned state model.

Preview

Choose a world
Loading example...
To run this copied example, install these items using the linked CLI or manual instructions:

Usage

SidebarProvider is required; useSidebar throws outside it. The primary example explicitly uses collapsible="none" to remain inside its preview. The actual Sidebar default is offcanvas, side="left", variant="sidebar"; icon and none are also supported collapse modes. Other visual variants throw.

Composition

The responsive example below uses the actual default offcanvas mode, SidebarTrigger and controlled open/onOpenChange. At widths up to 767px a separate openMobile state drives Sheet; desktop open does not control mobile visibility. Control/Command+B toggles globally. The provider writes sidebar_state for seven days but never reads it: pass your chosen defaultOpen explicitly to restore a stored preference.

Use the trigger or Control/Command+B.
Loading example...
To run this copied example, install these items using the linked CLI or manual instructions:

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

Component implementationcomponents/ui/sidebar.tsx · tsx
"use client";

import { cva } from "class-variance-authority";
import * as React from "react";
import { isPortal } from "react-is";

import { Button, buttonVariants } from "./button";
import { Card } from "./card";
import { Input } from "./input";
import { MinecraftDisclosureText } from "./minecraft-disclosure-text";
import {
  isMinecraftEmptyChild,

Interactive playground

Grasscn
Choose a world.
Survival
Local world
SurvivalReady

The responsive example gives its provider a transform to contain desktop fixed positioning within the example. Omit that containing context for a viewport-wide application sidebar. Its mobile Sheet is still a portal overlay.