Skip to content

feat: implement header component with navigation #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 7, 2025

Conversation

nullcoder
Copy link
Owner

Summary

  • Implements a sticky header with GhostPaste branding and navigation
  • Adds responsive design with mobile hamburger menu for screens < 768px
  • Integrates theme toggle in both desktop and mobile views
  • Includes comprehensive accessibility features

Features Implemented

Desktop Navigation

  • Sticky header with backdrop blur effect
  • Ghost emoji logo with "GhostPaste" text linking to home
  • Navigation links: Create, About, GitHub (external)
  • Theme toggle button
  • Clean, minimal design

Mobile Navigation

  • Hamburger menu that opens a slide-out drawer
  • Same navigation options with improved touch targets
  • Emoji icons for visual interest in mobile menu
  • Smooth animations

Accessibility

  • Skip to main content link (visible on keyboard focus)
  • Proper ARIA labels on all interactive elements
  • Keyboard navigation support (Tab, Enter, Escape)
  • Screen reader compatible

Technical Details

  • Uses shadcn/ui components (NavigationMenu, Sheet)
  • Custom GitHub icon using Simple Icons SVG
  • Comprehensive test suite with 100% coverage
  • Demo page at /demo/header for testing
  • Removed redundant header from home page

Test Plan

  • Desktop navigation works correctly
  • Mobile menu opens/closes properly
  • Theme toggle functions in both views
  • All navigation links work
  • Keyboard navigation is fully supported
  • Skip link is accessible via Tab
  • Tests pass
  • Lint and typecheck pass

Closes #53

🤖 Generated with Claude Code

nullcoder and others added 2 commits June 6, 2025 20:11
- Add sticky header with GhostPaste branding and ghost icon
- Implement desktop navigation with Create, About, and GitHub links
- Add mobile-responsive hamburger menu for screens < 768px
- Integrate theme toggle in both desktop and mobile views
- Include accessibility features (skip link, ARIA labels, keyboard nav)
- Install shadcn/ui navigation-menu and sheet components
- Create custom GitHub icon using Simple Icons SVG
- Add comprehensive test suite for header functionality
- Remove redundant header from home page
- Create demo page for testing header responsiveness

Closes #53

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Copy link

cloudflare-workers-and-pages bot commented Jun 7, 2025

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
ghostpaste 5d77d05 Visit preview Jun 07 2025, 03:16 AM

@nullcoder nullcoder merged commit 03dc15c into main Jun 7, 2025
1 check passed
@nullcoder nullcoder deleted the feat/header-navigation branch June 7, 2025 03:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: create header component with navigation
1 participant