feat(layout/header): collapsible header component with navigation elements

[bahaha]

Header component in the layout used in the public pages

Functional requirement

• Collapsible/expandable navigation menu on mobile device
• Always-visible primary navigation elements (logo, login, ...etc)
• Smooth transition animations
• Accessible navigation controls
• Smooth backdrop blur effect on supported devices

Non-functional requirement

• Performance optimized animations
• Minimal layout shifts
• Navigation shortcuts on specific key press, like L for log-in

[bahaha]

Menu collapse/expand state management approaches

Approach 1: Pure css only by hidden checkbox with connected label

<header>
    <input type="checkbox" id="header-nav" class="hidden" />
    <label for="header-nav">
       <!-- ... menu ... -->
    </label>
</header>

header { /** styles on menu is collapsed */ }
header:has(#header-nav:checked) { /** styles on menu is expanded */ }

Pros

• without Javascript
• SSR compatible out of the box
• No hydration issues

Cons

• More complex css selectors
• Less programmatic control leads to different component design

Approach 2: React state management

const [isExpand, setIsExpand] = useState(false);

Pros

• Flexible state management
• Easier integration with other components
• Better programmatic control
• Cleaner CSS

Cons

• Require client-side Javascript runtime force use client directive for component

---

Decision

Choose Approach 1: Pure css only by hidden checkbox with connected label for

• Better SSR compatibility
• Performance benefits

[bahaha]

Menu backdrop effects and its collapsing animations

Approach 1: Height transition

header {
  height: var(--header-height);
  transition: height .3s;
  will-change: height; /** isolate layer to eliminate affected elements on reflow triggered by menu state changes"
}
header.expanded {
  height: calc(100% - var(--v-spacing));
}

Pros

• Straightforward and simple implementation
• Easy to understand

Cons

• Unstable header height might have poor performance with backdrop filter
• Less smooth with border radius

Approach 2: Clip-path with pseudo element

header {
  position: fixed;
  clip-path: inset(0 0 calc(100% - var(--collapsed-header-height)) 0 round 12px);
  transition: clip-path .3s;
  will-change: clip-path; 
}
header::before {
  content: '';
  position: absolute;
  inset: 0;
  height: var(--collapsed-header-height);
  transition: height .3s;
}

Pros

• GPU-accelerated animations
• Maintain border-radius during transition
• Clean animation with no layout shift

Cons

• Complex implementation
• Needs careful height management

---

Decision

Choose Approach 2: Clip-path with pseudo element for

• Performance Benefits
• Prevents backdrop filters recalculation
• Visual consistency