Sidebar Header Animation

This document outlines the requirements for implementing the header animation in the Sidebar for the Calendars project.

Task Description

The goal is to implement complex scroll behavior and element animation within the Sidebar header. The logic is based on existing animation references within the project (opening the sidebar or swiping the site).

Main Objective: Add a dynamic header to the existing scrollable lists (Scroll View) with a step-by-step collapsing animation implementation.

Sidebar Structure

The Sidebar consists of three main parts:

1. Header – The main animation area with dynamic content.
2. Table – The scrollable content area.
3. Footer – The bottom section.

The header behavior must function correctly in interaction with all three parts.

References

Detailed animation behavior can be viewed in the video attachments provided in the repository.

---

Technical Implementation

The repository contains templates using three different technology stacks. You may choose any single option to complete the task:

• SwiftUI
• UIKit + Auto Layout (Constraints)
• UIKit + Manual Layout (Frame-based / layoutSubviews)

Note: The starting code already includes implemented scrollable lists. Your task is to integrate the header into this flow using the selected approach.

---

Functional Requirements

Animation Logic (Simplified Model)

To optimize the development process, the task uses a simplified model with 5 conditional elements.

Logic Matrix:

Mode (Anchor Point)	Element State	Description
1. Collapsed	Only Element 2	Displays minimum information (equivalent to Date/Inbox). All other elements are hidden.
2. Expanded	Element 2 + (1, 4, 5)	Element 3 is hidden first. Elements 1, 2, 4, and 5 remain visible.
3. Search	All Elements + Search	Activated by pulling down from the Expanded state.

Scroll Behavior:

1. Element 3 hides first when scrolling up.
2. Elements 1, 4, and 5 hide one by one in the next phase.
3. Element 2 remains pinned (visible) at all times. Ignore spaces changing.

---

Scope & Acceptance Criteria

Minimal Implementation

The minimal implementation of the task must include:

• Integration of the header with the scroll container.
• Step-by-step hiding and revealing of elements according to the Logic Matrix.
• Smooth animation transitions depending on the scroll offset. It can be a simple opacity animation.

Nice to have

• Target offset calculation depending on scroll speed and direction.
• Shift animation of elements and dynamic height of element 2.

Here is the updated section with the clarification that a verbal explanation is acceptable.

Architecture and Scalability

While the implementation code can be simple, it is critically important to demonstrate your architectural vision. You may choose to document this in the repository or describe it verbally during the interview call.

Requirements (to be documented or discussed):

1. Describe an approach that allows adding new elements to any section of the header without rewriting the animation logic.
2. Propose a structure for classes/components to support dynamic content in the future.

Note: You may implement the solution straightforwardly for speed, provided you can articulate how this should be structured in an ideal enterprise-level architecture.