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

@@ -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 />