Header #3

Merged
an.di merged 16 commits from adilallo/Header into main 2025-08-07 22:58:34 +00:00
Owner

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]
Screenshot 2025-08-07 at 4.49.57 PM.png
Standard header at xlarge breakpoint (1440px+) with maximum spacing and typography

HomeHeader Component

![HomeHeader - XLarge Breakpoint]
Screenshot 2025-08-07 at 4.49.47 PM.png
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.
# 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.
an.di added 16 commits 2025-08-07 22:57:09 +00:00
an.di self-assigned this 2025-08-07 22:57:17 +00:00
an.di merged commit fb412b7415 into main 2025-08-07 22:58:34 +00:00
an.di deleted branch adilallo/Header 2025-08-07 22:58:34 +00:00
an.di changed title from adilallo/Header to Header 2025-08-14 20:48:57 +00:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#3