# platform-web-theme-menu Specification

## ADDED Requirements

### Requirement: Default black mecha theme

The platform web console SHALL default to a black mecha operations visual theme.

#### Scenario: New visitor loads the console

- **WHEN** no stored theme preference exists
- **THEN** the active palette is `mecha-black`
- **AND** the active background preset is `mecha-grid`
- **AND** primary surfaces use dark mecha panel materials rather than pink magical materials

### Requirement: Selectable magical-girl theme

The platform web console SHALL retain a selectable magical-girl theme.

#### Scenario: User selects magical-girl palette

- **WHEN** the magical-girl palette is active
- **THEN** shell navigation, cards, panels, and global particles use pink/gold magical materials
- **AND** the global particle layer shows a visible magic circle or equivalent magical ultimate motif

### Requirement: Theme-specific frames and panels

Shared framed UI surfaces SHALL vary by active theme family.

#### Scenario: Comparing themes

- **WHEN** the user switches between mecha and magical-girl themes
- **THEN** repeated panels, cards, and navigation entries change border treatment, fill material, and glow style
- **AND** the change is not limited to text color or accent color

### Requirement: Collapsible admin sidebar menu

The application shell SHALL render the primary menu as a compact admin sidebar with expanded and collapsed states.

#### Scenario: User views the shell menu

- **WHEN** primary navigation routes are available
- **THEN** they appear as high-level sidebar items with icons, bold labels, and active state framing
- **AND** no single-column / double-column menu mode is shown

### Requirement: Sidebar collapse toggle

The application shell SHALL provide a sidebar toggle for icon-only and full-menu states.

#### Scenario: User changes sidebar state

- **WHEN** the user activates the sidebar toggle
- **THEN** the sidebar switches between a narrow icon rail and an expanded text menu
- **AND** route navigation remains available in both states

### Requirement: Global theme particles only

Theme ultimate effects SHALL be implemented through the shared global background and particle layers.

#### Scenario: New decorative effect is needed

- **WHEN** adding theme-level particles, magic circles, scanner sweeps, or sparkles
- **THEN** the implementation uses `components/MagicalParticleLayer.tsx`
- **AND** page-local fixed decorative DOM elements are not introduced