Header #3

2025-08-07T22:57:09Z

an.di commented

2025-08-07 22:57:09 +00:00

Add Responsive Header System

Overview

This PR adds a responsive header system for CommunityRule with two distinct variants:

Header: Standard navigation header for application pages
HomeHeader: Homepage-specific header with a unique tab + sloping arch design

The system adapts across five breakpoints, uses design tokens for styling, and ensures accessibility and performance best practices.

Changes

Implemented Header and HomeHeader components with responsive layouts
Added HeaderTab component with brand primary background and sloping SVG arch
Built MenuBarItem system with variants (default, home) and responsive sizes
Integrated Button component with avatar decoration and responsive outline logic
Implemented Avatar and AvatarContainer for overlapping avatars with breakpoint sizing
Configured responsive breakpoints (xsm, sm, md, lg, xl) with consistent logic
Styled entirely with design tokens (--color-*, --spacing-*, --radius-*, etc.)
Ensured semantic HTML + ARIA support for all nav elements and buttons
Verified WCAG 2.1 AA compliance, keyboard navigation, focus states, and contrast
Optimized performance with CSS-driven responsive behavior and minimal JS

Screenshots

Standard Header Component

![Standard Header - XLarge Breakpoint]

Standard header at xlarge breakpoint (1440px+) with maximum spacing and typography

HomeHeader Component

![HomeHeader - XLarge Breakpoint]

HomeHeader at xlarge breakpoint with premium spacing and typography

How to Test

Run the dev server and navigate to the homepage — verify HomeHeader renders with sloping arch.
Navigate to a non-home page — confirm Header renders with three-section layout.
Resize the browser and check breakpoints (xsm, sm, md, lg, xl):
- XSmall: compact, icon-only logo, condensed nav
- Small: logo + text, standard nav
- Medium: full logo, avatar overlap
- Large: enhanced spacing, larger typography
- XLarge: max spacing and premium typography
Test buttons + menu items: hover, focus, active, and disabled states.
Check accessibility:
- Keyboard navigation with Tab
- Screen reader labels
- Visible focus indicators
- Minimum color contrast ratios

Notes

HomeHeader integrates only on the homepage; standard Header is reusable for other pages.
Breakpoint logic matches the design system for consistency.
Ready for extension with future dark mode or additional nav items.

# Add Responsive Header System ## Overview This PR adds a **responsive header system** for CommunityRule with two distinct variants: - **Header**: Standard navigation header for application pages - **HomeHeader**: Homepage-specific header with a unique tab + sloping arch design The system adapts across five breakpoints, uses design tokens for styling, and ensures accessibility and performance best practices. ## Changes - Implemented **Header** and **HomeHeader** components with responsive layouts - Added **HeaderTab** component with brand primary background and sloping SVG arch - Built **MenuBarItem** system with variants (`default`, `home`) and responsive sizes - Integrated **Button** component with avatar decoration and responsive outline logic - Implemented **Avatar** and **AvatarContainer** for overlapping avatars with breakpoint sizing - Configured **responsive breakpoints** (xsm, sm, md, lg, xl) with consistent logic - Styled entirely with **design tokens** (`--color-*`, `--spacing-*`, `--radius-*`, etc.) - Ensured **semantic HTML + ARIA support** for all nav elements and buttons - Verified **WCAG 2.1 AA compliance**, keyboard navigation, focus states, and contrast - Optimized performance with CSS-driven responsive behavior and minimal JS ## Screenshots ### Standard Header Component ![Standard Header - XLarge Breakpoint] <img width="507" alt="Screenshot 2025-08-07 at 4.49.57 PM.png" src="attachments/3da02906-93f3-44e1-97f5-e6b480ca26aa"> *Standard header at xlarge breakpoint (1440px+) with maximum spacing and typography* ### HomeHeader Component ![HomeHeader - XLarge Breakpoint] <img width="507" alt="Screenshot 2025-08-07 at 4.49.47 PM.png" src="attachments/3938a429-94fc-4b54-ab04-182e0ac60784"> *HomeHeader at xlarge breakpoint with premium spacing and typography* ## How to Test 1. Run the dev server and navigate to the homepage — verify **HomeHeader** renders with sloping arch. 2. Navigate to a non-home page — confirm **Header** renders with three-section layout. 3. Resize the browser and check breakpoints (xsm, sm, md, lg, xl): - XSmall: compact, icon-only logo, condensed nav - Small: logo + text, standard nav - Medium: full logo, avatar overlap - Large: enhanced spacing, larger typography - XLarge: max spacing and premium typography 4. Test **buttons + menu items**: hover, focus, active, and disabled states. 5. Check accessibility: - Keyboard navigation with Tab - Screen reader labels - Visible focus indicators - Minimum color contrast ratios ## Notes - HomeHeader integrates only on the homepage; standard Header is reusable for other pages. - Breakpoint logic matches the design system for consistency. - Ready for extension with future dark mode or additional nav items.

Screenshot 2025-08-07 at 4.49.47 PM.png

20 KiB

Screenshot 2025-08-07 at 4.49.57 PM.png

17 KiB

an.di added 16 commits 2025-08-07 22:57:09 +00:00

Fix ESLint warnings 290761bded

Implemented smallest header breakpoint eff5dc9f97

Implemented small breakpoint a394ceaef3

Implemented md breakpoint 47f023befa

Large header breakpoint 4a1aa02a28

Code cleanup 8d50130718

XLarge header breakpoint 37caada856