From 62ab1b38db8fc03e4e3172cc31676442b850deaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Fri, 10 Apr 2026 17:59:52 +0100
Subject: [PATCH] fix: clarify mobile settings navigation (#272)

## Summary
- add a hamburger icon to the mobile settings dropdown trigger so it
reads more clearly as navigation
- reduce the mobile spacing between the settings subtitle and the
dropdown trigger
- keep the desktop settings sidebar unchanged

## Testing
- php artisan test --compact tests/Feature/Settings/CategoryTest.php
---
 resources/js/layouts/settings/layout.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
index 8f6c7dcf..b3e6d4df 100644
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@@ -28,6 +28,7 @@ import {
 } from '@/types';
 import { __ } from '@/utils/i18n';
 import { Link, router, usePage } from '@inertiajs/react';
+import { Menu } from 'lucide-react';
 import { type PropsWithChildren } from 'react';
 
 const getNavItems = (
@@ -207,7 +208,10 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
 
             <div className="flex flex-col lg:flex-row lg:space-x-12">
                 {/* Mobile: dropdown select */}
-                <div className="lg:hidden">
+                <div
+                    className="-mt-4 sm:mt-0 lg:hidden"
+                    data-testid="settings-mobile-nav"
+                >
                     <Select
                         value={
                             activeNavItem
@@ -216,8 +220,20 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
                         }
                         onValueChange={(value) => router.visit(value)}
                     >
-                        <SelectTrigger className="w-full">
-                            <SelectValue placeholder={__('Navigate to...')} />
+                        <SelectTrigger
+                            className="w-full"
+                            data-testid="settings-mobile-nav-trigger"
+                        >
+                            <div className="flex w-full flex-row items-center gap-2">
+                                <Menu
+                                    aria-hidden="true"
+                                    className="size-4 text-muted-foreground"
+                                    data-testid="settings-mobile-nav-icon"
+                                />
+                                <SelectValue
+                                    placeholder={__('Navigate to...')}
+                                />
+                            </div>
                         </SelectTrigger>
                         <SelectContent>
                             {renderMobileNavGroups(sidebarNavItems)}