66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
|
import api from '@/services/api'
|
|
import type { User } from '@/types'
|
|
|
|
interface Props {
|
|
user: User | null
|
|
onLogout: () => void
|
|
}
|
|
|
|
export default function Sidebar({ user, onLogout }: Props) {
|
|
const { pathname } = useLocation()
|
|
const navigate = useNavigate()
|
|
const [unreadCount, setUnreadCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
if (!user) {
|
|
setUnreadCount(0)
|
|
return
|
|
}
|
|
api.get<{ count: number }>('/notifications/count')
|
|
.then(({ data }) => setUnreadCount(data.count))
|
|
.catch(() => {})
|
|
const timer = setInterval(() => {
|
|
api.get<{ count: number }>('/notifications/count')
|
|
.then(({ data }) => setUnreadCount(data.count))
|
|
.catch(() => {})
|
|
}, 30000)
|
|
return () => clearInterval(timer)
|
|
}, [user])
|
|
|
|
const links = user ? [
|
|
{ to: '/', icon: '📊', label: 'Dashboard' },
|
|
{ to: '/projects', icon: '📁', label: 'Projects' },
|
|
{ to: '/proposes', icon: '💡', label: 'Proposes' },
|
|
{ to: '/notifications', icon: '🔔', label: 'Notifications' + (unreadCount > 0 ? ' (' + unreadCount + ')' : '') },
|
|
{ to: '/monitor', icon: '📡', label: 'Monitor' },
|
|
...(user.is_admin ? [{ to: '/roles', icon: '🔐', label: 'Roles' }] : []),
|
|
] : [
|
|
{ to: '/monitor', icon: '📡', label: 'Monitor' },
|
|
]
|
|
|
|
return (
|
|
<nav className="sidebar">
|
|
<div className="sidebar-header">
|
|
<h1>⚓ HarborForge</h1>
|
|
</div>
|
|
<ul className="nav-links">
|
|
{links.map((l) => (
|
|
<li key={l.to} className={pathname === l.to || (l.to !== '/' && pathname.startsWith(l.to)) ? 'active' : ''}>
|
|
<Link to={l.to}>{l.icon} {l.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="sidebar-footer">
|
|
<span>👤 {user ? user.username : 'Guest'}</span>
|
|
{user ? (
|
|
<button onClick={onLogout}>Log out</button>
|
|
) : (
|
|
<button onClick={() => navigate('/login')}>Log in</button>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|