Refactor user settings access in navigation: replace direct settings link with username display for logged-in users, enhancing mobile and desktop menu experiences. Update logout button placement and styling for improved usability.
This commit is contained in:
@@ -48,9 +48,6 @@ function RootLayout() {
|
|||||||
<Link to="/dashboard" className="hover:text-primary" activeProps={{ className: 'text-primary' }}>
|
<Link to="/dashboard" className="hover:text-primary" activeProps={{ className: 'text-primary' }}>
|
||||||
{t('nav.dashboard')}
|
{t('nav.dashboard')}
|
||||||
</Link>
|
</Link>
|
||||||
<Link to="/settings" className="hover:text-primary" activeProps={{ className: 'text-primary' }}>
|
|
||||||
{t('nav.settings')}
|
|
||||||
</Link>
|
|
||||||
{user.role === 'admin' && (
|
{user.role === 'admin' && (
|
||||||
<Link to="/admin" className="hover:text-primary" activeProps={{ className: 'text-primary' }}>
|
<Link to="/admin" className="hover:text-primary" activeProps={{ className: 'text-primary' }}>
|
||||||
{t('nav.admin')}
|
{t('nav.admin')}
|
||||||
@@ -80,12 +77,23 @@ function RootLayout() {
|
|||||||
</select>
|
</select>
|
||||||
|
|
||||||
{user ? (
|
{user ? (
|
||||||
|
<>
|
||||||
|
{/* Имя пользователя — вход в настройки аккаунта: отдельный пункт меню под это не нужен. */}
|
||||||
|
<Link
|
||||||
|
to="/settings"
|
||||||
|
title={t('nav.settings')}
|
||||||
|
className="hidden max-w-40 truncate rounded-sm border border-border px-3 py-1 text-xs uppercase tracking-wide hover:bg-muted md:block"
|
||||||
|
activeProps={{ className: 'border-primary text-primary' }}
|
||||||
|
>
|
||||||
|
{user.userName}
|
||||||
|
</Link>
|
||||||
<button
|
<button
|
||||||
className="hidden rounded-sm border border-border px-3 py-1 text-xs uppercase tracking-wide hover:bg-muted md:block"
|
className="hidden rounded-sm border border-border px-3 py-1 text-xs uppercase tracking-wide hover:bg-muted md:block"
|
||||||
onClick={() => void handleLogout()}
|
onClick={() => void handleLogout()}
|
||||||
>
|
>
|
||||||
{t('nav.logout')}
|
{t('nav.logout')}
|
||||||
</button>
|
</button>
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Link
|
<Link
|
||||||
to="/login"
|
to="/login"
|
||||||
@@ -112,14 +120,19 @@ function RootLayout() {
|
|||||||
<Link to="/dashboard" onClick={() => setMenuOpen(false)}>
|
<Link to="/dashboard" onClick={() => setMenuOpen(false)}>
|
||||||
{t('nav.dashboard')}
|
{t('nav.dashboard')}
|
||||||
</Link>
|
</Link>
|
||||||
<Link to="/settings" onClick={() => setMenuOpen(false)}>
|
|
||||||
{t('nav.settings')}
|
|
||||||
</Link>
|
|
||||||
{user.role === 'admin' && (
|
{user.role === 'admin' && (
|
||||||
<Link to="/admin" onClick={() => setMenuOpen(false)}>
|
<Link to="/admin" onClick={() => setMenuOpen(false)}>
|
||||||
{t('nav.admin')}
|
{t('nav.admin')}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
{/* В мобильном меню тот же принцип: настройки открываются по имени пользователя. */}
|
||||||
|
<Link
|
||||||
|
to="/settings"
|
||||||
|
className="truncate border-t border-border pt-2"
|
||||||
|
onClick={() => setMenuOpen(false)}
|
||||||
|
>
|
||||||
|
{user.userName}
|
||||||
|
</Link>
|
||||||
<button className="py-1 text-left" onClick={() => void handleLogout()}>
|
<button className="py-1 text-left" onClick={() => void handleLogout()}>
|
||||||
{t('nav.logout')}
|
{t('nav.logout')}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user