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:
Kamil Alekberov
2026-05-17 18:33:39 +05:00
committed by Unrepresented
parent 9aef9ea787
commit fe0a8c7f72
5 changed files with 199 additions and 13 deletions
+9 -2
View File
@@ -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>