This component utilizes Framer’s Variants and Smart Animate to create a fluid "morphing" experience. Here is how the interaction flow is structured:
Stage 1: The Trigger (Collapsed State)
Visuals: A simple, rounded-square button containing a two-line "equal" icon.
Purpose: Acts as a floating action button or a discreet menu trigger to keep the UI clean.
Interaction: On Click, the component transitions to the "Header" variant.
Stage 2: The Header (Identity State)
Visuals: The icon expands horizontally into a translucent pill-shaped bar. It displays the user's avatar (E. Farid), their unique ID, a purple "Team" badge, and a close (X) icon.
Purpose: Provides immediate context of "who" is logged in without taking up the whole screen.
Interaction: On Click (anywhere on the bar), the component triggers a vertical expansion to show the full list.
Stage 3: The Dashboard (Expanded State)
Visuals: The pill expands downward into a full-sized vertical menu. It retains the header but adds a structured list of items:
Members: Showing count (24).
Business Target & Mailbox: Navigational links with chevron indicators.
Achievements: Featuring a "New" badge.
Security: "Reset Fingerprints" and a "Make Private" toggle.
Interaction: Clicking the (X) or clicking outside the component typically returns it to the Stage 1 icon state.
M Umar Baig
