# feat: Add Reusable Modal Component & Complete Layout System

[DevMuhdishaq]

Closes #308

Summary

This PR implements two major features for the StellarAid application:

1. A flexible, accessible, and reusable Modal component
2. A complete layout system with sticky Navbar, comprehensive Footer, and MainLayout wrapper

Changes Made

New Files Created

• app/components/common/Modal.tsx - Reusable modal component with accessibility features
• app/components/layout/Navbar.tsx - Sticky, responsive navigation bar
• app/components/layout/Footer.tsx - Comprehensive footer with links and social icons
• app/components/layout/MainLayout.tsx - Wrapper component combining Navbar and Footer
• app/components/layout/index.ts - Export file for all layout components

Files Modified

• app/components/common/index.ts - Added Modal component export
• app/page.tsx - Updated to use MainLayout for consistent page structure

Feature Details

🎯 Reusable Modal Component

File: app/components/common/Modal.tsx

Props Supported

• isOpen: boolean - Controls modal visibility
• onClose: () => void - Callback to close the modal
• title?: string - Optional modal title
• children: ReactNode - Modal content
• size?: 'sm' | 'md' | 'lg' - Modal size variants (defaults to 'md')

Key Features

• ✅ Accessibility: Focus trapping, Escape key support, ARIA attributes
• ✅ React Portal: Renders outside main DOM hierarchy to avoid z-index issues
• ✅ Animations: Smooth fade + scale transitions with Tailwind CSS
• ✅ Close on backdrop click: Click outside modal content to close
• ✅ Focus restoration: Returns focus to previous element on close
• ✅ Scroll prevention: Disables background scrolling when modal is open
• ✅ Dark mode compatible: Works with Tailwind's dark mode

---

🎯 Layout System

Files: Navbar.tsx, Footer.tsx, MainLayout.tsx

Navbar Features

• ✅ Sticky positioning: Stays at top during scroll with backdrop blur
• ✅ Responsive design: Desktop navigation + hamburger menu for mobile
• ✅ Auth state aware: Shows Login/Sign Up or user avatar dropdown
• ✅ User menu: Dashboard, My Campaigns, Settings, Logout options
• ✅ Scroll effect: Changes style when user scrolls down
• ✅ Next.js Image component: Optimized image loading for user avatars

Footer Features

• ✅ Organized link sections: Product, Company, Support, Legal
• ✅ Social media icons: Twitter, GitHub, LinkedIn, Facebook
• ✅ Brand information: Project description and logo
• ✅ Dynamic copyright: Auto-updating copyright year
• ✅ Dark mode support: Fully compatible with dark theme

MainLayout Features

• ✅ Flexible wrapper: Wraps all page content consistently
• ✅ Min-height layout: Footer stays at bottom even with short content
• ✅ Auth props: Accepts isLoggedIn and user for conditional rendering
• ✅ Applies to all pages: Maintains consistent layout across application

Technical Improvements

• Fixed all TypeScript errors in Modal component with proper non-null assertions
• Resolved Next.js Image warning by using next/image instead of native <img>
• Added proper TypeScript interfaces for all component props
• Implemented WCAG 2.1 AA accessibility standards
• Added responsive design for all screen sizes
• Added smooth animations and transitions

Testing

• Modal opens/closes correctly
• Escape key closes modal
• Focus is properly trapped within modal
• Navbar responsive hamburger menu works on mobile
• Footer displays correctly on all page sizes
• Auth state switching works in Navbar
• Build compiles successfully with no TypeScript errors

Screenshots (if applicable)

• Modal component in action
• Desktop navigation view
• Mobile hamburger menu
• Footer layout

Checklist

• Code compiles without errors
• TypeScript types are properly implemented
• Accessibility standards met
• Responsive design works across devices
• All acceptance criteria fulfilled
• Components are reusable and maintainable

Closes #309

[drips-wave]

@DevMuhdishaq Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits