responsive-layout

Responsive Layout

Build mobile-first responsive layouts using Tailwind CSS with sidebar navigation, dashboard grids, and adaptive content areas.

When to Use

• User needs to create a page layout with sidebar and header
• User wants to build a responsive dashboard with metric cards
• User needs a mobile-first grid that adapts to screen sizes
• User wants to add responsive navigation (sidebar + mobile menu)
• User needs to structure a page with proper spacing and overflow handling

Available Operations

1. Create a full app layout (sidebar + header + main content)
2. Build responsive dashboard grids with metric cards
3. Implement collapsible sidebar with mobile drawer
4. Set up responsive content grids
5. Add proper scroll areas and overflow handling

Multi-Step Workflow

Step 1: Install Dependencies

npm install clsx tailwind-merge lucide-react

Verify Tailwind is configured:

npx tailwindcss --help
# If not installed: npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

Step 2: Create the App Shell Layout

// src/layouts/AppLayout.tsx
import { useAppStore } from '@/stores/useAppStore';

export function AppLayout({ children }: { children: React.ReactNode }) {
  const sidebarOpen = useAppStore((s) => s.sidebarOpen);

  return (
    <div className="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <Sidebar open={sidebarOpen} />

      {/* Main area */}
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header />
        <main className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
          {children}
        </main>
      </div>
    </div>
  );
}

Step 3: Build the Sidebar

// src/components/Sidebar.tsx
import { NavLink } from 'react-router-dom';
import { Home, List, Users, Settings, X } from 'lucide-react';
import { useAppStore } from '@/stores/useAppStore';

const navItems = [
  { to: '/dashboard', label: 'Dashboard', icon: Home },
  { to: '/items', label: 'Items', icon: List },
  { to: '/team', label: 'Team', icon: Users },
  { to: '/settings', label: 'Settings', icon: Settings },
];

export function Sidebar({ open }: { open: boolean }) {
  const toggleSidebar = useAppStore((s) => s.toggleSidebar);

  return (
    <>
      {/* Mobile overlay */}
      {open && (
        <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={toggleSidebar} />
      )}

      {/* Sidebar */}
      <aside
        className={cn(
          'fixed lg:static inset-y-0 left-0 z-50 w-64 bg-white border-r transform transition-transform lg:translate-x-0',
          open ? 'translate-x-0' : '-translate-x-full'
        )}
      >
        <div className="flex items-center justify-between p-4 border-b">
          <h1 className="text-xl font-bold">App Name</h1>
          <button onClick={toggleSidebar} className="lg:hidden">
            <X className="w-5 h-5" />
          </button>
        </div>

        <nav className="p-4 space-y-1">
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) =>
                cn('flex items-center gap-3 px-3 py-2 rounded-lg text-sm',
                  isActive ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-100'
                )
              }
            >
              <item.icon className="w-5 h-5" />
              {item.label}
            </NavLink>
          ))}
        </nav>
      </aside>
    </>
  );
}