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.

The navigation menu uses the custom scrollbar treatment evidenced by Sidebar UI Kit node 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.

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.