From 85becacea5d1fe8cf331fcf8b371b18ac221ac5b Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Thu, 2 Jul 2026 17:55:33 +0300
Subject: [PATCH] Enhance root layout and admin interface for better usability

- Updated the root layout to include a mobile menu toggle, improving navigation on smaller screens.
- Refactored navigation links and language/theme selection for better organization and accessibility.
- Added overflow handling for admin navigation and tables to ensure proper display on smaller screens.
- Improved translations for menu toggle accessibility in both Russian and English.
---
 frontend/src/routes/__root.tsx      | 145 +++++++++++++++++-----------
 frontend/src/routes/admin.tsx       |   4 +-
 frontend/src/routes/admin/audit.tsx |   2 +
 frontend/src/routes/admin/roles.tsx |   2 +
 frontend/src/routes/admin/users.tsx |   2 +
 frontend/src/shared/lib/i18n.ts     |   2 +
 frontend/src/shared/ui/dialog.tsx   |   2 +-
 7 files changed, 101 insertions(+), 58 deletions(-)

diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index bee8109..036517c 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,6 +1,7 @@
-import { useEffect } from 'react'
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import { Link, Outlet, createRootRoute, useRouterState } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
+import { Menu, X } from 'lucide-react'
 import { useTheme, type Theme } from '@/theme/ThemeProvider'
 import { setLanguage } from '@/shared/lib/i18n'
 import { Toaster } from '@/shared/ui/toaster'
@@ -15,11 +16,18 @@ function RootLayout() {
   const { t, i18n } = useTranslation()
   const { theme, setTheme } = useTheme()
   const { user, isBootstrapping } = useAuthStore()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
 
   useEffect(() => {
     void bootstrapSession()
   }, [])
 
+  // Закрываем мобильное меню при переходе на другую страницу.
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [pathname])
+
   const themes: Theme[] = ['light', 'dark', 'system']
   const langs = ['ru', 'en']
 
@@ -31,61 +39,88 @@ function RootLayout() {
     }
   }
 
+  const navLinks = !isBootstrapping && user && (
+    <>
+      <Link to="/dashboard" className="text-muted-foreground hover:text-foreground">
+        {t('nav.dashboard')}
+      </Link>
+      <Link to="/instructions" className="text-muted-foreground hover:text-foreground">
+        {t('nav.instructions')}
+      </Link>
+      <Link to="/settings" className="text-muted-foreground hover:text-foreground">
+        {t('nav.settings')}
+      </Link>
+      {user.role === 'admin' && (
+        <Link to="/admin" className="text-muted-foreground hover:text-foreground">
+          {t('nav.admin')}
+        </Link>
+      )}
+      <Button variant="ghost" size="sm" className="justify-start" onClick={handleLogout}>
+        {t('nav.logout')}
+      </Button>
+    </>
+  )
+
+  const selects = (
+    <>
+      <label className="flex items-center gap-2">
+        <select
+          className="w-full rounded-md border border-border bg-muted px-2 py-1 sm:w-auto"
+          value={i18n.language}
+          onChange={(e) => setLanguage(e.target.value)}
+        >
+          {langs.map((l) => (
+            <option key={l} value={l}>
+              {l.toUpperCase()}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="flex items-center gap-2">
+        <select
+          className="w-full rounded-md border border-border bg-muted px-2 py-1 sm:w-auto"
+          value={theme}
+          onChange={(e) => setTheme(e.target.value as Theme)}
+        >
+          {themes.map((th) => (
+            <option key={th} value={th}>
+              {t(th)}
+            </option>
+          ))}
+        </select>
+      </label>
+    </>
+  )
+
   return (
     <div className="flex min-h-svh flex-col">
-      <header className="flex items-center justify-between border-b border-border px-6 py-4">
-        <Link to="/" className="text-lg font-semibold text-primary">
-          {t('appName')}
-        </Link>
-        <nav className="flex items-center gap-4 text-sm">
-          {!isBootstrapping && user && (
-            <>
-              <Link to="/dashboard" className="text-muted-foreground hover:text-foreground">
-                {t('nav.dashboard')}
-              </Link>
-              <Link to="/instructions" className="text-muted-foreground hover:text-foreground">
-                {t('nav.instructions')}
-              </Link>
-              <Link to="/settings" className="text-muted-foreground hover:text-foreground">
-                {t('nav.settings')}
-              </Link>
-              {user.role === 'admin' && (
-                <Link to="/admin" className="text-muted-foreground hover:text-foreground">
-                  {t('nav.admin')}
-                </Link>
-              )}
-              <Button variant="ghost" size="sm" onClick={handleLogout}>
-                {t('nav.logout')}
-              </Button>
-            </>
-          )}
-          <label className="flex items-center gap-2">
-            <select
-              className="rounded-md border border-border bg-muted px-2 py-1"
-              value={i18n.language}
-              onChange={(e) => setLanguage(e.target.value)}
-            >
-              {langs.map((l) => (
-                <option key={l} value={l}>
-                  {l.toUpperCase()}
-                </option>
-              ))}
-            </select>
-          </label>
-          <label className="flex items-center gap-2">
-            <select
-              className="rounded-md border border-border bg-muted px-2 py-1"
-              value={theme}
-              onChange={(e) => setTheme(e.target.value as Theme)}
-            >
-              {themes.map((th) => (
-                <option key={th} value={th}>
-                  {t(th)}
-                </option>
-              ))}
-            </select>
-          </label>
-        </nav>
+      <header className="border-b border-border px-4 py-3 sm:px-6 sm:py-4">
+        <div className="flex items-center justify-between gap-2">
+          <Link to="/" className="text-lg font-semibold text-primary">
+            {t('appName')}
+          </Link>
+
+          <nav className="hidden items-center gap-4 text-sm sm:flex">
+            {navLinks}
+            {selects}
+          </nav>
+
+          <button
+            type="button"
+            className="text-foreground sm:hidden"
+            onClick={() => setMobileMenuOpen((v) => !v)}
+            aria-label={t('nav.toggleMenu')}
+          >
+            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+
+        {mobileMenuOpen && (
+          <nav className="mt-3 flex flex-col items-stretch gap-3 text-sm sm:hidden">
+            {navLinks}
+            {selects}
+          </nav>
+        )}
       </header>
 
       <TelegramLinkWarningBanner />
diff --git a/frontend/src/routes/admin.tsx b/frontend/src/routes/admin.tsx
index 7e882bd..68ef3f6 100644
--- a/frontend/src/routes/admin.tsx
+++ b/frontend/src/routes/admin.tsx
@@ -24,13 +24,13 @@ function AdminLayout() {
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-10">
       <h1 className="text-2xl font-semibold tracking-tight">{t('nav.admin')}</h1>
-      <nav className="flex gap-1 border-b border-border">
+      <nav className="flex gap-1 overflow-x-auto border-b border-border">
         {TABS.map((tab) => (
           <Link
             key={tab.to}
             to={tab.to}
             activeOptions={{ exact: tab.to === '/admin' }}
-            className={cn('px-3 py-2 text-sm text-muted-foreground hover:text-foreground')}
+            className={cn('shrink-0 whitespace-nowrap px-3 py-2 text-sm text-muted-foreground hover:text-foreground')}
             activeProps={{ className: 'border-b-2 border-primary text-foreground font-medium' }}
           >
             {t(`admin.tabs.${tab.key}`)}
diff --git a/frontend/src/routes/admin/audit.tsx b/frontend/src/routes/admin/audit.tsx
index 9e5e480..2fe52af 100644
--- a/frontend/src/routes/admin/audit.tsx
+++ b/frontend/src/routes/admin/audit.tsx
@@ -36,6 +36,7 @@ function AdminAuditPage() {
 
       {data && data.items.length > 0 && (
         <>
+          <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
             <thead>
               <tr className="border-b border-border text-muted-foreground">
@@ -60,6 +61,7 @@ function AdminAuditPage() {
               ))}
             </tbody>
           </table>
+          </div>
 
           <div className="flex items-center justify-between text-sm">
             <span className="text-muted-foreground">{t('admin.users.total', { count: data.total })}</span>
diff --git a/frontend/src/routes/admin/roles.tsx b/frontend/src/routes/admin/roles.tsx
index bf9c163..a97b6cb 100644
--- a/frontend/src/routes/admin/roles.tsx
+++ b/frontend/src/routes/admin/roles.tsx
@@ -45,6 +45,7 @@ function AdminRolesPage() {
       )}
 
       {data && (
+        <div className="overflow-x-auto">
         <table className="w-full text-left text-sm">
           <thead>
             <tr className="border-b border-border text-muted-foreground">
@@ -84,6 +85,7 @@ function AdminRolesPage() {
             ))}
           </tbody>
         </table>
+        </div>
       )}
 
       {editing && <RoleFormDialog role={editing} open={!!editing} onOpenChange={(open) => !open && setEditing(null)} />}
diff --git a/frontend/src/routes/admin/users.tsx b/frontend/src/routes/admin/users.tsx
index 5f1ba2f..9041dee 100644
--- a/frontend/src/routes/admin/users.tsx
+++ b/frontend/src/routes/admin/users.tsx
@@ -49,6 +49,7 @@ function AdminUsersPage() {
 
       {data && (
         <>
+          <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
             <thead>
               <tr className="border-b border-border text-muted-foreground">
@@ -81,6 +82,7 @@ function AdminUsersPage() {
               ))}
             </tbody>
           </table>
+          </div>
 
           {data.items.length === 0 && <p className="text-sm text-muted-foreground">{t('admin.users.empty')}</p>}
 
diff --git a/frontend/src/shared/lib/i18n.ts b/frontend/src/shared/lib/i18n.ts
index b347d30..12a76a6 100644
--- a/frontend/src/shared/lib/i18n.ts
+++ b/frontend/src/shared/lib/i18n.ts
@@ -48,6 +48,7 @@ const resources = {
         settings: 'Настройки',
         admin: 'Админка',
         logout: 'Выйти',
+        toggleMenu: 'Меню',
       },
 
       activation: {
@@ -315,6 +316,7 @@ const resources = {
         settings: 'Settings',
         admin: 'Admin',
         logout: 'Log out',
+        toggleMenu: 'Menu',
       },
 
       activation: {
diff --git a/frontend/src/shared/ui/dialog.tsx b/frontend/src/shared/ui/dialog.tsx
index d8428ec..82a2080 100644
--- a/frontend/src/shared/ui/dialog.tsx
+++ b/frontend/src/shared/ui/dialog.tsx
@@ -11,7 +11,7 @@ export function DialogContent({ className, children, ...props }: DialogPrimitive
       <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/60" />
       <DialogPrimitive.Content
         className={cn(
-          'fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg',
+          'fixed left-1/2 top-1/2 z-50 w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg',
           className,
         )}
         {...props}