Add language toggle button to mobile header for better translation discoverability

[Copilot]

Problem

The English translation feature was hidden inside the mobile sidebar, requiring users to expand the hamburger menu to discover it. This created poor UX as mobile users wouldn't realize the site could be translated to English without actively exploring the sidebar settings.

Solution

Added a dedicated language toggle button (EN/JP) directly to the mobile header, making the translation feature immediately visible and accessible to mobile users.

Changes

• Enhanced Header Component: Modified Header.js to include the LanguageContext and added a language toggle button that switches between "EN" (Japanese mode) and "JP" (English mode)
• Responsive Design: The language toggle is only visible on mobile devices - the header remains hidden on desktop (≥768px) preserving the existing desktop experience
• Visual Integration: Added CSS styling that matches existing header buttons with subtle visual distinction (border, background color, hover effects)
• Bidirectional Functionality: Button works seamlessly in both directions (Japanese ↔ English) and integrates with the existing language system

User Experience Impact

Before: Users had to click hamburger menu → expand sidebar → scroll to settings → find language dropdown

After: Users can immediately see and click the language toggle button in the header

Screenshots

Mobile with new language toggle (Japanese mode):

Mobile in English mode after clicking toggle:

Desktop view remains unchanged:

Technical Details

• Minimal bundle size impact: +69B JS, +47B CSS
• No breaking changes: sidebar language selector continues to work
• Accessibility: Added proper title attributes for tooltip functionality
• Maintains existing language context integration

This change significantly improves the discoverability of the English translation feature on mobile devices while preserving all existing functionality.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>英語への翻訳ボタンをモバイルでサイドバーを展開しなくても表示する</issue_title>
<issue_description>サイドバーを展開しないと英語の表示に気が付かないのはあまりいいUIではないのでサイドバーを表示しなくても翻訳できることがユーザに伝わるようにデザインを変更すべき.</issue_description>

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

Fixes #22

---

💡 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.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
my-site	Ready	Preview	Comment	Sep 27, 2025 3:22pm