Part of Epic: #shoelace-migration-epic-main

Description

Install Shoelace and create the responsive foundation for mobile-first design, including navigation system and base styles.

Tasks

• Install Shoelace via npm (@shoelace-style/shoelace)
• Import Shoelace CSS and set base path in main.js
• Create responsive navigation system:
  • Bottom navigation bar for mobile (< 768px)
  • Horizontal tabs for desktop (≥ 768px)
  • Implement <sl-drawer> for mobile menu
  • Keep existing tab switching logic, update selectors
• Add base responsive CSS:
  • Mobile breakpoints (320-767px)
  • Tablet breakpoints (768-1023px)
  • Desktop breakpoints (1024px+)
  • Touch-friendly tap target sizes (44x44px minimum)
• Create CSS custom properties for theming
• Update .gitignore if needed
• Test navigation on mobile emulator (Chrome DevTools)

Acceptance Criteria

• Shoelace is installed and imported correctly
• Navigation works on mobile (drawer) and desktop (tabs)
• Base responsive styles are in place
• No breaking changes to existing functionality
• Screenshot of mobile navigation required

Files to Modify

• package.json
• src/main.js
• index.html
• src/index.css

Estimated Time

3-4 days

Dependencies

None - Start immediately