# Reference: Interactions, Responsive Design, and Accessibility > Extracted from goal.md — Interactions, Responsive Strategy, and Accessibility sections. --- ## Interactions and Micro-interactions ### Sidebar Navigation - Clicking a sidebar item instantly swaps the main content area. No crossfade, no transition — just an immediate swap. This matches clinical system behavior exactly: navigation is instant. - The active sidebar item updates its left border (3px, NHS blue) and background tint simultaneously, with no animation (instant state change). ### Consultation Expand / Collapse - Clicking a consultation entry toggles between collapsed and expanded states. - The expand animation: height grows from 0 to content height over 200ms, ease-out. Content opacity transitions from 0 to 1 over the same duration. - Only one consultation can be expanded at a time. Expanding a new entry collapses the previous one. - The expand chevron rotates 180 degrees (pointing up when expanded). ### Medication Row Hover - Hovering a medication table row changes its background to `#EFF6FF` (subtle blue tint). - No transform, no elevation change. Just color. ### Table Column Sorting - Clicking a table column header sorts by that column. An arrow indicator (up/down) appears in the header. - Clicking the same header again reverses sort direction. - Sorting is instant (no animation on row reordering). ### Patient Banner Scroll Condensation - As the user scrolls past 100px of content, the patient banner smoothly transitions from full (80px) to condensed (48px) over 200ms. - The condensed banner shows only: name, NHS number, status dot, and action buttons. - Scrolling back to top restores the full banner. - Uses `position: sticky` with an `IntersectionObserver` to trigger the condensation. ### Alert Acknowledge - Clicking "Acknowledge" on a clinical alert: 1. The warning icon cross-fades to a green checkmark (200ms) 2. After a 200ms hold, the alert's height animates to 0 (200ms, ease-out) 3. Content below shifts upward to fill the space (same 200ms timing) ### Search - A search input in the sidebar header ("Search record...") provides fuzzy matching across all PMR sections. - Typing shows a dropdown of results grouped by section (Consultations, Medications, Problems, etc.). - Each result shows the section icon, the matching text, and a relevance indicator. - Pressing Enter or clicking a result navigates to that section with the matching item highlighted/expanded. - Implementation: fuse.js for fuzzy search across a pre-built index of all content. ### Context Menus - Right-clicking (desktop) or long-pressing (mobile) on certain elements reveals a context menu: - On a consultation entry: "Expand", "Copy to clipboard", "View coded entries" - On a medication row: "View prescribing history", "Copy to clipboard" - On a problem entry: "View linked consultations", "Copy to clipboard" - Context menus styled: white background, `1px solid #E5E7EB` border, 4px radius, `box-shadow: 0 4px 12px rgba(0,0,0,0.1)`. Items in Inter 400, 14px, 36px row height. ### Login Screen Typing - The username types character-by-character (30ms per character). - The password dots appear faster (20ms per dot). - A blinking cursor appears in the active field (530ms blink interval). - The "Log In" button shows a brief active/pressed state before the interface materializes. --- ## Responsive Strategy ### Desktop (>1024px) The full PMR experience. This is the design's primary target — clinical systems are desktop applications. - Sidebar: 220px, always visible, dark blue-gray - Patient banner: full width, 80px height, condensing to 48px on scroll - Main content: fills remaining width (no max-width constraint) - Tables: full column display, alternating row colors, sort controls - Consultations: full History/Examination/Plan expanded view - Search: integrated in sidebar header ### Tablet (768-1024px) Sidebar collapses to icon-only mode (56px width). Hovering or tapping an icon shows the label as a tooltip. - Patient banner: condensed to single-line format always (no full/condensed toggle) - Main content: nearly full width - Tables: may horizontally scroll if columns exceed available width - Context menus: triggered by long-press instead of right-click ### Mobile (<768px) The sidebar becomes a **bottom navigation bar** with 7 icon buttons. **Bottom nav layout:** ``` [Summary] [Consult] [Meds] [Problems] [Invest] [Docs] [Refer] ``` Each icon from Lucide, 20px, with the active item highlighted in NHS blue with a label below. Height: 56px with safe area padding. **Patient banner on mobile:** Minimal top bar: `CHARLWOOD, A (Mr) | 2211810 | (dot)` — action buttons collapse into "..." overflow menu. **Content adaptations:** - Tables switch to card layout: each row becomes a small card with fields stacked vertically - Consultation entries: tap-to-expand pattern with larger tap targets (48px minimum height) - Medications: table becomes stacked card list - Referral form: full-width inputs, generous touch targets - Search: moves to top of each view as a search bar **Back navigation:** Each view has a back arrow returning to Summary. ### Breakpoint Summary | Element | Desktop (>1024) | Tablet (768-1024) | Mobile (<768) | |---------|-----------------|-------------------|---------------| | Sidebar | 220px, full labels | 56px, icons only | Bottom nav bar | | Patient banner | 80px full / 48px sticky | 48px always | Minimal top bar | | Tables | Full columns, horizontal | Scroll if needed | Card layout (stacked) | | Search | Sidebar header | Sidebar header | Top of each view | | Context menus | Right-click | Long-press | Long-press | --- ## Accessibility ### Semantic HTML - Sidebar: `