94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { loadComponent } from '@/lib/material-components';
|
|
|
|
interface TopNavigationBarProps {
|
|
title?: string;
|
|
user?: any;
|
|
onLogout?: () => void;
|
|
}
|
|
|
|
export function TopNavigationBar({ title, user, onLogout }: TopNavigationBarProps) {
|
|
const router = useRouter();
|
|
const [componentsLoaded, setComponentsLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
Promise.all([
|
|
loadComponent('icon-button'),
|
|
loadComponent('icon'),
|
|
]).then(() => {
|
|
setComponentsLoaded(true);
|
|
});
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('access_token');
|
|
localStorage.removeItem('refresh_token');
|
|
if (onLogout) {
|
|
onLogout();
|
|
} else {
|
|
router.push('/login');
|
|
}
|
|
};
|
|
|
|
if (!componentsLoaded) {
|
|
return (
|
|
<div style={{
|
|
height: '64px',
|
|
background: 'var(--md-sys-color-surface)',
|
|
borderBottom: '1px solid var(--md-sys-color-outline-variant)',
|
|
}} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<header style={{
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 999,
|
|
background: 'var(--ios-blur-bg)',
|
|
backdropFilter: 'var(--ios-blur)',
|
|
WebkitBackdropFilter: 'var(--ios-blur)',
|
|
borderBottom: '1px solid var(--md-sys-color-outline-variant)',
|
|
padding: '12px 16px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
<img
|
|
src="/logo/logo.svg"
|
|
alt="Logo"
|
|
style={{ height: '32px', width: 'auto', cursor: 'pointer' }}
|
|
onClick={() => router.push('/dashboard')}
|
|
/>
|
|
<h1 style={{
|
|
fontSize: '20px',
|
|
fontWeight: '500',
|
|
color: 'var(--md-sys-color-on-surface)',
|
|
margin: 0,
|
|
}}>
|
|
{title || 'Uchill Platform'}
|
|
</h1>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
|
{user && (
|
|
<span style={{
|
|
fontSize: '14px',
|
|
color: 'var(--md-sys-color-on-surface-variant)',
|
|
marginRight: '8px',
|
|
}}>
|
|
{user.first_name || user.email}
|
|
</span>
|
|
)}
|
|
<md-icon-button onClick={handleLogout} title="Выйти">
|
|
<md-icon>logout</md-icon>
|
|
</md-icon-button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|