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.
2026-07-02 17:55:33 +03:00
parent ff523d3d5a
commit 85becacea5
7 changed files with 101 additions and 58 deletions
@@ -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 />
@@ -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}`)}
@@ -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>
@@ -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)} />}
@@ -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>}