# Sidebar

Level: organism.

## Purpose and use

Show the current desktop navigation-shell composition with account area and
collapsible sections. This is a fixture-based shell, not a configurable router.
It includes the fixed `Ремонт и ТО` group for the repair-and-maintenance area.

## Anatomy, behavior, and accessibility

- Branded header and named collapse action lead into an account menu, divider,
  named navigation region and version-copy footer. Collapsed mode uses compact
  Sidebar Tabs.
- The sidebar stays an inline desktop navigation shell at every CSS viewport
  width, including a browser zoom level that makes the viewport narrower than
  1280px. Expanded and collapsed widths remain the component's desktop widths;
  it never becomes a fixed-position drawer.
- `collapsed` is parent-controlled. Only the named collapse control emits
  `collapsedChange`; the sidebar has no modal backdrop or backdrop-close action.
  Each section's openness remains local state and is independent of
  activeSubtabId.
- Subtabs are fixed in the source. activeSubtabId optionally controls the active
  fixed subtab and exposes aria-current="page" on that destination, but does not
  open its owning group. The group stays collapsible and shows the active child
  when the user opens it. Local selection changes visual active state and emits
  the selected fixed item through `subtabSelect`; the Sidebar itself does not
  know routes or navigate. Account menu contents are also built in.
- The fixed `Ремонт и ТО` group uses the `repair` icon and follows `Логистика
  внутренняя` in the menu. Its children are ordered: `Аналитика ремонтов`,
  `Ремонтные листы`, then `Заявки на ремонт`.
- `Аналитика ремонтов` is a planned visual-only entry. This contract defines no
  route, screen, data, or navigation outcome for it. `Ремонтные листы` and
  `Заявки на ремонт` remain fixed Sidebar items; the consuming shell, rather
  than this organism, maps their selected IDs to `/repair-sheets` and `/`.
- Version copy writes the displayed version through Clipboard API and shows
  «Скопировано» feedback for three seconds. Collapse/version actions have names;
  tab descendants supply labels and compact tooltips. The navigation is not
  modal, so it neither adds a focus-blocking overlay nor traps focus.

## Open Questions

There are no public menu, account, route, or permission inputs. `subtabSelect`
only reports a fixed selected item; the shell decides whether it has a route.
Fixture labels/version are not production data. Clipboard failures are not caught
or presented; real navigation/account integration needs a separate contract change.
The planned repair analytics entry needs an authorized screen and route contract
before it can become a destination.

## Local component contract

This is the active owned contract for `component.sidebar`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblSidebarComponent` — `wbl-sidebar` (src/app/design-system/organisms/sidebar/sidebar.component.ts).

### Inputs

- `WblSidebarComponent.collapsed = input(false)`
- `WblSidebarComponent.activeSubtabId = input<string | null>(null)` — optional
  controlled ID for one fixed subtab; it does not change its parent group's
  openness.

### Models

- None.

### Outputs

- `WblSidebarComponent.collapsedChange = output<boolean>()`
- `WblSidebarComponent.subtabSelect = output<WblSidebarSubtabItem>()` — emits
  the locally selected fixed subtab after its local selected state is updated.

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Code: `src/app/design-system/organisms/sidebar/sidebar.component.ts`.
- Focused test: `src/app/design-system/organisms/sidebar/sidebar.component.spec.ts`.
- Public export: `export * from './organisms/sidebar/sidebar.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/sidebar.stories.ts` (`Design System/Organisms/wbl-sidebar`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.
The supplied repair-and-maintenance screenshot is a visual reference for labels
and order only; it is neither a Figma source nor visual-verification evidence.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.

## M-002 refinement

- The navigation menu uses the custom scrollbar treatment evidenced by Sidebar
  UI Kit node
  [`19120:65078`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/?node-id=19120-65078).
  Its 4px native scrollbar has a transparent track and pill-radius thumb using
  tertiary `#c4c4d4`. The thumb is transparent at rest and becomes visible on
  menu hover or `focus-within` without changing menu width or scroll position.
  Keyboard and wheel scrolling remain available while the thumb is hidden.
- The collapse control is wrapped by the shared Tooltip. Its text is the action
  followed by the current platform shortcut without separator punctuation:
  «Свернуть ⌘ B» / «Развернуть ⌘ B» on macOS and «Свернуть Ctrl B» /
  «Развернуть Ctrl B» on Windows/Linux.
- `Ctrl+B` on Windows/Linux and `⌘B` on macOS invoke the same controlled
  collapse/expand path as the button. Events from input, textarea, select and
  editable content are ignored. The shortcut cannot mutate a second local state;
  `collapsedChange` remains the public state transition.

Platform detection and document key handling are internal behavior; no new
public Sidebar input or output is added.

## M-002 collapsed geometry refinement

- The menu sets `overflow-x: hidden`. Its `--space-300` outer gutter uses equal
  negative inline-end margin and inline-end padding, placing the vertical
  scrollbar outside navigation content without covering labels or targets.
- Collapsed Sidebar has no horizontal scrollbar or horizontal scroll range.
- Expanded and collapsed modes use the same `/logo/Logo.svg` at x=12. The
  collapsed wrapper clips only the wordmark text, keeping the logo anchor stable
  throughout the width transition.
- Collapse Tooltip removes the middle-dot separator. macOS copy is «Свернуть
  ⌘ B» / «Развернуть ⌘ B»; Windows/Linux copy is «Свернуть Ctrl B» /
  «Развернуть Ctrl B». The modifier and `B` use thin space U+2009.

These are current internal layout and copy rules. Existing `collapsed` and
`collapsedChange` contracts remain unchanged and focused tests cover the
collapsed overflow, logo asset/position, tooltip copy, and editable-target guard.