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.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Add Responsive Header System
Overview
This PR adds a responsive header system for CommunityRule with two distinct variants:
The system adapts across five breakpoints, uses design tokens for styling, and ensures accessibility and performance best practices.
Changes
default,home) and responsive sizes--color-*,--spacing-*,--radius-*, etc.)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
Notes
adilallo/Headerto Header