feat(ui): improve mobile search and consolidate language selector
- On mobile (≤768px), replace the full search bar in the topbar with a search icon button; tapping it expands a full-width search overlay with a back arrow to collapse (Google Drive-style pattern) - Escape key also collapses the mobile search overlay - Hide the redundant inline search icon when the mobile search bar is active (submit button already has one) - Move the language selector from the topbar into the user menu for all screen sizes, reducing topbar clutter; it renders as an accordion row matching other menu items - Fix user menu positioning in RTL layouts (Arabic/Persian): anchor to left:0 instead of right:0 so the panel opens inward rather than off-screen
This commit is contained in:
committed by
Unrepresented
parent
9aef9ea787
commit
fe0a8c7f72
+9
-2
@@ -118,6 +118,14 @@
|
||||
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle navigation menu">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<!-- Mobile search icon (replaces full bar on small screens) -->
|
||||
<button class="search-toggle-btn" id="search-toggle-btn" aria-label="Search">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<!-- Back button shown when mobile search is expanded -->
|
||||
<button class="search-back-btn" id="search-back-btn" aria-label="Close search">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</button>
|
||||
<div class="search-container">
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<input type="text" id="search-input" data-i18n-placeholder="actions.search" placeholder="Search files, folders...">
|
||||
@@ -127,8 +135,6 @@
|
||||
</div>
|
||||
|
||||
<div class="user-controls">
|
||||
<div id="language-selector"></div>
|
||||
|
||||
<!-- Notification Bell -->
|
||||
<div class="notif-wrapper" id="notif-wrapper">
|
||||
<button class="notif-bell-btn" id="notif-bell-btn" title="Notifications">
|
||||
@@ -186,6 +192,7 @@
|
||||
<span data-i18n="user_menu.profile">My profile</span>
|
||||
</button>
|
||||
<div class="user-menu-divider hidden" id="user-menu-admin-divider"></div>
|
||||
<div id="language-selector"></div>
|
||||
<button class="user-menu-item" id="user-menu-theme">
|
||||
<i class="fas fa-moon"></i>
|
||||
<span data-i18n="user_menu.appearance">Appearance</span>
|
||||
|
||||
Reference in New Issue
Block a user