@neynar/ui/llm-docs/use-sidebar.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# useSidebar

**Type**: hook

Hook to access sidebar state and control functions Provides access to the sidebar's state management including expanded/collapsed states, mobile-specific behavior, and toggle functions. This hook must be used within a SidebarProvider component tree to function properly.

## API Surface

```typescript
import { useSidebar } from '@neynar/ui';

export function useSidebar(): ReturnType<typeof useSidebar> { ... }
```

## Returns

**Return Type**: `ReturnType<typeof useSidebar>`


**Description**: Object containing sidebar state and control functions:
- `state`: "expanded" | "collapsed" - Current sidebar state
- `open`: boolean - Whether sidebar is open (desktop)
- `setOpen`: (open: boolean) => void - Function to control sidebar open state
- `openMobile`: boolean - Whether sidebar is open on mobile
- `setOpenMobile`: (open: boolean) => void - Function to control mobile sidebar state
- `isMobile`: boolean - Whether current viewport is considered mobile
- `toggleSidebar`: () => void - Function to toggle sidebar state
## Usage

```typescript
import { useSidebar } from '@neynar/ui';

const result = useSidebar();
```

## Examples

### Example 1
```tsx
// Basic usage for toggle button
function ToggleButton() {
  const { state, toggleSidebar } = useSidebar()
  return (
    <button onClick={toggleSidebar}>
      {state === "expanded" ? "Collapse" : "Expand"}
    </button>
  )
}
```
### Example 2
```tsx
// Conditional rendering based on state
function ConditionalContent() {
  const { state, isMobile } = useSidebar()
  if (isMobile) return <MobileOnlyContent />
  return state === "expanded" ? <FullContent /> : <CompactContent />
}
```
## Throws

- When used outside of SidebarProvider context