Skip to content

feat: move language and theme controls to mobile bottom nav #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jazzz2502 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: move language and theme controls to mobile bottom nav #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c23c860
feat: move language and theme controls to mobile bottom nav
Jun 11, 2026
81d26ec
fix: restore mode item in mobile bottom nav
Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion src/components/BottomNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Link, useLocation } from 'react-router-dom';
import { ScanLine, Map, Layers } from 'lucide-react';
import { ScanLine, Map, Layers, Languages, SunMoon } from 'lucide-react';
import { useTranslation } from "react-i18next";
import { toggleTheme } from '../lib/theme';

const navItems = [
{ to: '/scanner', icon: ScanLine, label: 'SCANNER' },
Expand All @@ -9,6 +11,7 @@ const navItems = [

export default function BottomNav() {
const location = useLocation();
const { i18n } = useTranslation();

return (
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 glass-panel border-t border-outline-variant/15">
Expand All @@ -29,6 +32,31 @@ export default function BottomNav() {
</Link>
);
})}
<button
type="button"
onClick={toggleTheme}
className="flex flex-col items-center gap-1 text-on-surface-variant hover:text-neon transition-colors duration-200"
aria-label="Toggle theme"
>
<SunMoon size={20} strokeWidth={1.5} />
<span className="font-[family-name:var(--font-mono)] text-[0.5625rem] tracking-widest">
THEME
</span>
</button>

<label className="flex flex-col items-center gap-1 text-on-surface-variant">
<Languages size={20} strokeWidth={1.5} />
<select
value={i18n.language}
onChange={(e) => i18n.changeLanguage(e.target.value)}
className="bg-transparent font-[family-name:var(--font-mono)] text-[0.5625rem] tracking-widest outline-none"
aria-label="Change language"
>
<option value="en">EN</option>
<option value="hi">HI</option>
<option value="bn">BN</option>
</select>
</label>
</div>
</nav>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function Navbar() {
</div>

{/* Auth Button & Theme Toggle */}
<div className="flex items-center gap-2 sm:gap-4">
<div className="hidden md:flex items-center gap-2 sm:gap-4">

@coderabbitai coderabbitai Bot Jun 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Auth controls are unintentionally hidden on mobile.

On Line 96, hidden md:flex is applied to the entire right-side controls container, which also contains login/profile/logout actions (not just language/theme). Since BottomNav only adds theme/language controls, mobile users lose auth access.

Proposed fix 
-        {/* Auth Button & Theme Toggle */}
-        <div className="hidden md:flex items-center gap-2 sm:gap-4">
+        {/* Desktop-only language + theme */}
+        <div className="hidden md:flex items-center gap-2 sm:gap-4">
           <select
             value={i18n.language}
             onChange={(e) => i18n.changeLanguage(e.target.value)}
             className="bg-surface-low border border-outline-variant/30 px-2 py-1 text-xs"
 >
             <option value="en">EN</option>
             <option value="hi">HI</option>
             <option value="bn">BN</option>
           </select>
           {/* Theme Toggle Button */}
           <button
             type="button"
             onClick={toggleTheme}
             className="font-[family-name:var(--font-mono)] text-[9px] sm:text-[10px] tracking-widest text-on-surface-variant hover:text-neon transition-colors duration-200 border border-outline-variant/30 px-2 py-1 sm:px-3"
           >
             THEME
           </button>
+        </div>
+
+        {/* Auth controls remain available on mobile and desktop */}
+        <div className="flex items-center gap-2 sm:gap-4">
           {loggedIn ? (
             <div className="relative" ref={dropdownRef}>
               ...
             </div>
           ) : (
             <Link
               to="/auth"
               ...
             >
               ...
             </Link>
           )}
         </div>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Navbar.tsx` at line 96, The right-side controls container in
Navbar (the div with className "hidden md:flex items-center gap-2 sm:gap-4")
hides auth actions on mobile; instead, remove or change that class so auth
controls remain visible and only non-auth controls (theme/language provided by
BottomNav) are hidden on mobile. Concretely, keep the outer container (in the
Navbar component) visible on all breakpoints (e.g., remove "hidden md:flex") and
apply "hidden md:flex" (or a similar responsive class) to a narrower wrapper
that only surrounds the language/theme controls (the BottomNav or its containing
element), ensuring login/profile/logout buttons remain in the always-visible
area.

<select
value={i18n.language}
onChange={(e) => i18n.changeLanguage(e.target.value)}
Expand Down
Loading