# Collapsible Sidebar Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Add a professional compact mode to the NataAset dashboard sidebar.

**Architecture:** Keep the existing desktop sidebar and mobile drawer. Add a desktop-only collapse toggle that changes an `is-sidebar-collapsed` class on `.app-canvas`, stores the state in `localStorage`, and triggers a one-shot logo spin animation.

**Tech Stack:** Laravel Blade, vanilla JavaScript, CSS transitions/animations, PHPUnit feature tests.

---

### Task 1: Add Sidebar Collapse Contract

**Files:**
- Modify: `tests/Feature/ExampleTest.php`

- [ ] **Step 1: Write failing assertions**

Assert the layout renders `data-sidebar-collapse-toggle`, and assets contain `is-sidebar-collapsed`, `sidebarCollapseStorageKey`, and `brandLogoSpin`.

- [ ] **Step 2: Verify red**

Run: `php artisan test --filter=test_dashboard_sidebar_can_collapse_to_icon_rail`

Expected: FAIL because the collapse markup and asset identifiers do not exist yet.

### Task 2: Implement Markup and Behavior

**Files:**
- Modify: `resources/views/layouts/app.blade.php`
- Modify: `public/assets/js/dashboard.js`

- [ ] **Step 1: Add toggle button**

Place a small icon button inside `<aside class="app-sidebar">` with `data-sidebar-collapse-toggle`, `aria-expanded="true"`, and a chevron icon.

- [ ] **Step 2: Add JS state**

Read and write `inventory-sidebar-collapsed`, toggle `.is-sidebar-collapsed` on `.app-canvas`, update button label/icon, and add `.is-logo-spinning` briefly to `.brand-mark`.

### Task 3: Style Compact Sidebar

**Files:**
- Modify: `public/assets/css/dashboard-redesign.css`

- [ ] **Step 1: Add desktop collapse styles**

On desktop, make sidebar width `84px`, center icons, hide menu text, hide brand text, rotate the logo once on toggle, and keep mobile drawer behavior unchanged.

- [ ] **Step 2: Verify**

Run:
`node --check public\assets\js\dashboard.js`
`php artisan view:cache`
`php artisan test`
`php artisan view:clear`
