# Kanvaro - Mobile Responsiveness & Adaptive Design ## Overview Kanvaro is built with a mobile-first approach using [shadcn/ui](https://ui.shadcn.com/) components that are inherently responsive. The application adapts seamlessly to any screen size, from mobile phones to large desktop displays, ensuring optimal user experience across all devices. ## Mobile-First Design Strategy ### Responsive Breakpoints ```typescript // tailwind.config.js module.exports = { theme: { screens: { 'xs': '475px', // Extra small devices 'sm': '640px', // Small devices (phones) 'md': '768px', // Medium devices (tablets) 'lg': '1024px', // Large devices (laptops) 'xl': '1280px', // Extra large devices (desktops) '2xl': '1536px', // 2X large devices (large desktops) } } } ``` ### shadcn/ui Responsive Components #### Responsive Navigation ```typescript // components/layout/ResponsiveNavigation.tsx import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@/components/ui/navigation-menu'; import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; import { Button } from '@/components/ui/button'; import { Menu, X } from 'lucide-react'; import { useState } from 'react'; export const ResponsiveNavigation = () => { const [isOpen, setIsOpen] = useState(false); return ( <> {/* Desktop Navigation */} Projects

All Projects Active Projects Completed Projects

Tasks Team {/* Mobile Navigation */}

); }; ``` #### Responsive Dashboard Layout ```typescript // components/dashboard/ResponsiveDashboard.tsx import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Progress } from '@/components/ui/progress'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; export const ResponsiveDashboard = () => { return (

{/* Responsive Grid Layout */}

Total Projects 12

+2 from last month

Active Tasks 24

+4 from yesterday

Team Members 8

+1 new member

Completion Rate 85%

85%

{/* Responsive Tabs */} Overview Projects Tasks Team

); }; ``` #### Responsive Project Cards ```typescript // components/projects/ResponsiveProjectCard.tsx import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Progress } from '@/components/ui/progress'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { Calendar, Users, Clock } from 'lucide-react'; export const ResponsiveProjectCard = ({ project }) => { return (

{project.name} {project.status}

{/* Project Description */}

{project.description}

{/* Progress Section */}

Progress {project.progress}%

{/* Team Members */}

Team

{project.team.slice(0, 3).map((member) => ( {member.name[0]} ))} {project.team.length > 3 && (

+{project.team.length - 3}

)}

{/* Project Meta */}

{project.dueDate}

{project.estimatedHours}h

); }; ``` #### Responsive Data Tables ```typescript // components/tables/ResponsiveDataTable.tsx import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Progress } from '@/components/ui/progress'; import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; import { Menu, MoreHorizontal } from 'lucide-react'; export const ResponsiveDataTable = ({ data }) => { return (

{/* Desktop Table */}

Projects Project Status Team Progress Due Date {data.map((project) => ( {project.name} {project.status}

{project.team.slice(0, 3).map((member) => ( {member.name[0]} ))}

{project.progress}%

{project.dueDate} ))}

{/* Mobile Cards */}

{data.map((project) => (

{project.name} {project.status}

{/* Team Members */}

Team

{project.team.slice(0, 3).map((member) => ( {member.name[0]} ))}

{/* Progress */}

Progress {project.progress}%

{/* Due Date */}

Due Date {project.dueDate}

{/* Actions */}

))}

); }; ``` ## Mobile-Specific Features ### Touch Gestures ```typescript // hooks/useTouchGestures.ts import { useCallback, useRef } from 'react'; export const useTouchGestures = () => { const touchStart = useRef<{ x: number; y: number } | null>(null); const touchEnd = useRef<{ x: number; y: number } | null>(null); const handleTouchStart = useCallback((e: React.TouchEvent) => { touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }, []); const handleTouchEnd = useCallback((e: React.TouchEvent) => { touchEnd.current = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY }; }, []); const handleSwipe = useCallback((onSwipeLeft?: () => void, onSwipeRight?: () => void) => { if (!touchStart.current || !touchEnd.current) return; const deltaX = touchEnd.current.x - touchStart.current.x; const deltaY = touchEnd.current.y - touchStart.current.y; // Horizontal swipe if (Math.abs(deltaX) > Math.abs(deltaY)) { if (deltaX > 50 && onSwipeRight) { onSwipeRight(); } else if (deltaX < -50 && onSwipeLeft) { onSwipeLeft(); } } }, []); return { handleTouchStart, handleTouchEnd, handleSwipe }; }; ``` ### Mobile Navigation ```typescript // components/layout/MobileNavigation.tsx import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; import { Button } from '@/components/ui/button'; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@/components/ui/navigation-menu'; import { Menu, Home, FolderOpen, Users, Settings, LogOut } from 'lucide-react'; export const MobileNavigation = () => { const [isOpen, setIsOpen] = useState(false); const navigationItems = [ { href: '/dashboard', label: 'Dashboard', icon: Home }, { href: '/projects', label: 'Projects', icon: FolderOpen }, { href: '/tasks', label: 'Tasks', icon: CheckSquare }, { href: '/team', label: 'Team', icon: Users }, { href: '/settings', label: 'Settings', icon: Settings }, ]; return (

{navigationItems.map((item) => ( ))}

); }; ``` ## Responsive Typography ### Fluid Typography ```css /* globals.css */ :root { --fluid-text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --fluid-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --fluid-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); --fluid-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --fluid-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --fluid-text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem); } .fluid-text-sm { font-size: var(--fluid-text-sm); } .fluid-text-base { font-size: var(--fluid-text-base); } .fluid-text-lg { font-size: var(--fluid-text-lg); } .fluid-text-xl { font-size: var(--fluid-text-xl); } .fluid-text-2xl { font-size: var(--fluid-text-2xl); } .fluid-text-3xl { font-size: var(--fluid-text-3xl); } ``` ## Performance Optimization ### Lazy Loading ```typescript // components/LazyComponents.tsx import { lazy, Suspense } from 'react'; import { Skeleton } from '@/components/ui/skeleton'; // Lazy load heavy components const ProjectChart = lazy(() => import('./ProjectChart')); const DataTable = lazy(() => import('./DataTable')); const Calendar = lazy(() => import('./Calendar')); export const LazyProjectChart = () => ( }> ); export const LazyDataTable = () => ( }> ); export const LazyCalendar = () => ( }> ); ``` ### Responsive Images ```typescript // components/ResponsiveImage.tsx import Image from 'next/image'; import { cn } from '@/lib/utils'; interface ResponsiveImageProps { src: string; alt: string; className?: string; priority?: boolean; } export const ResponsiveImage = ({ src, alt, className, priority = false }: ResponsiveImageProps) => { return (

); }; ``` ## Testing Responsive Design ### Responsive Testing Utilities ```typescript // utils/responsive-testing.ts export const breakpoints = { xs: '475px', sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' }; export const testResponsiveDesign = () => { // Test different screen sizes const testSizes = [ { width: 375, height: 667, name: 'iPhone SE' }, { width: 414, height: 896, name: 'iPhone 11' }, { width: 768, height: 1024, name: 'iPad' }, { width: 1024, height: 768, name: 'iPad Landscape' }, { width: 1280, height: 720, name: 'Desktop' }, { width: 1920, height: 1080, name: 'Large Desktop' } ]; return testSizes; }; ``` --- *This mobile responsiveness guide will be updated as new responsive patterns are identified and mobile-specific features are added.*

Documentation

Mobile Responsiveness

Table of Contents