Learning Objectives

Create a dashboard layout structure with multiple zones
Build a responsive sidebar with navigation
Implement a header with user info and actions
Handle mobile-responsive layouts with hamburger menu
Use layout composition patterns in Next.js

1. Dashboard Layout Structure

A well-designed dashboard layout provides clear navigation and maximizes content space. The following diagram illustrates the typical zones in a dashboard interface, with a fixed sidebar on the left and a header at the top.

+--------------------------------------------------+
|                    Header                         |
+----------+---------------------------------------+
|          |                                       |
| Sidebar  |           Main Content                |
|          |                                       |
|          |                                       |
|          |                                       |
+----------+---------------------------------------+

File Structure

Organizing your dashboard files using Next.js route groups keeps related pages together while sharing a common layout. The parentheses in (dashboard) create a route group that does not affect the URL structure.

app/
├── (dashboard)/
│   ├── layout.tsx          # Dashboard layout wrapper
│   ├── page.tsx            # Dashboard home
│   ├── transactions/
│   │   └── page.tsx
│   ├── wallet/
│   │   └── page.tsx
│   ├── bills/
│   │   └── page.tsx
│   └── settings/
│       └── page.tsx
components/
├── layout/
│   ├── DashboardLayout.tsx
│   ├── Sidebar.tsx
│   ├── Header.tsx
│   ├── MobileNav.tsx
│   └── UserMenu.tsx

2. Dashboard Layout Component

The main layout component wraps all dashboard pages with the sidebar, header, and mobile navigation. It uses Tailwind's responsive utilities to hide the sidebar on mobile and show it as a fixed element on larger screens.

// app/(dashboard)/layout.tsx
import { Sidebar } from '@/components/layout/Sidebar'
import { Header } from '@/components/layout/Header'
import { MobileNav } from '@/components/layout/MobileNav'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Sidebar - Hidden on mobile */}
      <Sidebar className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64" />

      {/* Main content area */}
      <div className="lg:pl-64">
        {/* Header */}
        <Header />

        {/* Mobile navigation */}
        <MobileNav className="lg:hidden" />

        {/* Page content */}
        <main className="py-6 px-4 sm:px-6 lg:px-8">
          {children}
        </main>
      </div>
    </div>
  )
}

3. Sidebar Component

The Sidebar component provides the main navigation for the dashboard. It displays a logo, navigation links, and user information. The usePathname hook from Next.js highlights the currently active navigation item.

// components/layout/Sidebar.tsx
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'

// Icons (using heroicons or your preferred icon library)
import {
  HomeIcon,
  WalletIcon,
  BanknotesIcon,
  DocumentTextIcon,
  Cog6ToothIcon,
  ArrowRightOnRectangleIcon,
} from '@heroicons/react/24/outline'

interface NavItem {
  name: string
  href: string
  icon: React.ComponentType<{ className?: string }>
}

const navigation: NavItem[] = [
  { name: 'Dashboard', href: '/dashboard', icon: HomeIcon },
  { name: 'Wallet', href: '/dashboard/wallet', icon: WalletIcon },
  { name: 'Pay Bills', href: '/dashboard/bills', icon: BanknotesIcon },
  { name: 'Transactions', href: '/dashboard/transactions', icon: DocumentTextIcon },
  { name: 'Settings', href: '/dashboard/settings', icon: Cog6ToothIcon },
]

interface SidebarProps {
  className?: string
}

export function Sidebar({ className }: SidebarProps) {
  const pathname = usePathname()

  return (
    <aside
      className={cn(
        'flex flex-col w-64 bg-white border-r border-gray-200',
        className
      )}
    >
      {/* Logo */}
      <div className="flex items-center h-16 px-6 border-b border-gray-200">
        <Link href="/dashboard" className="flex items-center gap-2">
          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
            <span className="text-white font-bold text-lg">R</span>
          </div>
          <span className="text-xl font-bold text-gray-900">RizPay</span>
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
        {navigation.map((item) => {
          const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`)

          return (
            <Link
              key={item.name}
              href={item.href}
              className={cn(
                'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
                isActive
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
              )}
            >
              <item.icon className="w-5 h-5" />
              {item.name}
            </Link>
          )
        })}
      </nav>

      {/* User section at bottom */}
      <div className="p-4 border-t border-gray-200">
        <div className="flex items-center gap-3 px-3 py-2">
          <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
            <span className="text-sm font-medium text-gray-600">JD</span>
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-gray-900 truncate">
              John Doe
            </p>
            <p className="text-xs text-gray-500 truncate">
              john@example.com
            </p>
          </div>
        </div>

        <button
          className="flex items-center gap-3 w-full px-3 py-2.5 mt-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
        >
          <ArrowRightOnRectangleIcon className="w-5 h-5" />
          Sign out
        </button>
      </div>
    </aside>
  )
}

4. Header Component

The Header component provides the top navigation bar with search functionality, notifications, and the user menu. It also includes a hamburger menu button for mobile devices that triggers the mobile navigation drawer.

// components/layout/Header.tsx
'use client'

import { useState } from 'react'
import { BellIcon, MagnifyingGlassIcon, Bars3Icon } from '@heroicons/react/24/outline'
import { UserMenu } from './UserMenu'

interface HeaderProps {
  onMenuClick?: () => void
}

export function Header({ onMenuClick }: HeaderProps) {
  const [searchQuery, setSearchQuery] = useState('')

  return (
    <header className="sticky top-0 z-40 bg-white border-b border-gray-200">
      <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
        {/* Mobile menu button */}
        <button
          type="button"
          className="lg:hidden p-2 -ml-2 text-gray-500 hover:text-gray-600"
          onClick={onMenuClick}
        >
          <Bars3Icon className="w-6 h-6" />
        </button>

        {/* Search bar */}
        <div className="flex-1 max-w-md mx-4 lg:mx-0">
          <div className="relative">
            <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="search"
              placeholder="Search transactions..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-gray-100 border-0 rounded-lg text-sm placeholder:text-gray-400 focus:bg-white focus:ring-2 focus:ring-primary"
            />
          </div>
        </div>

        {/* Right side actions */}
        <div className="flex items-center gap-4">
          {/* Notifications */}
          <button className="relative p-2 text-gray-500 hover:text-gray-600 hover:bg-gray-100 rounded-lg">
            <BellIcon className="w-6 h-6" />
            {/* Notification badge */}
            <span className="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full" />
          </button>

          {/* User menu - Desktop */}
          <div className="hidden lg:block">
            <UserMenu />
          </div>
        </div>
      </div>
    </header>
  )
}

5. User Menu Dropdown

The UserMenu component creates a dropdown menu with user information and quick links. It uses Headless UI's Menu component for accessibility and keyboard navigation support, ensuring a fully accessible dropdown experience.

// components/layout/UserMenu.tsx
'use client'

import { Fragment } from 'react'
import Link from 'next/link'
import { Menu, Transition } from '@headlessui/react'
import {
  UserCircleIcon,
  Cog6ToothIcon,
  ArrowRightOnRectangleIcon,
} from '@heroicons/react/24/outline'
import { cn } from '@/lib/utils'

interface UserMenuProps {
  user?: {
    name: string
    email: string
    avatar?: string
  }
}

export function UserMenu({ user }: UserMenuProps) {
  const displayName = user?.name || 'John Doe'
  const initials = displayName
    .split(' ')
    .map((n) => n[0])
    .join('')
    .toUpperCase()

  return (
    <Menu as="div" className="relative">
      <Menu.Button className="flex items-center gap-3 p-1.5 rounded-lg hover:bg-gray-100 transition-colors">
        <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
          {user?.avatar ? (
            <img
              src={user.avatar}
              alt={displayName}
              className="w-full h-full rounded-full object-cover"
            />
          ) : (
            <span className="text-sm font-medium text-white">{initials}</span>
          )}
        </div>
        <div className="hidden sm:block text-left">
          <p className="text-sm font-medium text-gray-900">{displayName}</p>
        </div>
      </Menu.Button>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black/5 focus:outline-none">
          <div className="p-1">
            <div className="px-3 py-2 border-b border-gray-100">
              <p className="text-sm font-medium text-gray-900">{displayName}</p>
              <p className="text-xs text-gray-500">{user?.email || 'john@example.com'}</p>
            </div>

            <Menu.Item>
              {({ active }) => (
                <Link
                  href="/dashboard/profile"
                  className={cn(
                    'flex items-center gap-2 px-3 py-2 text-sm rounded-md',
                    active ? 'bg-gray-100' : ''
                  )}
                >
                  <UserCircleIcon className="w-4 h-4" />
                  Profile
                </Link>
              )}
            </Menu.Item>

            <Menu.Item>
              {({ active }) => (
                <Link
                  href="/dashboard/settings"
                  className={cn(
                    'flex items-center gap-2 px-3 py-2 text-sm rounded-md',
                    active ? 'bg-gray-100' : ''
                  )}
                >
                  <Cog6ToothIcon className="w-4 h-4" />
                  Settings
                </Link>
              )}
            </Menu.Item>

            <div className="border-t border-gray-100 mt-1 pt-1">
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={cn(
                      'flex items-center gap-2 w-full px-3 py-2 text-sm text-danger rounded-md',
                      active ? 'bg-red-50' : ''
                    )}
                  >
                    <ArrowRightOnRectangleIcon className="w-4 h-4" />
                    Sign out
                  </button>
                )}
              </Menu.Item>
            </div>
          </div>
        </Menu.Items>
      </Transition>
    </Menu>
  )
}

6. Mobile Navigation

The MobileNav component provides a slide-out drawer for navigation on mobile devices. It uses Headless UI's Dialog component for proper accessibility, including focus trapping and scroll locking when the menu is open.

// components/layout/MobileNav.tsx
'use client'

import { Fragment, useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Dialog, Transition } from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import { cn } from '@/lib/utils'

// Import same navigation items from Sidebar
import {
  HomeIcon,
  WalletIcon,
  BanknotesIcon,
  DocumentTextIcon,
  Cog6ToothIcon,
} from '@heroicons/react/24/outline'

const navigation = [
  { name: 'Dashboard', href: '/dashboard', icon: HomeIcon },
  { name: 'Wallet', href: '/dashboard/wallet', icon: WalletIcon },
  { name: 'Pay Bills', href: '/dashboard/bills', icon: BanknotesIcon },
  { name: 'Transactions', href: '/dashboard/transactions', icon: DocumentTextIcon },
  { name: 'Settings', href: '/dashboard/settings', icon: Cog6ToothIcon },
]

interface MobileNavProps {
  isOpen: boolean
  onClose: () => void
}

export function MobileNav({ isOpen, onClose }: MobileNavProps) {
  const pathname = usePathname()

  return (
    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-50 lg:hidden" onClose={onClose}>
        {/* Backdrop */}
        <Transition.Child
          as={Fragment}
          enter="transition-opacity ease-linear duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="transition-opacity ease-linear duration-300"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-900/80" />
        </Transition.Child>

        <div className="fixed inset-0 flex">
          {/* Sliding panel */}
          <Transition.Child
            as={Fragment}
            enter="transition ease-in-out duration-300 transform"
            enterFrom="-translate-x-full"
            enterTo="translate-x-0"
            leave="transition ease-in-out duration-300 transform"
            leaveFrom="translate-x-0"
            leaveTo="-translate-x-full"
          >
            <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
              {/* Close button */}
              <Transition.Child
                as={Fragment}
                enter="ease-in-out duration-300"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="ease-in-out duration-300"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
                  <button
                    type="button"
                    className="-m-2.5 p-2.5"
                    onClick={onClose}
                  >
                    <XMarkIcon className="h-6 w-6 text-white" />
                  </button>
                </div>
              </Transition.Child>

              {/* Sidebar content */}
              <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-4">
                {/* Logo */}
                <div className="flex h-16 shrink-0 items-center">
                  <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                    <span className="text-white font-bold text-lg">R</span>
                  </div>
                  <span className="ml-2 text-xl font-bold">RizPay</span>
                </div>

                {/* Navigation */}
                <nav className="flex flex-1 flex-col">
                  <ul className="space-y-1">
                    {navigation.map((item) => {
                      const isActive = pathname === item.href

                      return (
                        <li key={item.name}>
                          <Link
                            href={item.href}
                            onClick={onClose}
                            className={cn(
                              'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium',
                              isActive
                                ? 'bg-primary text-white'
                                : 'text-gray-600 hover:bg-gray-100'
                            )}
                          >
                            <item.icon className="w-5 h-5" />
                            {item.name}
                          </Link>
                        </li>
                      )
                    })}
                  </ul>
                </nav>
              </div>
            </Dialog.Panel>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root>
  )
}

7. Updated Dashboard Layout with Mobile State

This updated layout component manages the mobile navigation state using React's useState hook. It passes the toggle function to the Header and the state to the MobileNav component, enabling coordinated mobile navigation behavior.

// app/(dashboard)/layout.tsx
'use client'

import { useState } from 'react'
import { Sidebar } from '@/components/layout/Sidebar'
import { Header } from '@/components/layout/Header'
import { MobileNav } from '@/components/layout/MobileNav'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [mobileNavOpen, setMobileNavOpen] = useState(false)

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Mobile navigation drawer */}
      <MobileNav
        isOpen={mobileNavOpen}
        onClose={() => setMobileNavOpen(false)}
      />

      {/* Desktop sidebar */}
      <Sidebar className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-64 lg:flex-col" />

      {/* Main content area */}
      <div className="lg:pl-64">
        <Header onMenuClick={() => setMobileNavOpen(true)} />

        <main className="py-6 px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-7xl">
            {children}
          </div>
        </main>
      </div>
    </div>
  )
}

8. Dashboard Home Page

The dashboard home page displays an overview of the user's account, including wallet balance, quick actions, and recent transactions. This layout demonstrates how to compose multiple components to create an informative dashboard view.

// app/(dashboard)/page.tsx
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
import { StatusBadge } from '@/components/ui/Badge'

// Quick action cards data
const quickActions = [
  { name: 'Buy Airtime', icon: '📱', href: '/dashboard/bills/airtime', color: 'bg-blue-50' },
  { name: 'Pay Electricity', icon: '💡', href: '/dashboard/bills/electricity', color: 'bg-yellow-50' },
  { name: 'Pay Cable TV', icon: '📺', href: '/dashboard/bills/cable', color: 'bg-purple-50' },
  { name: 'Buy Data', icon: '📶', href: '/dashboard/bills/data', color: 'bg-green-50' },
]

// Mock recent transactions
const recentTransactions = [
  { id: 1, type: 'Airtime', amount: 1000, status: 'completed', date: '2024-01-15' },
  { id: 2, type: 'Electricity', amount: 5000, status: 'pending', date: '2024-01-14' },
  { id: 3, type: 'Data Bundle', amount: 2500, status: 'completed', date: '2024-01-13' },
]

export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* Page header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <p className="text-gray-500 mt-1">Welcome back, John!</p>
      </div>

      {/* Wallet balance card */}
      <Card className="bg-gradient-to-r from-primary to-primary-dark text-white">
        <CardContent className="pt-0">
          <p className="text-sm text-white/80">Wallet Balance</p>
          <p className="text-3xl font-bold mt-1">₦25,430.00</p>
          <div className="flex gap-3 mt-4">
            <button className="px-4 py-2 bg-white text-primary rounded-lg text-sm font-medium hover:bg-white/90 transition-colors">
              Add Money
            </button>
            <button className="px-4 py-2 bg-white/20 text-white rounded-lg text-sm font-medium hover:bg-white/30 transition-colors">
              Transfer
            </button>
          </div>
        </CardContent>
      </Card>

      {/* Quick actions */}
      <section>
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
          {quickActions.map((action) => (
            <a
              key={action.name}
              href={action.href}
              className={`${action.color} p-4 rounded-xl hover:shadow-md transition-shadow text-center`}
            >
              <span className="text-2xl">{action.icon}</span>
              <p className="text-sm font-medium text-gray-900 mt-2">{action.name}</p>
            </a>
          ))}
        </div>
      </section>

      {/* Recent transactions */}
      <section>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-gray-900">Recent Transactions</h2>
          <a href="/dashboard/transactions" className="text-sm text-primary hover:underline">
            View all
          </a>
        </div>

        <Card>
          <div className="divide-y divide-gray-100">
            {recentTransactions.map((tx) => (
              <div key={tx.id} className="flex items-center justify-between p-4">
                <div>
                  <p className="font-medium text-gray-900">{tx.type}</p>
                  <p className="text-sm text-gray-500">{tx.date}</p>
                </div>
                <div className="text-right">
                  <p className="font-medium text-gray-900">₦{tx.amount.toLocaleString()}</p>
                  <StatusBadge status={tx.status} />
                </div>
              </div>
            ))}
          </div>
        </Card>
      </section>
    </div>
  )
}

9. Responsive Design Patterns

Responsive design is essential for creating dashboards that work well on all device sizes. The following patterns demonstrate how to use Tailwind's responsive utilities to adapt layouts, visibility, and typography across breakpoints.

Mobile-First Grid Layout

This pattern creates a grid that starts with a single column on mobile and progressively adds columns at larger breakpoints. The gap also increases at the medium breakpoint for better spacing on larger screens.

// Responsive grid that adapts to screen size
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
  {items.map((item) => (
    <Card key={item.id}>{/* Card content */}</Card>
  ))}
</div>

Hide/Show Elements by Breakpoint

These patterns show how to conditionally display content based on screen size. The desktop sidebar is hidden on mobile while the mobile navigation is hidden on desktop, creating an optimized experience for each device.

// Show on desktop only
<div className="hidden lg:block">
  Desktop sidebar
</div>

// Show on mobile only
<div className="lg:hidden">
  Mobile navigation
</div>

// Different layouts per breakpoint
<div className="flex flex-col md:flex-row gap-4">
  <div className="w-full md:w-1/3">Sidebar</div>
  <div className="w-full md:w-2/3">Content</div>
</div>

Responsive Typography

Adjusting text size across breakpoints ensures readability on all devices. Start with smaller text on mobile and progressively increase the size for larger screens.

<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold">
  Responsive Heading
</h1>

<p className="text-sm md:text-base lg:text-lg">
  Responsive paragraph text
</p>

10. Layout Best Practices

Following these best practices will help you create maintainable, performant, and user-friendly dashboard layouts. Each pattern addresses a common layout challenge with a proven solution.

1. Use CSS Grid for Complex Layouts

CSS Grid provides powerful layout capabilities for complex dashboard structures. This pattern creates a sidebar and main content area with a single grid definition.

// Dashboard grid with sidebar and main content
<div className="grid grid-cols-1 lg:grid-cols-[256px_1fr] min-h-screen">
  <aside className="hidden lg:block">Sidebar</aside>
  <main>Content</main>
</div>

2. Sticky Header Pattern

A sticky header remains visible while scrolling, providing constant access to navigation and actions. The backdrop blur adds a subtle visual effect when content scrolls behind it.

<header className="sticky top-0 z-40 bg-white/80 backdrop-blur-sm border-b">
  {/* Header content */}
</header>

3. Container with Max Width

Constraining the content width prevents lines of text from becoming too long to read comfortably on wide screens while maintaining proper padding on smaller screens.

<main className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
  {children}
</main>

4. Safe Area for Mobile

Modern mobile devices often have notches, rounded corners, or home indicators that can overlap with content. Using safe area insets ensures your content remains visible and accessible.

// Account for notches and home indicators
<div className="pb-safe pt-safe">
  {/* Content */}
</div>

// In globals.css
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

Assignment

Task: Build Complete Dashboard Layout

Create a fully functional dashboard layout for RizPay:

Implement the layout structure:
- Desktop sidebar (fixed, 256px wide)
- Mobile slide-out navigation
- Sticky header with search and notifications
- Responsive main content area
Create dashboard pages:
- /dashboard - Overview with wallet balance, quick actions
- /dashboard/wallet - Wallet management
- /dashboard/bills - Bill payment categories
- /dashboard/transactions - Transaction history
- /dashboard/settings - User settings
Add interactive features:
- Active navigation state highlighting
- User menu dropdown
- Notification badge
- Mobile menu toggle
Ensure responsiveness:
- Test on mobile (320px - 640px)
- Test on tablet (640px - 1024px)
- Test on desktop (1024px+)

Bonus Challenges

Add dark mode toggle in header
Create a collapsible sidebar for desktop
Add breadcrumb navigation
Implement notification panel

Additional Resources

Next Lesson: SQL & PostgreSQL Fundamentals