Implement core layout structure with header, sidebar, and responsive navigation

[Copilot]

Establishes the foundational UI layout for Business Wallet with header, sidebar navigation, main content area, and footer. Includes initial branding elements and responsive design patterns.

Layout Architecture

• Header: Fixed gradient header with logo placeholder ("BW"), title, and user avatar component
• Sidebar: 250px fixed navigation (desktop) converting to horizontal scroll bar (mobile ≤768px)
• Main content: Flexible area with React Router outlet and light gray background for visual separation
• Footer: Simple copyright footer with top border

Navigation Structure

Created 6 primary navigation sections with icon-label pairs:

• Home, Credentials, Issue, Share, Documents, Settings
• Active state: blue accent with 3px border indicator (left on desktop, bottom on mobile)
• Hover states with background transitions

Component Pattern

// Sidebar with active state tracking
<Link to="/credentials" className={`sidebar-link ${isActive('/credentials') ? 'active' : ''}`}>
  <span className="sidebar-icon">🎫</span>
  <span className="sidebar-text">Credentials</span>
</Link>

Extracted shared page styles to Page.css for common patterns (page titles, descriptions, placeholders).

Design System Foundations

Color Palette:

• Primary: #3b82f6, #2563eb (blue for trust/professionalism)
• Header: Gradient #1e3a8a → #1e293b
• Backgrounds: #f8fafc (main), #ffffff (components)

Typography: System fonts with consistent sizing (1.5rem header, 2rem page titles)

Responsive Breakpoints: 768px for sidebar-to-horizontal transition

Design Documentation

Created DESIGN.md with comprehensive specifications including layout diagrams, color palette, typography scale, spacing system, component patterns, and accessibility guidelines. Serves as design deliverable in lieu of Figma file.

Screenshots

Desktop - Home Page

Desktop - Credentials (Active Navigation)

Mobile - Responsive Layout

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[FR-0001] Create basic visual layout for the web UI main page</issue_title>
<issue_description>Create the initial visual layout (header, sidebar, main area) for the Business Wallet web user interface in Figma or another design tool. Deliverable is a layout file showing the arrangement and labels for primary navigation and content areas.

Definition of Ready:

• This issue is labeled with FR-0001 and 'status:Backlog'.
• Specification of layout elements to include (at least header, navigation/sidebar, and main content area).
• Task is sized for a single designer/agent.

Definition of Done:

• A Figma (or similar) file is available and attached to the repo or issue.
• Main areas and navigation are visually distinct.
• UI reflects Business Wallet branding basics (logo placeholder, color suggestion if available).
• Product Owner reviews and accepts the design.
  </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [FR-0001] Create basic visual layout for the web UI main page #19

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.